Check Out The Latest Themes And Exclusive Deals And Offers On Themes
In Our Deals For Web Developers Section


Join Today And Get All The 87 Themes In Just $69! Join Today

Dynamic Drop Down Menu Using jQuery, Ajax, PHP And MySQL

Friday, Jan 27, 2017

Tags:- jQuery Ajax PHP MySQL


In this tutorial we will show you how to create dynamic drop down menu using jQuery, Ajax, PHP and MySQL.You had seen dynamic drop down menu in many online shopping website where you just hover on menu and a big submenu with images will open that's what we were going to create in this tutorial.You may also like dynamic select option menu.


See Demo
Dynamic Drop Down Menu Using jQuery, Ajax, PHP And MySQL


To Create Dynamic Drop Down Menu It Takes Only Three Steps:-

  1. Make a PHP file and define markup and scripting
  2. Make a PHP file to get sub menu
  3. Make a CSS file and define styling


Step 1.Make a PHP file and define markup and scripting

We make a PHP file and save it with a name menu.php

// Database Structure 
CREATE TABLE `menu` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `menu` text NOT NULL,
 PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=6 DEFAULT CHARSET=latin1

CREATE TABLE `submenu` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `menu_id` int NOT NULL,
 `sub_menu` text NOT NULL,
 PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=6 DEFAULT CHARSET=latin1

<html>
<head>
<link href="menu_style.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function get_submenu(id)
{
$.ajax
 ({
 type:'post',
 url:'get_submenu.php',
 data:{
  get_submenu:"submenu",
  menu_id:id
 },
 success:function(response) {
 if(response!="")
 {
  $("#link"+id+">#submenu_div").html(response);
 }
 }
 });
}
</script>
</head>
<body>
<div id="wrapper">

<div id="menu_div">
 <?php
 $host="localhost";
 $username="root";
 $password="";
 $databasename="sample";
 $connect=mysql_connect($host,$username,$password);
 $db=mysql_select_db($databasename);

 $menu = mysql_query("SELECT * FROM menu");
 echo "<div id='main_menu'>";
 while($row=mysql_fetch_array($menu))
 {
  ?>
  <li class='menu_link' id="link<?php echo $row['id'];?>">
  <a href='' class="menu_anchor" id="<?php echo $row['id'];?>" onmouseover="get_submenu(this.id);"><?php echo $row['menu'];?></a>
  <ul id='submenu_div'></ul>
  </li>
  <?php
 }
 echo "</div>";
 ?>
</div>

</div>
</body>
</html>

In this step we create two database table 'menu' and 'submenu' to store our menu and submenu we create a div and display menu from database and when user hover the menu link we call get_submenu() function which creates an ajax request and send menu id to 'get_submenu.php' to get all the sub menu related to that menu and then we display in submenu_div.You may also like create mega drop down menu using CSS.



Step 2.Make a PHP file to get sub menu

We make a PHP file and save it with a name get_submenu.php

<?php
$host="localhost";
$username="root";
$password="";
$databasename="sample";
$connect=mysql_connect($host,$username,$password);
$db=mysql_select_db($databasename);

if(isset($_POST['get_submenu']))
{
 $menu_id=$_POST['menu_id'];
 $sub_menu = mysql_query("SELECT * FROM submenu where menu_id='$menu_id'");
 while($row=mysql_fetch_array($sub_menu))
 {
  echo "<li><a href=''>".$row['sub_menu']."<br><img src='images/dynamic_menu/".$row['sub_menu'].".jpg'></a></li>";
 }	
 exit();
}
?>

In this step we get menu id from ajax request and then we get all the sub menu links related to that menu and display them with there images.You may also like create responsive menu using CSS.



Step 3.Make a CSS file and define styling

We make a CSS file and save it with a name menu_style.css

body
{
 margin:0 auto;
 padding:0px;
 text-align:center;
 width:100%;
 font-family: "Myriad Pro","Helvetica Neue",Helvetica,Arial,Sans-Serif;
 background-color:#BDBDBD;
}
#wrapper
{
 margin:0 auto;
 padding:0px;
 text-align:center;
 width:995px;
}
#menu_div
{
 float:left;
 padding:0px;
 width:710px;
 height:50px;
 line-height:50px;
 margin-left:145px;
 position:relative;
}
#menu_div #main_menu .menu_link
{
 background-color:#2E2E2E;
 list-style-type:none;
 float:left;
 border-left:1px solid #666;
}
#menu_div #main_menu .menu_anchor
{
 color:white;
 text-decoration:none;
 padding:20px;
}
#menu_div #main_menu .menu_link:hover #submenu_div
{
 display:block;
}
#menu_div #submenu_div
{
 display:none;
 background-color:white;
 width:600px;
 position:absolute;
 left:0px;
 width:702px;
 margin:0px;
 padding:0px;
}
#menu_div #submenu_div li
{
 display:inline-block;
 margin:15px;
}
#menu_div #submenu_div li a
{
 color:blue;
 text-decoration:none;
}
#menu_div #submenu_div li a img
{
 max-height:80px;
}

That's all, this is how to create dynamic drop down menu using jQuery, Ajax, PHP and MySQL. You can customize this code further as per your requirement. And please feel free to give comments on this tutorial.

Join Us With Our 21000+ Subscribers And Get Our Latest Tutorials Update Via Email