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.