Dynamic multi-level dropdown sticky menu in PHP MySQL using bootstrap

In this article we will create multilevel dynamic dropdown responsive menu/navigation using PHP, MYSQL, and Bootstrap, we will also use a sinanav jquery plugin more frontend sinanav is a free resource jquery plugin which is suitably works with bootstrap.

In previous days, I was searching about WordPress menu and how to create same in custom PHP and here I am creating.

in the below screenshot, you can see the multilevel dropdown menu and it is fully responsive.


Tree directory structure  script With PHP
Insert bellow inside the head tag:
        
        <!--For Plugins css-->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/css/animate.css">
<link rel="stylesheet" href="assets/css/sina-nav.css">

<!-- paste bellow link above body closing tag -->
assets/js/jquery.min.js
assets/js/bootstrap.min.js
assets/js/wow.min.js
assets/js/sina-nav.js
        
    

How to create multilevel dynamic dropdown navigation/menu 

It is very simple, Just follow the below simple steps

  1. Step 01: Create a Database and table
  2. Step 02: Create connection file connection.php
  3. step 03: Create an index.php page with a navigation
  4. step 04: Create function.php for menu creating

Step 01: Create a Database and table

In this step, we will create a database and menus table and we will also insert some data into it

        
        CREATE TABLE `menus` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `label` varchar(50) NOT NULL,
  `link` varchar(100) NOT NULL,
  `parent` int(11) NOT NULL DEFAULT 0,
  `sort` int(11) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table `menus`
--

INSERT INTO `menus` (`id`, `label`, `link`, `parent`, `sort`) VALUES
(1, 'PHP', '#', 0, 1),
(2, 'Tutorials', '#', 1, 2),
(3, 'Scripts', '#', 1, NULL),
(4, 'Arrays', '#', 2, NULL),
(5, 'Operators', '#', 2, NULL),
(6, 'Arithmetic operators', '#', 5, NULL),
(7, 'Assignment operators', '$', 5, NULL),
(8, 'Java', '#', 0, 3),
(9, 'Tutorials', '', 8, NULL),
(10, 'Programs', '', 8, NULL),
(11, 'JavaScript', '#', 0, 4),
(12, 'Contact', '#', 0, 10),
(13, 'CSS', '', 0, 9),
(14, 'Tutorials', '', 13, NULL),
(15, 'Servlet', '', 9, NULL),
(16, 'JSP', '', 9, NULL);
        
    

Related Post

Step 02: Create connection file connection.php

Now we need a connection file that will connect our database just copy-paste the below code into the connection.php
        
        <?php
$db_host = 'localhost';
$db_user = "root";
$db_pass = "";
$db_name = "std_bootstrap_sticky_navbar";
$conn = mysqli_connect($db_host, $db_user, $db_pass, $db_name);

if ($conn) {
    //echo 'connected';
}
        
    

Step 03: Create an index.php page with a navigation

Now we will create an index.php with bootstrap navigation

        
        <nav class="sina-nav mobile-sidebar navbar-fixed" data-top="0">
    <div class="container">

        <div class="sina-nav-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu">
                <i class="fa fa-bars"></i>
            </button>
            <a class="sina-brand" href="#">
                <h2>
                    Brand logo
                </h2>
                <p>Learn Something New</p>
            </a>
        </div><!-- .sina-nav-header -->



        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="navbar-menu">
            <ul class="sina-menu sina-menu-right" data-in="fadeInLeft" data-out="fadeInOut">
                <?php echo createMenu(0, $menus); ?>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- .container -->
</nav>
<div class="container" style="padding-top: 100px; padding-bottom:400px;">
    <div class="row">
        <div class="col-12 py-4">
            <h1>Page scroll content</h1>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Praesent tincidunt dolor eget lorem blandit, auctor
            porttitor enim faucibus. Mauris sed elit sollicitudin,
            aliquam lorem nec, suscipit ex. Sed mollis rhoncus
            scelerisque. Morbi varius a est sed luctus. Morbi sapien
            velit, venenatis a sapien vitae, commodo rutrum erat.
            Nam volutpat diam ac convallis egestas. Nunc convallis
            tempor hendrerit. Aenean turpis quam, viverra eu eros
            quis, ornare tristique velit.
        </div>
    </div>
</div>
        
    

Step 04: Create function.php for menu creating

Finally, we will create a function.php file where we will write PHP logic to create a dynamic menu

        
        <?php
include_once("connection.php");
$query = "SELECT id, label, link, parent FROM menus ORDER BY  sort ASC, label";
$result = mysqli_query($conn, $query) or die("database error:" . mysqli_error($conn));
// Create an array to conatin a list of items and parents
$menus = array(
    'items' => array(),
    'parents' => array()
);
// Builds the array lists with data from the SQL result
while ($items = mysqli_fetch_assoc($result)) {
    // Create current menus item id into array
    $menus['items'][$items['id']] = $items;
    // Creates list of all items with children
    $menus['parents'][$items['parent']][] = $items['id'];

    //echo  $items;
}

// function to create dynamic treeview menus
function createMenu($parent, $menu)
{
    $html = "";
    if (isset($menu['parents'][$parent])) {
        // $html .= '<ul class="sina-menu sina-menu-right" data-in="fadeInLeft" data-out="fadeInOut">';
        foreach ($menu['parents'][$parent] as $itemId) {
            if (!isset($menu['parents'][$itemId])) {
                $html .= "<li >
                         <a  href='" . $menu['items'][$itemId]['link'] . "'>" . $menu['items'][$itemId]['label'] . "</a>
                     </li>";
            }
            if (isset($menu['parents'][$itemId])) {
                $html .= "<li class='dropdown'>
                  <a class='dropdown-toggle' data-toggle='dropdown' href='" . $menu['items'][$itemId]['link'] . "'>" . $menu['items'][$itemId]['label'] .  "</a>";
                $html .= '<ul class="dropdown-menu">';
                $html .= createMenu($itemId, $menu);
                $html .= '</ul>';

                $html .= "</li>";
            }
        }
        // $html .= "</ul>";
    }
    return $html;
}
        
    

Leave a comment