Blog » PHP » php mysql dynamic mega menu

php mysql dynamic mega menu

This tutorial will cover how to create mega menus.mega menus are very important for ecommerce websites.and you can see mega menus in almost all online shopping websites where they display the all their available category of products. therefor we have choose to create simple mega menu one using html css php languages. this is basic lesson but i think that's you can improve your knowledge.using this script.

Completed source code


<!DOCTYPE html>
<html lang="en">
<head>
<title>Mega Menu</title>
<link rel="stylesheet" href="css/style.css">
<style>
ul{
display:block;
float:left;
margin-top:2px;
position:relative;
padding-left:35px;
padding-top:15px;
}
li{
display: inline;
margin:0px ;
padding:0px;
}
.mega-menu{
background:#fcfcfc;border:1px solid #ddd;
border-radius:0 0 3px 3px;opacity:0;
position:absolute;
transition:all .3s ease .15s;
margin-top:12px;
visibility:hidden;
width:650px;
height:420px;
}
li:hover
.mega-menu{
opacity:1;
overflow:visible;
visibility:visible;
display: inline;
}
.list-group-item{
display:inline;
text-decoration:none;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 14px;
color: #372f2b;
text-transform: uppercase;
color:#372f2b;font-size:.95em;line-height:1.15;margin:1.25em 0 .75em;
}
.list-group-item2{
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 12px;
color:#0066CC;
text-decoration:none;
display:block;
}
.menu a{
text-decoration:none;
text-transform:uppercase;
}
.nav{
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
background:#0099CC;
padding:12px;
color:#330000;
}
.menu li a:hover {
color:#333333;
}
</style>
</head>
<body>
<li class="menu"><a class="nav" href="#">Sort by category</a>
<div class="mega-menu">
<?php
$con=mysqli_connect("localhost","root","","test");
$sql="select * from category where parent=0";
$result=mysqli_query($con,$sql);
while($row=mysqli_fetch_array($result))
{
echo "<ul>";
echo '<li><a href="category.php?filter='.$row['cid'].'" class="list-group-item">'.$row['name'].'</a></li>';
sql($row['cid']);
echo "</ul>";
}
function sql($id)
{
global $con;
$sql="select * from category where parent=$id";
$result=mysqli_query($con,$sql);
while($row=mysqli_fetch_array($result))
{
echo '<li><a href="category.php?filter='.$row['cid'].'" class="list-group-item2">'.$row['name'].'</a></li>';
sql($row['cid']);
}
}
?>
</div>
</li>
</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.