Creating a Dynamic Drop Down Menu using PHP and MySQLi | Coding Cage

Creating a Dynamic Drop Down Menu using PHP and MySQLi

By
We have already seen tutorial about simple Drop Down Menu using CSS3 and jQuery, and this tutorial will cover creating a Dynamic Horizontal Drop Down Menu with its sub menu using PHP and MySQLi, it’s a simple concept and easy to create with PHP and MySQLi, you can also add and set links in main menu and sub menu from database data using PHP, I’ve used MySQLi object method, so let’s take a look at this tutorial.
Dynamic Drop Down Menu using PHP and MySQLi
 

consider following two tables

table 1 : main_menu
this is the main table and stores main menu links like ‘home, about, contact’.

CREATE TABLE IF NOT EXISTS `main_menu` (
  `m_menu_id` int(2) NOT NULL AUTO_INCREMENT,
  `m_menu_name` varchar(20) NOT NULL,
  `m_menu_link` varchar(50) NOT NULL,
  PRIMARY KEY (`m_menu_id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ;

table 2 : sub_menu
this table stores sub menu of main menu table and shows links within it.

CREATE TABLE IF NOT EXISTS `sub_menu` (
  `s_menu_id` int(2) NOT NULL AUTO_INCREMENT,
  `m_menu_id` int(2) NOT NULL,
  `s_menu_name` varchar(20) NOT NULL,
  `s_menu_link` varchar(50) NOT NULL,
  PRIMARY KEY (`s_menu_id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=6 ;

add_menu.php

this file contains few lines of php code to insert main menu and sub menu,
sub menu can be added by selecting main parent menu for it i have used here html select box to select main menu, after selecting parent menu you can create sub menus with anchor links.

<?php
$dbcon = new MySQLi("localhost","root","","dbmenu");
if(isset($_POST['add_main_menu']))
{
 $menu_name = $_POST['menu_name'];
 $menu_link = $_POST['mn_link'];
 $sql=$dbcon->query("INSERT INTO main_menu(m_menu_name,m_menu_link) VALUES('$menu_name','$menu_link')");
}
if(isset($_POST['add_sub_menu']))
{
 $parent = $_POST['parent'];
 $proname = $_POST['sub_menu_name'];
 $menu_link = $_POST['sub_menu_link'];
 $sql=$dbcon->query("INSERT INTO sub_menu(m_menu_id,s_menu_name,s_menu_link) VALUES('$parent','$proname','$menu_link')");
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dynamic Dropdown Menu using PHP and MySQLi</title>
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
</head>
<body>
<div id="head">
<div class="wrap"><br />
<h1><a href="https://codingcage.com/">Coding Cage - programming blog</a></h1>
</div>
</div>
<center>
<pre>
<form method="post">
<input type="text" placeholder="menu name :" name="menu name" /><br />
<input type="text" placeholder="menu link :" name="mn_link" /><br />
<button type="submit" name="add_main_menu">Add main menu</button>
</form>
</pre>
<br />
<pre>
<form method="post">
<select name="parent">
<option selected="selected">select parent menu</option>
<?php
$res=$dbcon->query("SELECT * FROM main_menu");
while($row=$res->fetch_array())
{
 ?>
    <option value="<?php echo $row['m_menu_id']; ?>"><?php echo $row['m_menu_name']; ?></option>
    <?php
}
?>
</select><br />
<input type="text" placeholder="menu name :" name="sub_menu_name" /><br />
<input type="text" placeholder="menu link :" name="sub_menu_link" /><br />
<button type="submit" name="add_sub_menu">Add sub menu</button>
</form>
</pre>
<a href="index.php">back to main page</a>
</center>
</body>
</html>


index.php

this file shows dynamic horizontal drop down menu and all the menu and sub menu links are shown from the database tables.
there are two while loops I’ve created here first one is to display main menu from ‘main_menu’ table and inner while loop is to display sub menu from ‘sub_menu’ table see the below code.

<?php
$dbcon = new MySQLi("localhost","root","","dbmenu");
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dynamic Dropdown Menu using PHP and MySQLi</title>
<script type="text/javascript" src="jquery.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
</head>
<body>
<div id="head">
<div class="wrap"><br />
<h1><a href="https://codingcage.com/">Coding Cage - programming blog</a></h1><label><a href="add_menu.php">add menu here</a></label>
</div>
</div>

<div class="wrap">
<ul id="nav">
<li><a href="#">Homepage</a></li>
<?php
$res=$dbcon->query("SELECT * FROM main_menu");
while($row=$res->fetch_array())
{
 ?>
 <li><a href="<?php echo $row['m_menu_link']; ?>"><?php echo $row['m_menu_name']; ?></a>
 <?php
 $res_pro=$dbcon->query("SELECT * FROM sub_menu WHERE m_menu_id=".$row['m_menu_id']);
 ?>
        <ul>    
  <?php  
  while($pro_row=$res_pro->fetch_array())
  {
   ?><li><a href="<?php echo $pro_row['s_menu_link']; ?>"><?php echo $pro_row['s_menu_name']; ?></a></li><?php
  }
  ?>
 </ul>
 </li> 
 
    <?php
}
?>
</ul> 
</div>

<script type="text/javascript">
$(document).ready(function() 
{
 $('#nav li').hover(function() 
 {
  $('ul', this).slideDown('fast');
 }, function() 
 {
  $('ul', this).slideUp('fast');
 });
});
</script>
</body>
</html>


style.css


* {
 margin: 0;
 padding: 0;
}
body {
 font-family: "Comic Sans MS", cursive;
 font-size: 15px;
 color: #232323;
}

#head {
 background: #f9f9f9;
 height: 100px;
 padding-top: 15px;
 border-bottom: 1px solid #d5dce8;
}
.wrap {
 width: 1000px;
 margin: 0 auto;
}
#head h1
{
 float:left;
}
#head a
{
 float:right;
}
input,select
{
 width:300px;
 height:35px;
}

/* nav menu */
#nav {
 margin: 0;
 padding: 0;
 list-style: none;
 border-left: 1px solid #d5dce8;
 border-right: 1px solid #d5dce8;
 border-bottom: 1px solid #d5dce8;
 border-bottom-left-radius: 4px;
 -moz-border-radius-bottomleft: 4px;
 -webkit-border-bottom-left-radius: 4px;
 border-bottom-right-radius: 4px;
 -moz-border-radius-bottomright: 4px;
 -webkit-border-bottom-right-radius: 4px;
 height: 50px;
 padding-left: 15px;
 padding-right: 15px;
 background: #f9f9f9;
}
#nav li {
 float: left;
 display: block;
 background: none;
 position: relative;
 z-index: 999;
 margin: 0 1px;
}
#nav li a {
 display: block;
 padding: 0;
 font-weight: 700;
 line-height: 50px;
 text-decoration: none;
 color: #818ba3;
 zoom: 1;
 border-left: 1px solid transparent;
 border-right: 1px solid transparent;
 padding: 0px 12px;
}
#nav li a:hover, #nav li a.hov {
 background-color: #fff;
 border-left: 1px solid #d5dce8;
 border-right: 1px solid #d5dce8;
 color: #576482;
}
/* subnav */
#nav ul {
 position: absolute;
 left: 1px;
 display: none;
 margin: 0;
 padding: 0;
 list-style: none;
 -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
 -o-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
 -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
 padding-bottom: 3px;
}
#nav ul li {
 width: 180px;
 float: left;
 border-top: 1px solid #fff;
 text-align: left;
}
#nav ul li:hover {
 border-left: 0px solid transparent;
 border-right: 0px solid transparent;
}
#nav ul a {
 display: block;
 height: 20px;
 line-height: 20px;
 padding: 8px 5px;
 color: #666;
 border-bottom: 1px solid transparent;
 text-transform:  uppercase;
 color: #797979;
 font-weight: normal;
}
#nav ul a:hover {
 text-decoration: none;
 border-right-color: transparent;
 border-left-color: transparent;
 background: transparent;
 color: #4e4e4e;
}

that's it we have created here a simple but Dynamic Drop Down Menu with CSS3 using PHP and MySQLi object method, you can download the code and try it in your localhost.




35 comments:

  1. Thanks for share your idea . its so help full

    ReplyDelete
  2. good one...

    ReplyDelete
  3. nice tutorial. But I want to ask a question, how when we would like add a little bit child level menu ? should we add the script again manually? This is the problem!

    ReplyDelete
    Replies
    1. you should add script manually ...

      Delete
  4. Hi its helpful, but how to delete the menu..?

    ReplyDelete
    Replies
    1. You can delete a menu link from database with an SQL Query
      DELETE FROM main_menu WHERE m_menu_id = 1;
      or
      DELETE FROM main_menu WHERE m_menu_name LIKE "%test%";

      Or if you want to delete submenu
      DELETE FROM sub_menu WHERE s_menu_id = 1;
      or
      DELETE FROM sub_menu WHERE s_menu_name LIKE "%test%";

      I used 1 as ID but that may not be the row you want to delete so check the ID before running the query.
      The other query uses the sql LIKE function. So that will delete row where test exist somewhere in the name. So you may want to change test to something else

      Delete
  5. Great tutorial ! It helps me a lot.

    ReplyDelete
  6. It completed few things what I was missing out... Thanks !

    ReplyDelete
  7. great tutorial but how about generating new page like contact.php

    ReplyDelete
    Replies
    1. this tutorial is just for creating a dynamic drop down menu linked with pages which are stored in database with page names, for that you have to create contact.php manually and adding this page into the database you can show contact page link to the drop down menu

      Delete
    2. the user knows nothing in php how can they create it as manually ?

      Delete
    3. using and editor create contact.php page and add file link in your database, it's simple ...

      Delete
  8. Nice blog...Very useful information is providing by ur blog. Great beginning php tutorials Very clear and helpful for beginners.

    ReplyDelete
  9. how to delete this menu tutorial?

    ReplyDelete
  10. please can u able to add edit and delete also

    ReplyDelete
    Replies
    1. create a new page for edit/delete and display all the menus from database by fetching them, and put the link for edit/delete these menus, as we have done in CRUD Tutorials

      Delete
  11. https://app.box.com/s/ijdqq0t2imanvc96synuah816fgdc7zn not working download link

    ReplyDelete
    Replies
    1. Hello Roshan, i have just update the downloading link get it from the same download link (from above) or click here : download here

      Delete
  12. thanks a looooooooots.................

    ReplyDelete
  13. My submenu won't show. But I don't know whats going wrong.

    ReplyDelete
    Replies
    1. Have you added the jquery.js to your homepage?

      Delete
  14. this is helpfull tutorial. i was looking for a source code for my examination. and i found it. thanks :)

    ReplyDelete
  15. Could I have small database of names. Categorize names into groups- Say Group 1 Group 2 etc. Then place Group 1 Group 2 etc in the dropdown menu and have that show all the names from each group based on selected drop down menu? User clicks Group 1 from drop down menu and that returns all names from Group 1 table in database with links. And user can search names from each group as well. Is this possible?

    ReplyDelete
  16. Hi
    Great script. I can add all the main menu and submenu, but it won´t show the submenus. And I have some danish letters åæø in my text and they are shown as ?. I´ve tried to add mysql_query("SET NAMES 'utf8'"); but it wont work. Can you help?

    ReplyDelete
  17. Thanks for the post. Loops inside loops can get confusing, but they seem quite powerful. Can you suggest a way to make the selected menu item's class "active?"

    ReplyDelete
  18. Hi. I'm looking something like this but for mySQL. i have just tried change script but not working properly. Can you help me?

    ReplyDelete
  19. Hi. I'm looking something like this but for mySQL. i have just tried change script but not working properly. Can you help me?

    ReplyDelete
  20. how i can create a php code for links that i want to insert post into data into the database plzz help me

    ReplyDelete
  21. one of the great blog bro. one thing how to i add one more sub-menu one sublink . please help me ...bro

    ReplyDelete
  22. how do i add delete... can u give me the code where there is already a delete button for main menu and sub menu..thanks

    ReplyDelete