Dynamic menu with sub-menu using php and mysql - Mostlikers

07 February, 2014

Dynamic menu with sub-menu using php and mysql

Recently I have posted how to create dynamic menu concept. But my readers asking me for the sub menu. Here I have explained How to implement Parent menu and unlimited child menu using php and MySQLi.

sub_menu

Live Demo       Download


Database

This concept having 2 table name as menu_tbl and sub_menu create below form menu_tbl table 
CREATE TABLE IF NOT EXISTS `menu_tbl` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`menu_name` varchar(300) NOT NULL UNIQUE,
)

Second Table

CREATE TABLE IF NOT EXISTS `sub_menu` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`menu_id` int(30) NOT NULL UNIQUE,
`menu_name` int(30) NOT NULL UNIQUE,
`sub_menuname` int(30) NOT NULL UNIQUE,
)

 

PHP

Main menu name id to fetch and store the 2nd matching submenu record
<?php 
if(isset($_POST['submit'])!="")
{
    $name=$_POST['menu_name'];
    
    $insert1=mysql_query("insert into menu_tbl(menu_name) values('$name')") or
             die .mysql_error();
    
    if($insert1) 

    {
        echo "<span style='color:red;'>main menu inserted</span>";
    }
}

 if(isset($_POST['submit2'])!="")
 {
     $main_menu=$_POST['main_menu'];
     $sel1=mysql_query("select * from menu_tbl where id='$main_menu'");
      mysql_num_rows($sel1);
     while($f1=mysql_fetch_array($sel1))
     {
         $menu1_name=$f1['menu_name'];
     }
     $sub_menu1_name=$_POST['sub_menu1_name'];
     
     $insert2=mysql_query("insert into sub_menu(menu_id,menu_name,sub_menuname)
            values('$main_menu','$menu1_name','$sub_menu1_name')");
     if($insert2)
    {
        echo "<span style='color:red;'>sub menu inserted</span>";
    }
 }
 ?>


HTML

id value fetches and storing the matching record in 2 table watch below code
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mostlikers_menu</title>
<style type="text/css" media="screen">
#horizontalmenu ul {
padding:1; margin:1; list-style:none;
}
#horizontalmenu li {
float:left; position:relative; padding-right:100; display:block;
border:4px solid #CC55FF; 
border-style:inset;
}
#horizontalmenu li ul {
    display:none;
position:absolute;
}
#horizontalmenu li:hover ul{
    display:block;
    background:red;
height:auto; width:8em; 
}
#horizontalmenu li ul li{
    clear:both;
border-style:none;}
</style>
</head>
<body>
menu #1:
<form action="" method="post" name="form">

<table width="23%" border="2" cellspacing="0" cellpadding="10">
  <tr>
    <th colspan="2" scope="col">ADD Menu</th>
    </tr>
  <tr>
    <th scope="row">Menu  name:</th>
    <td><label for="menu_name"></label>
      <input type="text" name="menu_name" id="menu_name" /></td>
  </tr>
  <tr>
    <th colspan="2" scope="row">
       <input type="submit" name="submit" id="submit" value="Submit" /></th>
    </tr>
</table>
</form> 
<form action="" method="post" name="form1">
<table width="26%" border="2" cellspacing="0" align="center" cellpadding="10">
  <tr>
    <th colspan="2" scope="col">ADD Sub Menu</th>
    </tr>
  <tr>
    <th scope="row">Main Menu:</th>
    <td><label for="main_menu"></label>
      <select name="main_menu" id="main_menu" >
      <option value="">--select menu--</option>
      <?php
      $select=mysql_query("select * from menu_tbl");
      while($menu1=mysql_fetch_array($select))
      {
      ?>
      <option value="<?php echo $menu1['id'];?>"> <?php echo $menu1['menu_name'];?></option>
      <?php
      }
      ?>
      
      </select></td>
  </tr>
  <tr>
    <th scope="row">Sub Menu name 1</th>
    <td id=""><label for="sub_menu1_name"></label>
      <input type="text" name="sub_menu1_name" id="sub_menu1_name" /></td>
  </tr>
  <tr>
    <th colspan="2" scope="row">
       <input type="submit" name="submit2" id="submit2" value="Submit" /></th>
    </tr>
</table>
</form>
<div id="horizontalmenu">
<?php
$mainmenu=mysql_query("select * from menu_tbl");
while($sss=mysql_fetch_array($mainmenu))
{
    $menu=$sss['menu_name'];
    $menu1=$sss['id'];
?>
        <ul> <li><a href="#"><?php echo $menu; ?></a>
        <?php
    
    $select2=mysql_query("select * from sub_menu where menu_id='$menu1'");
    if(mysql_num_rows($select2)=="")    {       
    }
    else
    {   ?>
      <ul>
    <?php
      while($menu2=mysql_fetch_array($select2))
      {?>
      <li><a href="#"><?php echo $menu2['sub_menuname'];?></a></li>
      <?php  } ?>
      </ul>
      <?php  } ?>
      </li>
          <?php } ?>
      
  </ul></div>
</body>
</html>

"You have to dream before your dreams can come true."
                                             
                                         - A. P. J. Abdul Kalam








Related Topics

8 comments:

  1. This comment has been removed by the author.

    ReplyDelete
  2. hi i need to display menu like flipkart menus with category . help me please

    ReplyDelete
    Replies
    1. http://www.mostlikers.com/2015/10/get-all-child-grandchild-etc-nodes.html

      Delete