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

Posted 2021-05-01

我有一个像下面的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">
";
} else {
    $menu_html.="
<li class="dropdown">";
    $menu_html.="<ul class="dropdown-menu">
";
}

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

但我没有得到所需的输出。我该怎么办 ？

有人解决这个问题吗？

答案

我部分得到了答案。

我修改了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">
";
} else {
    $menu_html.="
<li class="dropdown">";
    //$menu_html.="<ul class="dropdown-menu">
";
}
$cnt1 = 0;
while($row=mysql_fetch_array($result)){
    $cnt1 += 1;
    if($cnt1 === 1){
        $menu_html.="
<li class="active"><a href="{$row['link']}">{$row['label']}</a>";
    }  else {
        $menu_html.="
<li><a href="{$row['link']}">{$row['label']}</a>";
    }

    render_menu($row['id']);
    //$menu_html.="</ul>";
    $menu_html.="</li>";       
}
//$menu_html.="
</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.="
</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">
";
} else {
    $menu_html.="
<li class="dropdown">";
}

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

最后获得了所需的输出。 BUT THIS IS FOR 2ND LEVEL DROPDOWN NOT FOR MULTILEVEL

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

Partial Edit

我找到了一个代码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>

但仍然在搜索，如果我可以设置活动父母也...