Database driven multilevel dynamic menu

Question

I have a menu structure in HTML like below...

            <ul class="nav navbar-nav navbar-right">
                <li class="active"><a href="index.php">Home</a></li>
                <li><a href="about-us.php">About Us</a></li>
                <li><a href="services.php">Services</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Pages <i class="icon-angle-down"></i></a>
                    <ul class="dropdown-menu">
                        <li><a href="page1.php">Page1</a></li>
                        <li><a href="page2.php">Page2</a></li>
                        <li><a href="page3.php">Page3</a></li>
                    </ul>
                </li>
                <li><a href="blog.php">Blog</a></li> 
                <li><a href="contact-us.php">Contact</a></li>
            </ul>

I want to make it a database driven dynamic menu.

My MySQL database structure is like...

---------------------------------------------------------------
| id |        label      |         link           | parent id |
---------------------------------------------------------------
| 1  |  Home             |    index.php           |     0     |
| 2  |  About Us         |    about-us.php        |     0     |
| 3  |  Services         |    services.php        |     0     |
| 4  |  Page             |    #                   |     0     |
| 5  |  Page1            |    page1.php           |     4     |
| 6  |  Page2            |    page2.php           |     4     |
| 7  |  Page3            |    page3.php           |     4     |
| 8  |  Blog             |    blog.php            |     0     |
| 9  |  Contact Us       |    contact-us.php      |     0     |
---------------------------------------------------------------

I want the output like ...

---------------------------------------------------------
 HOME   ABOUT US   SERVICES   PAGES       BLOG   CONTACT 
---------------------------------------------------------
                            | PAGE 1     |
                            | PAGE 2     |
                            | PAGE 3     |
                             ------------

like this picture

I have tried ...

function render_menu($parent_id){
global $menu_html;
$result=mysql_query("SELECT * FROM clt_menu WHERE parent=$parent_id");
if (mysql_num_rows($result) == 0) {
    return;
}
if ($parent_id == 0) {
    $menu_html.="<ul class=\"nav navbar-nav navbar-right\">\r\n";
} else {
    $menu_html.="\r\n<li class=\"dropdown\">";
    $menu_html.="<ul class=\"dropdown-menu\">\r\n";
}

while($row=mysql_fetch_array($result)){
    $menu_html.="\r\n<li><a href=\"{$row['link']}\">{$row['label']}</a>";
    render_menu($row['id']);
    $menu_html.="</li>";
}
$menu_html.="\r\n</ul>";
return $menu_html;
}

But I am not getting the desired output. What should I do ?

Is there anybody to solve this ?

Answer 1

I partially got my answer.

I modified the php code...

from

$menu_html='';
function render_menu($parent_id){
    global $menu_html;
    $result=mysql_query("SELECT * FROM clt_menu WHERE parent=$parent_id ORDER BY sort ASC");
    if (mysql_num_rows($result) == 0) {
        return;
    }
if ($parent_id == 0) {
    $menu_html.="<ul class=\"nav navbar-nav navbar-right\">\r\n";
} else {
    $menu_html.="\r\n<li class=\"dropdown\">";
    //$menu_html.="<ul class=\"dropdown-menu\">\r\n";
}
$cnt1 = 0;
while($row=mysql_fetch_array($result)){
    $cnt1 += 1;
    if($cnt1 === 1){
        $menu_html.="\r\n<li class=\"active\"><a href=\"{$row['link']}\">{$row['label']}</a>";
    }  else {
        $menu_html.="\r\n<li><a href=\"{$row['link']}\">{$row['label']}</a>";
    }

    render_menu($row['id']);
    //$menu_html.="</ul>";
    $menu_html.="</li>";       
}
//$menu_html.="\r\n</ul>";
    $menu_html.= "<li class=\"login\" style=\"border-left: 1px solid; margin-left: 10px\">";
    $menu_html.= "<a href=\"admin/index.php\" target=\"_blank\" style=\"margin-left:10px;\"><i class=\"icon-lock\"></i></a>";
    $menu_html.= "</li>"; 
  $menu_html.="\r\n</ul>";
return $menu_html;
}

to

$menu_html='';
function render_menu($parent_id){
global $menu_html;
$result=mysql_query("SELECT * FROM clt_menu WHERE parent=$parent_id");
if (mysql_num_rows($result) == 0) {
    return;
}
if ($parent_id == 0) {
    $menu_html.="<ul class=\"nav navbar-nav navbar-right\">\r\n";
} else {
    $menu_html.="\r\n<li class=\"dropdown\">";
}

while($row=mysql_fetch_array($result)){
    if($row['link'] === '#'){
        $menu_html.="\r\n<li class=\"dropdown\">";
        $menu_html.="\r\n<a href=\"{$row['link']}\" class=\"dropdown-toggle\" data-toggle=\"dropdown\">{$row['label']} <i class=\"icon-angle-down\"></i></a>";
        $menu_html.="\r\n<ul class=\"dropdown-menu\">";
    }  else {
        $menu_html.="\r\n<li><a href=\"{$row['link']}\">{$row['label']}</a>";
    }
    render_menu($row['id']);
    $menu_html.="</li>";
}
$menu_html.="\r\n</ul>";
return $menu_html;
}

and finally got the desired output. BUT THIS IS FOR 2ND LEVEL DROPDOWN NOT FOR MULTILEVEL

But the problem is I cannot set <li class="active"> for active menu.

Partial Edit

I found a code here and added it in my page and got the partial output.

<script> $(function() { var loc = window.location.href; $('.nav li').each(function() { var link = $(this).find('a:first').attr('href'); if(loc.indexOf(link) >= 0) $(this).addClass('active'); }); }); </script>

But still in search if I could set active the parent also...