Blog » PHP » php mysql dynamic drop down menu

php mysql dynamic drop down menu

This tutorial will show you how to create dynamic drop down menu using php html css Languages.drop down menus are very useful for websites. lot of categories can be displayed on a one name. when the user moves the mouse over displaying hover selector is used to show the drop down menu. when the user clicks on the button can be seen drop menu.

Completed source code 


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Dropdown Navigation with jQuery and CSS</title>
<style>
/* main Styles */

html { box-sizing: border-box; }

*, *:before, *:after {
	box-sizing: inherit;
}

body {
 background: #fafafa;
 font-family: "Roboto", sans-serif;
 font-size: 14px;
 margin: 0;
}

a { text-decoration: none; }

.container {
 width: 1000px;
 margin: auto;
}

h1 { text-align:center; margin-top:150px;}

/* Navigation Styles */

nav { background: -webkit-linear-gradient(#585858,#3d3d3d); }

nav ul {
 font-size: 0;
 margin: 0;
 padding: 0;
}

nav ul li {
 display: inline-block;
 position: relative;
}

nav ul li a {
 color: #fff;
 display: block;
 font-size: 14px;
 padding: 15px 14px;
 transition: 0.3s linear;
}

nav ul li:hover { background: #126d9b; }

nav ul li ul {
 border-bottom: 5px solid #2ba0db;
 display: none;
 position: absolute;
 width: 250px;
}

nav ul li ul li {
 border-top: 1px solid #444;
 display: block;
}

nav ul li ul li:first-child { border-top: none; }

nav ul li ul li a {
 background: #373737;
 display: block;
 padding: 10px 14px;
}

nav ul li ul li a:hover { background: #126d9b; }

nav .fa.fa-angle-down { margin-left: 6px; }
.header {
	border: 1px solid #ddd;
	height:65px;

}
.image {
	width: 448px;
	border: 1px solid #ddd;
}
.jkl {
}

</style>
</head>

<body>
<?php
$servername = "localhost";
$username = "root";
$password = "";
$database = "menudb";
//connect to the database
$con = new mysqli($servername, $username, $password, $database);
if($con->connect_error){
die("connection failed<br/>");
}
echo'<nav>';
echo '<div class="container">';
echo'<ul>';
$sql="SELECT * FROM categories WHERE parent_id = 0";
$result = $con->query($sql); 
while($row = $result->fetch_assoc()){
$cat_id=$row['cat_id'];
$cat_name=$row['cat_name'];
echo "<li><a href='index.php?filter=$cat_id'>".$row['cat_name']."</a>";
echo "<ul>";
$sql1="SELECT * FROM categories WHERE parent_id=$cat_id and cat_id<>0";
$result1 = $con->query($sql1); 
while($row = $result1->fetch_assoc()){ 
$sub_cat_id=$row['cat_id'];
$sub_cat_name=$row['cat_name'];
echo "<li><a href='index.php?filter=$sub_cat_id'>".$row['cat_name']."</a></li>";
}
echo "</ul>";
echo "</li>";
}
echo' </div>';
echo'</nav> ';
?>
<script src="jquery-1.12.4.min.js"></script> 
<script>
$('nav li').hover(
 function() {
	 $('ul', this).stop().slideDown(200);
 },
	function() {
  $('ul', this).stop().slideUp(200);
 }
);
</script>
</body>
</html>


ARTICLE POSTED BY : Admin

Hi, I'am k.g uththara. I'm a professional web developer. I write blog posts in my free time. if you want to contact me, send a message on contact page, thanks.