✖

All TalkersCode Topics

Follow TalkersCode On Social Media

✖

devloprr.com - A Social Media Network for developers Join Now ➔

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

Last Updated : Jul 1, 2023

IN - jQuery Ajax PHP MySQL | Written & Updated By - Amruta

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.

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

CHECK OUT THIS TUTORIAL LIVE DEMO →

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.

I hope this tutorial on drop down list in php from a database helps you and the steps and method mentioned above are easy to follow and implement.

CHECK OUT THIS TUTORIAL LIVE DEMO →