数据库驱动的多级动态菜单

Question

我有一个 HTML 中的菜单结构，如下所示...

            <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>

我想让它成为一个数据库驱动的动态菜单。

我的 MySQL 数据库结构是这样的……

---------------------------------------------------------------
| 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     |
---------------------------------------------------------------

我想要输出...

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

喜欢这个picture

我试过了……

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;
}

但我没有得到想要的输出。我该怎么办？

有没有人可以解决这个问题？

Answer 1

我得到了部分答案。

我修改了php代码...

来自

$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;
}

到

$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;
}

终于得到了想要的输出。 BUT THIS IS FOR 2ND LEVEL DROPDOWN NOT FOR MULTILEVEL

但问题是我无法为活动菜单设置<li class="active">。

部分编辑

我找到了一个代码here 并将其添加到我的页面中并得到了部分输出。

<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>

但如果我也可以将父级设置为活动状态，我仍在搜索中......