Wednesday, 23 January 2013

PHP Dynamic Drop Down Menu, Horizontal Menu in PHP | PHP Tutorial for Beginners


What is Menu bar or Horizontal menu?
Menu bar or Horizontal menu is one top most element of any website from where user can navigate to multiple pages. It Helps the user of your site to easily find out element for which he came.

Whenever we see or create a website the top most element is Navigation menu or Drop down menu or Horizontal menu. We can Google and get lots of code which create css menu bar which is static. But if we want to create dynamic drop down menu bar then only this code will not help. In Dynamic menu bar or horizontal menu we fetch the menu data from mysql database and show in front end.

Difference between Static and Dynamic Menu bar or Horizontal menu.
A static menu bar or horizontal menu is which we can not change from back end or admin panel. The list of menu items inserted in coding will be shown in menu until and unless we change or add them through menu code.
Where as the dynamic menu is one which show the menu items fetched from database table. If new item is inserted in database table then it automatically shown in front end menu bar.

PHP dynamic drop down menu or horizontal menu:
In  this tutorial of php code for beginners we will show how to create Dynamic drop down menu bar or Dynamic drop down horizontal menu in php with use of mysql database.

Create a database named myhotel and two table in it called state and city.
The state table contain the state name and state id fields  The city table contain city name, city id and state id in which he belong.

State table look like:-
state_id state_name
1 Maharashtra
2 Gujarat
4 Karnataka

City table look like:-
 city_id state_id             state_name
1 1 Mumbai
2 1 Pune
3 1 Thane
4 2 Gandhi nagar

Step 1:- Create a php configuration file which store the mysql database information. In my case it is config.php

 <?php
$hostname_conn = "localhost";
$database_conn = "myhotel";
$username_conn = "root";
$password_conn = "";

$conn = mysql_connect($hostname_conn, $username_conn, $password_conn) or trigger_error(mysql_error(),E_USER_ERROR);
mysql_select_db($database_conn, $conn) or die("could not".mysql_error());
?>

Step 2:- Now create php file which contain your Dynamic menu.

 <?php
 // Included configuration file in our code.
include("config.php");
?>
<html>
<head>
<title>Dynamic Drop Down menu in php</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<ul id="Drop_Down_Menu">
<?php
// Creating query to fetch state information from mysql database table.
$state_query = "select * from state";
$state_result = mysql_query($state_query);
while($r = mysql_fetch_array($state_result)){ ?>
<li><a href="#"><?php echo $r['state_name'];?></a>
<ul>
<?php
$city_query = "select * from city where state_id=".$r['state_id'];
$city_result = mysql_query($city_query);
while($r1 = mysql_fetch_array($city_result)){ ?>
<li><a href="#"><?php echo $r1['city_name'];?></a></li>
<?php } ?>
</ul>
</li>
<?php } ?>
</ul>
</body>
</html>

Step 3:- Css for you Menu bar. Put this in to style.css file.

<style type="text/css">
ul {
    font-family: Arial, Verdana;
    font-size: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}
ul li {
    display: block;
    position: relative;
    float: left;
}
li ul {
    display: none;
}
ul li a {
    display: block;
    text-decoration: none;
    color: #ffffff;
    border-top: 1px solid #ffffff;
    padding: 5px 15px 5px 15px;
    background: #1e7c9a;
    margin-left: 1px;
    white-space: nowrap;
}
ul li a:hover {
background: #3b3b3b;
}
li:hover ul {
    display: block;
    position: absolute;
}
li:hover li {
    float: none;
    font-size: 11px;
}
li:hover a { background: #3b3b3b; }
li:hover li a:hover {
    background: #1e7c9a;
}

</style>

Now your Dynamic drop down menu bar or horizontal menu is ready to use.

Hope this php tutorial is useful for you. Keep following www.phpcodeforbeginner.blogspot.in for more help.

14 comments:

  1. It's gud, but how to view images of selected category

    ReplyDelete
  2. I'm new to PHP when i run this its not working for me

    ReplyDelete
  3. I want to learn PHP can u help me....

    ReplyDelete
  4. how do i insert the selected value back into mysql

    ReplyDelete
    Replies
    1. To get the city name in next page and insert that value into database you need to pass the city name in query string of menu URL.

      Exmple:-

      (Here test.php is page where you go after clicking any city name.) On test.php use $_GET['city'] to receive city name. Now you got the city name, use sql query and store into database.

      Delete
  5. Helpful stuff for beginners

    ReplyDelete
  6. Hi, it would be great if you provided an example of the working code - otherwise good info.

    ReplyDelete
  7. Hi...I have Multiple Drop Down list. If any user selects any values from one drop down then how can I pass its values in SQL query and fetch the data from DB.

    ReplyDelete
  8. It's not working...

    Here the result:

    BCS 1213

    Warning: mysql_fetch_array() expects parameter 1 to be resource, boolean given in C:\xampp\htdocs\crsv1\testing1.php on line 22
    BCS 1313

    Warning: mysql_fetch_array() expects parameter 1 to be resource, boolean given in C:\xampp\htdocs\crsv1\testing1.php on line 22
    BCS 1323

    Warning: mysql_fetch_array() expects parameter 1 to be resource, boolean given in C:\xampp\htdocs\crsv1\testing1.php on line 22
    DCT 1013

    Warning: mysql_fetch_array() expects parameter 1 to be resource, boolean given in C:\xampp\htdocs\crsv1\testing1.php on line 22
    GDM 110

    Warning: mysql_fetch_array() expects parameter 1 to be resource, boolean given in C:\xampp\htdocs\crsv1\testing1.php on line 22

    ReplyDelete
  9. Warning: mysql_fetch_array() expects parameter 1 to be resource, boolean given in C:\xampp\htdocs\crsv1\testing1.php on line 22

    ReplyDelete
  10. This comment has been removed by the author.

    ReplyDelete
  11. THANKS FOR BATTER SOLUTION SEE http://www.alltimenews.com

    ReplyDelete