CODEWITHSUNDEEP
phphtmlmysqli
Mat
Mat

Reputation: 6324

Dynamic Dropdown menu - PHP

First of all, I am new to mysqli and prepare statements so please let me know if you see any error. I have this static drop down menu : enter image description here

HTML code:

<ul class="menu sgray fade" id="menu">

<li><a href="#">Bike</a>
    <!-- start mega menu -->
    <div class="cols3">
        <div class="col1">
            <ol>
                <li><a href="#">bikes</a></li>
                <li><a href="#">wheels</a></li>
                <li><a href="#">helmets</a></li>
                <li><a href="#">components</a></li>
            </ol>
        </div>
        <div class="col1">
            <ol>
                <li><a href="#">pedals</a></li>
                <li><a href="#">GPS</a></li>
                <li><a href="#">pumps</a></li>
                <li><a href="#">bike storage</a></li>
            </ol>
        </div>
                <div class="col1">
            <ol>
                <li><a href="#">power meters</a></li>
                <li><a href="#">hydratation system</a></li>
                <li><a href="#">shoes</a></li>
                <li><a href="#">saddles</a></li>
            </ol>
        </div>
    </div>
    <!-- end mega menu -->
</li>

I want to make a dynamic dropdown menu. I managed to show the $categoryName and the $SubCategoryName with this function:

function showMenuCategory(){
$db = db_connect();
$query = "SELECT * FROM Category"; 
$stmt = $db->prepare($query);
$stmt->execute();
$stmt->bind_result($id,$categoryName,$description,$pic,$active);
while($stmt->fetch()) {
echo'<li><a href="#">'.$categoryName.'</a>
<!-- start mega menu -->
<div class="cols3">
<div class="col1">
<ol>';
$dba = db_connect();
$Subquery = "SELECT * FROM Subcategory WHERE CategoryId = '".$id."'"; 
$Substmt = $dba->prepare($Subquery);
$Substmt->execute();
$Substmt->bind_result($Subid,$CatId,$SubCategoryName,$SubDescription);
while($Substmt->fetch()) {
echo'
<li><a href="#">'.$SubCategoryName.'</a></li>';
            }
 echo'
  </ol>
</div>
   <!-- end mega menu -->
      </li>';
                 }
                  }

The only problem is that it returns all the subcategories on the the same <div class="col1">:

enter image description here

what I would like to obtain is count the subcategories and if the result is more than 4 return the other items in the second and third column.

UPDATE***: thanks to the answer below now the menu looks like this:

enter image description here

thanks!

Upvotes: 0

Views: 1261

Answers (2)

Maximus2012
Maximus2012

Reputation: 1819

Try this:

function showMenuCategory(){
    $db = db_connect();
    $query = "SELECT * FROM Category"; 
    $stmt = $db->prepare($query);
    $stmt->execute();
    $stmt->bind_result($id,$categoryName,$description,$pic,$active);
    echo '<div class="cols3">';
    while($stmt->fetch()) {
        echo'<li><a href="#">'.$categoryName.'</a>
        <!-- start mega menu -->
        <div class="col1">
        <ol>';
        $dba = db_connect();
        $Subquery = "SELECT * FROM Subcategory WHERE CategoryId = '".$id."'"; 
        $Substmt = $dba->prepare($Subquery);
        $Substmt->execute();
        $Substmt->bind_result($Subid,$CatId,$SubCategoryName,$SubDescription);
        while($Substmt->fetch()) {
            echo'<li><a href="#">'.$SubCategoryName.'</a></li>';
        }
        echo'</ol>';
    }
    echo '</div><!-- end mega menu --></li>';
}

Upvotes: 0

Kirk Backus
Kirk Backus

Reputation: 4866

How about try this?

To explain further

What is happening is that for every subcategory fetched, I increment a counter. If that counter hits 4, it ends the <UL> and <DIV> and creates a new one which will represent the new column.

function showMenuCategory(){
$db = db_connect();
$query = "SELECT * FROM Category"; 
$stmt = $db->prepare($query);
$stmt->execute();
$stmt->bind_result($id,$categoryName,$description,$pic,$active);
while($stmt->fetch()) {
echo'<li><a href="#">'.$categoryName.'</a>
<!-- start mega menu -->
<div class="cols3">
<div class="col1">
<ol>';
$dba = db_connect();
$Subquery = "SELECT * FROM Subcategory WHERE CategoryId = '".$id."'"; 
$Substmt = $dba->prepare($Subquery);
$Substmt->execute();
$Substmt->bind_result($Subid,$CatId,$SubCategoryName,$SubDescription);
$count = 0;
while($Substmt->fetch()) {
echo'
<li><a href="#">'.$SubCategoryName.'</a></li>';
$count+=1;
if ($count == 4) {
    $count = 0;
    echo '</ol></div><div class="col1"><ol>';
}
            }
 echo'
  </ol>
</div>
   <!-- end mega menu -->
  </li>';
             }
              }

EDIT: Misunderstood the purpose of col1. They all should be col1 and should work now. If not, leave me a comment!

Upvotes: 1

Related Questions