Benjamin Ohene Bekoe
Benjamin Ohene Bekoe

Reputation: 11

Three level mega menu in PHP and MySQL

I have a parent child system. I am trying to create a three-level menu, but the first level menu keeps being repeated in all three levels.

Here is sample data of my database table

id category                          parent
1  level a one                           0
2  level b one                           0
3  level two 1 for a                     1 
4  level two 2 for a                     1
5  level three for level two 1 for  a    3

PHP code:

<?php
    include("core/functions.php");
?> 

<div id="magik-verticalmenu" class="block magik-verticalmenu">
    <div class="nav-title"> <span>Categories</span> </div>
        <div class="nav-content">
            <div class="navbar navbar-inverse">
                <div id="verticalmenu" class="verticalmenu" role="navigation">
<?php 
$sql = "SELECT * FROM category WHERE parent = 0";
$pquery = $con->query($sql);      
?>
                    <div class="navbar">
                        <div class="collapse navbar-collapse navbar-ex1-collapse">
                            <ul class="nav navbar-nav verticalmenu">
<?php 
while($parent = mysqli_fetch_assoc($pquery)):  
?>                
<?php 
    $parent_id = $parent['id'];
    $sql2 = "SELECT * FROM category WHERE parent = 'parent_id'";
    $cquery= $con->query($sql2); 
?>   
    <li class=" parent dropdown ">
        <a href="grid.html" class="dropdown-toggle" data-toggle="dropdown">
            <span class="menu-title">
<?php 
    echo $parent ['category'];
?>
            </span><b class="round-arrow"></b>
        </a>
        <div class="dropdown-menu">
            <div class="dropdown-menu-inner">
                <div class="row">
                    <div class="mega-col col-sm-66" data-widgets="wid-5" data-colwidth="6">
                        <div class="mega-col-inner">
                            <div class="ves-widget">
<?php 
    while($child = mysqli_fetch_assoc($cquery)):
?>
<?php 
        $parent_id = $parent['id'];
        $sql3 = "SELECT * FROM category WHERE parent = 'parent_id'";
        $squery= $con->query($sql3); 
?> 
                                <div class="menu-title">
<?php
        echo $child ['category'];
?>
                                </div>
<?php
    endwhile;
?>
                                <div class="widget-html">
                                    <div class="widget-inner">
                                        <ul>
<?php 
    while($child = mysqli_fetch_assoc($squery)):
?>     
                                            <li class="first">
                                                <a href="grid.html">
                                                    <span>
<?php
        echo $child ['category'];
?>
                                                    </span>
                                                </a>
                                            </li>
<?php
    endwhile;
?>            
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </li>
<?php
endwhile;
?>    
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

Upvotes: 1

Views: 3100

Answers (3)

Benjamin Ohene Bekoe
Benjamin Ohene Bekoe

Reputation: 11

<div class="col-md-12 col-sm-12"> <a class="logo" title="" href="index.html" style="margin-top:5px"><img alt="" src="images/logo.png"></a> </div>
          <div class="col-md-12 col-sm-12"><div class="-dropdown-wrapper">
            <a class="dropdown-trigger" href="#0">Categories</a>
            <nav class="dropdown">
                <h2>Title</h2>
                <a href="#0" class="close">Close</a>
             <?php 
//parent loop - menu1    
  $sql = "SELECT * FROM menu1";
  $pquery = $con->query($sql);    
      ?>       
       <ul class="dropdown-content"> 
     <?php 

 while($parent = mysqli_fetch_assoc($pquery)):  
       ?> 


      <?php //level 1 menu
    $cquery=$con->query("SELECT * FROM menu2 WHERE menu1_id=".$parent['id']);
      ?>

                    <li class="has-children">
                        <a href=""><?=$parent ['category'];
       ?></a>

                        <ul class="secondary-dropdown is-hidden" style=" background:url(<?=$parent ['background'];
       ?>); background-position:bottom right; background-repeat:no-repeat; background-color:#FFF">
              <?php  
        while($level1=$cquery->fetch_array()):?>          
                            <li class="go-back"><a href="#0">Menu</a></li>
                            <li class="see-all"><a href=""><?='See all'.' '.$parent ['category'];
       ?></a></li>
                            <li class="has-children">
                                <a href=""><?=$level1['category']; ?></a>
            <?php 
            //level 2 menu starts 
        $squery=$con->query("SELECT * FROM menu3 WHERE menu2_id=".$level1['id']);   

            ?>  
                                <ul class="is-hidden">
                                    <li class="go-back"><a href="#0">Clothing</a></li>
            <?php  
        while($level2=$squery->fetch_array()):?>                    
                                    <li class="">
                                        <a href="category.php?cat=<?=$level2['id']; ?>"><?=$level2['category']; ?></a>


                                    </li>
            <?php endwhile; ?>                      

                                </ul>
                            </li>
     <?php endwhile; ?>
                        </ul> <!-- -secondary-dropdown -->
                <?php endwhile; // parent endwhile ?>

men1 id category 1 footware 2 clothes

menu2 id menu1_id category 1 1 shoe 2 2 dress 3 2 pants

menu3

id menu1_id menu2_id category

1 1 1 laces shoe 3 3 2 buttons

need help in formatting the table pls.. but aside from that that is it... i also added background to the main menu category..

Upvotes: 0

Benjamin Ohene Bekoe
Benjamin Ohene Bekoe

Reputation: 11

yeah.. using just one table was hard for me to create the relationship... so i added another two more tables. one for each level and created relationships. it totally solved my problem. thanks anyway.. if any anyone mite be interested in the code.. i will glad to share.. justcomment

Upvotes: 0

Sergei
Sergei

Reputation: 111

You may make it with this solution:

function makeTree($data = [], $key = 'id', $parent_key = 'parent_id', $node_name = 'childs', $parent_code = 0) {

    $parent_ids = array_column($data, $parent_key);
    $result = [];
    foreach ($data as $k=>$v) {
        if($v[$parent_key] == $parent_code){
            $result[$v[$key]] = $v;
            if(in_array($v[$key], $parent_ids)){
                result[$v[$key]][$node_name] = makeTree($data, $key , $parent_key, $node_name, $v[$key]);
            } 
        }
    }
    return $result;
}

Example:

$data =[['id'=>1, 'parent_id'=>0,'name'=>'first'],
     ['id'=>2, 'parent_id'=>0,'name'=>'second'],
     ['id'=>3, 'parent_id'=>1,'name'=>'third'],
     ['id'=>4, 'parent_id'=>3,'name'=>'four'],
     ['id'=>5, 'parent_id'=>2,'name'=>'five'],
     ['id'=>7, 'parent_id'=>9,'name'=>'five'],
     ['id'=>8, 'parent_id'=>2,'name'=>'five'],
     ['id'=>9, 'parent_id'=>2,'name'=>'five'],
     ['id'=>10, 'parent_id'=>9,'name'=>'five'],
     ['id'=>6, 'parent_id'=>1,'name'=>'six']];

$result = makeTree($data, 'id', 'parent_id', 'sub', 0);

Run Example

Upvotes: 1

Related Questions