Dynamic Drop Down List Php Mysqli Tutorial

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

Last Updated : Apr 15, 2022

IN – jQuery Ajax PHP MySQL

In this tutorial we will show you how to create dynamic roboh 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 tuntunan.You may also like dynamic select option menu.

Join With 27,000+ Members In Our Google Group & Get Latest Tutorials

Get our latest tutorials, How-To guides on web development every day right into your inbox.

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

To Create Dynamic Merosot 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 Titinada 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" landasan kereta api="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 Menyebelahi","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.

Source: http://talkerscode.com/webtricks/dynamic-dropdown-menu-using-jquery-ajax-php-and-mysql.php