Dynamic Drop down Menu Using PHP and MySQL

In this tutorial, I will show you how to create a dynamic drop down list using PHP and MySql.

Users have the ability to add any number of Main menus as well as sub menu for each of them. All the data are pulled from the database as well as all the link which are embedded in the drop down menu is also pulled from the database itself.

Overview

To continue in this you will need to look into following files.

Copy the codes and save them in files with their respective name in the same folder.

  • Index.php
  • Add_menu.php
  • Style.css

Database Schema

In this part you need to create a database(I will name mine “menudb”) You can name yours accordingly.

Then add tables to your database to store the values.

You can use the codes below to add tables to your database.

CREATE TABLE IF NOT EXISTS `menu_main` (
`menu_id` int(11) NOT NULL AUTO_INCREMENT,
`menu_name` varchar(50) NOT NULL,
`menu_link` varchar(50) NOT NULL,
PRIMARY KEY (`menu_id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=2 ;
CREATE TABLE IF NOT EXISTS `menu_sub` (
`sub_id` int(11) NOT NULL AUTO_INCREMENT,
`menu_id` int(20) NOT NULL,
`sub_name` varchar(200) NOT NULL,
`sub_link` varchar(200) NOT NULL,
PRIMARY KEY (`sub_id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=2 ;

CREATE TABLE IF NOT EXISTS `menu_main` (
`menu_id` int(11) NOT NULL AUTO_INCREMENT,
`menu_name` varchar(50) NOT NULL,
`menu_link` varchar(50) NOT NULL,
PRIMARY KEY (`menu_id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=2 ;
CREATE TABLE IF NOT EXISTS `menu_sub` (
`sub_id` int(11) NOT NULL AUTO_INCREMENT,
`menu_id` int(20) NOT NULL,
`sub_name` varchar(200) NOT NULL,
`sub_link` varchar(200) NOT NULL,
PRIMARY KEY (`sub_id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=2 ;


Index.php

In this file, we have HTML code which generates the user interface as well as the Server side code which is used to get all the data from the database. The codes place the data inside the correct list elements in order to perform the drop down list.

First, it queries for the main menu items and then, it queries all the sub menu items relevant to a specific main menu using the main menu id.

After that, sub menu items are also placed inside the sub menu list tag.

<?php
$dbcon = new MySQLi("localhost","root","","menudb");
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tutorial-18</title>
<script type="text/javascript" src="jquery-1.11.3-jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
</head>
<body>
<div id="head">
<div class="wrap"><br />
<h1>Dynamic Drop down</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 menu_main");

while($row=$res->fetch_array())
{
?>
<li><a href="<?php echo $row['menu_link']; ?>"><?php echo $row['menu_name']; ?></a>
<?php
$res_pro=$dbcon->query("SELECT * FROM menu_sub WHERE menu_id=".$row['menu_id']);
?>
<ul>
<?php
while($pro_row=$res_pro->fetch_array())
{
?><li><a href="<?php echo $pro_row['sub_link']; ?>"><?php echo $pro_row['sub_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>

 

Add_menu.php

In this page, we give the user the ability to add main and sub menu according to his/her wish.

There is a server-side database query section which will load the names of the main menu in order to make user add sub-menu.

<?php
$dbcon = new MySQLi("localhost","root","","menudb");

if(isset($_POST['add_main_menu']))
{
$menu_name = $_POST['menu_name'];
$menu_link = $_POST['mn_link'];
$sql=$dbcon->query("INSERT INTO menu_main(menu_name,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 menu_sub(menu_id,sub_name,sub_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>Tutorial-18</title>
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
</head>
<body>
<div id="head">
<div class="wrap"><br />
<h1>Dynamic Drop Down</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 Node</option>
<?php
$res=$dbcon->query("SELECT * FROM menu_main");
while($row=$res->fetch_array())
{
?>
<option value="<?php echo $row['menu_id']; ?>"><?php echo $row['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>

 

Style.css

This CSS codes in the file are used for styling’s HTML attributes.

* {
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;
}

 

Bonus

You can download the complete working demo source code here:
I hope the tutorial helped you learn to create a dynamic drop down list using PHP and MySql.

I would love to solve your problem if any so don’t forget to comment. Also, appreciate if you shared the post with your friends.

Download the complete source code.

Grab the the free working demo Intantly!

You have Successfully Suscribed!

One thought on “Dynamic Drop down Menu Using PHP and MySQL

Leave a Reply

Your email address will not be published. Required fields are marked *