how to create Dynamic menu in php and mysql

Question

<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="nav-item">
<a class="nav-link" href="index.php">Home</a>
</li>
<li class='dropdown'>
<a href="category.php" class='dropdown-toggle' data-toggle='dropdown'> 
<span class='label label-pill count'></span>
<i class="glyphicon glyphicon-briefcase"></i>&nbsp;Category</a>
<ul class='dropdown-menu' id="category">
<?php echo display_category($link);?>
</ul>
</li>
<li>
<a href="contact.php">
<i class="glyphicon glyphicon-user">
</i>&nbsp;Contact Us</a>
</li></ul></div> 
<?php
function display_category($link)  
 { 
$output = '';
$query = "SELECT * FROM category"; 
$res = mysqli_query($link, $query);
while($row = mysqli_fetch_array($res))
{ 
$output .= '<option value="'.$row["c_id"].'">'.$row["c_name"].'</option>';  
  }      
return $output;
}
?>

I have created a menu in php where category is one of those options but i want such that when i click on category related products should get open from database. If somebody have idea please share.

You must learn Ajax, you can learn a simple jQuery ajax here — Rendi Wahyudi Muliawan
– Rendi Wahyudi Muliawan, Commented Mar 15, 2018 at 8:20
if I understand your question right, you want to have a dropdown menu? or do you want to know how to get content with php? — pictus
– pictus, Commented Mar 15, 2018 at 8:20
logic is understandable on this question's answer(s). If you can convert the logic. This is the possible solution/answer for you: See this . if it helps you out i'll put this as an answer :) — ARr0w
– ARr0w, Commented Mar 15, 2018 at 8:21

Smit Raval · Accepted Answer · 2018-03-15 10:39:28Z

1

You can try this. No need to do ajax.

<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="nav-item">
<a class="nav-link" href="index.php">Home</a>
</li>
<li class='dropdown'>
<a href="category.php" class='dropdown-toggle' data-toggle='dropdown'> 
<span class='label label-pill count'></span>
<i class="glyphicon glyphicon-briefcase"></i>&nbsp;Category</a>
<ul class='dropdown-menu' id="category">
<?php
$query = "SELECT * FROM category"; 
$res = mysqli_query($link, $query);
while($row = mysqli_fetch_array($res))
{ 
?>
<li><a href="#"><?php echo $row["c_name"] ?></a>
<ul>
<?php
$query1 = "SELECT * FROM product where category_id =".$row['cat_id']; 
$res1 = mysqli_query($link, $query1);
while($row1 = mysqli_fetch_array($res1))
{ 
?>
<li><a href="#"><?php echo $row1['product_name']; ?></a></li>
<?php
}
?>
</ul>
</li>';  
<?php 
} 
?>     
</ul>
</li>
<li>
<a href="contact.php">
<i class="glyphicon glyphicon-user">
</i>&nbsp;Contact Us</a>
</li></ul></div>

In your css hide the inner ul by default and on hover of outer ul > li > a just show the inner ul. By this you will be able to display related products to that category.

Edit

Use this in html

<ul id="nav">
  <?php
    $query = "SELECT * FROM category"; 
    $res = mysqli_query($link, $query);
    while($row = mysqli_fetch_array($res))
    { 
    ?>
    <li><a href="#"><?php echo $row["c_name"] ?></a>
    <ul>
    <?php
    $query1 = "SELECT * FROM product where category_id =".$row['cat_id']; 
    $res1 = mysqli_query($link, $query1);
    while($row1 = mysqli_fetch_array($res1))
    { 
    ?>
    <li><a href="#"><?php echo $row1['product_name']; ?></a></li>
    <?php
    }
    ?>
    </ul>
    </li>';  
    <?php 
    } 
    ?>     
    <li>
    <a href="contact.php">
    <i class="glyphicon glyphicon-user">
    </i>&nbsp;Contact Us</a>
    </li>
</ul>

In Css

* {
margin:0;
padding:0;
}
#nav {
list-style:none;
height:2em;
}
#nav li {
position:relative;
float:left;
width:192px;
background:#999;
text-align:center;
}
#nav li:hover {
background:#777;
}
#nav a {
display:block;
color:#000;
text-decoration:none;
line-height:2em;
}
/* --------- Drop Down -------- */
#nav ul {
position:absolute;
left:-999em;
top:2em;
list-style:none;
}
#nav li:hover ul {
left:0;
top:auto;
}

Here is a JSfiddle which you can refer.

https://jsfiddle.net/SmitRaval/5t0v5nq5/

Hope this helps.

edited Mar 15, 2018 at 10:39

answered Mar 15, 2018 at 9:54

Smit Raval

3,5161 gold badge12 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Manali Naik Over a year ago

Can u help me to list product as sub menu of category @smit_raval? Your code is useful

Manali Naik Over a year ago

Thank you so much i have got result but not as required.

Smit Raval Over a year ago

You need to update the css as per your theme. Please mark the answer as approved if it has solved your primary issue. :) @ManaliNaik

Collectives™ on Stack Overflow

how to create Dynamic menu in php and mysql

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related