带有子菜单的PHP Bootstrap 4导航菜单 [英] PHP Bootstrap 4 navigation menu with sub-menu's
本文介绍了带有子菜单的PHP Bootstrap 4导航菜单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
原始帖子
我想在PHP中使用Bootstrap 4创建导航菜单。问题是<$ c $之一c>< li> 是不对的（下拉中的那个，它不会成为下拉列表而只是正常 NAV-项目）。如果您想使用< ul> 和< li> 制作普通菜单，此代码可以正常工作bootstrap你需要在id 的名为< li> 上有一个 nav-item下拉列表 2 下拉。我该怎么做？
I want to create a navigation menu in PHP with Bootstrap 4. Problem is that one of the <li>'s is not right (the one from dropdown, it doesn't become a dropdown but just a normal nav-item). This code works alright if you want to make a normal menu with <ul> and <li> but with bootstrap you need to have a nav-item dropdown on the <li> of id 2 named Dropdown. How would I do this?
我希望这是足够的信息。
I hope this is enough information.
这是数组（）：
array (size=3)
0 =>
array (size=5)
0 =>
array (size=3)
'id' => string '1' (length=1)
'menu_naam' => string 'Home' (length=4)
'parent_id' => string '0' (length=1)
1 =>
array (size=3)
'id' => string '2' (length=1)
'menu_naam' => string 'Dropdown' (length=4)
'parent_id' => string '0' (length=1)
2 =>
array (size=3)
'id' => string '3' (length=1)
'menu_naam' => string 'Winkelwagen' (length=11)
'parent_id' => string '0' (length=1)
3 =>
array (size=3)
'id' => string '4' (length=1)
'menu_naam' => string 'Contact' (length=7)
'parent_id' => string '0' (length=1)
4 =>
array (size=3)
'id' => string '5' (length=1)
'menu_naam' => string 'Feedback' (length=8)
'parent_id' => string '0' (length=1)
2 =>
array (size=1)
0 =>
array (size=3)
'id' => string '6' (length=1)
'menu_naam' => string 'Sub Menu' (length=8)
'parent_id' => string '2' (length=1)
6 =>
array (size=1)
0 =>
array (size=3)
'id' => string '7' (length=1)
'menu_naam' => string 'Sub Sub Menu' (length=12)
'parent_id' => string '6' (length=1)
这是我用来构建菜单的PHP：
This is the PHP I use to build the menu:
<?php
function menu_builder() {
global $pdo;
$sql = $pdo->prepare("SELECT * FROM menus");
if ($sql->execute()) {
while ($row = $sql->fetch(PDO::FETCH_ASSOC)) {
$array[$row['parent_id']][] = $row;
}
loop_array($array);
}
}
function loop_array($array = array(), $parent_id = 0) {
if (!empty($array[$parent_id])) {
echo "<ul class=\"navbar-nav mr-auto\">";
foreach ($array[$parent_id] as $item) {
echo "<li class=\"nav-item\">";
echo "<a href=\"#\" class=\"nav-link\">" . $item['menu_naam'] . "</a>";
loop_array2($array, $item['id']);
echo "</li>";
}
echo "</ul>";
}
}
function loop_array2($array = array(), $parent_id = 0) {
if (!empty($array[$parent_id])) {
echo "<li class=\"nav-item dropdown\">";
foreach ($array[$parent_id] as $item) {
echo "<a href=\"#\" class=\"nav-link dropdown-toggle\" id=\"navbarDropdown\" role=\"button\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">" . $item['menu_naam'] . "</a>";
loop_array3($array, $item['id']);
}
echo "</li>";
}
}
function loop_array3($array = array(), $parent_id = 0) {
if (!empty($array[$parent_id])) {
echo "<div class=\"dropdown-menu\" aria-labelledby=\"navbarDropdown\">";
foreach ($array[$parent_id] as $item) {
echo "<a class=\"dropdown-item\" href=\"#\">" . $item['menu_naam'] . "</a>";
}
echo "</div>";
}
}
我真的希望有人可以帮我这个，我在数据库中添加了一些内容，以便它知道它是一个下拉列表？我认为我的代码太大而且复杂，应该有一个更简单的方法，但我不知道如何。我想我需要另外一种方法。如果你只能帮助我朝着正确的方向前进，那也没关系。
I really hope someone can help me with this, should I add something to the database so it will know it's a dropdown? I think my code is too big and to complicated, there should be a easyer way but I don't know how. I think I need a whole other approach. If you could only help me in the right direction it would be fine too.
还有一些归功于制作子菜单教程的人（这里你也可以看到该菜单是使用< ul> 和< li> 构建的，并且完全符合它的需要，但是不适用于 bootstrap ）： https： //www.youtube.com/watch?v=Ol63V4R-TdI
Also some credit to the guy who made the sub menu tutorial (here you can also see how the menu is build with <ul> and <li> and does exactly what it needs to do, but not for bootstrap): https://www.youtube.com/watch?v=Ol63V4R-TdI
编辑：
我发现了这里有一种解决方案：动态菜单php bootstrap mysql
我现在拥有的是：
function drawMenu($pdo, $parent_id, $level = null) {
$sql = $pdo->prepare("SELECT * FROM menus where parent_id = $parent_id");
$sql->execute();
foreach ($sql->fetchAll() as $row) {
$sql = $pdo->prepare("SELECT count(*) FROM menus where parent_id = " . $row['id'] . "");
$sql->execute();
// The item is parent, so do recursion again
//var_dump($sql->fetchAll()[0][0]);
if($sql->fetchAll()[0][0] !== '0' && $level !== 0){
echo "<li class=\"nav-item dropdown\"><a href=\"" . $row['url'] . "\" class=\"nav-link dropdown-toggle\" id=\"navbarDropdownMenuLink\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">" . $row['menu_naam'] . "</a><div class=\"dropdown-menu\" aria-labelledby=\"navbarDropdownMenuLink\">\n";
drawMenu($pdo, $row[0], $level - 1);
echo "</div></li>\n";
}
else { // The item is a leaf or we reach the end level, i.e. base case, so do print the item label
echo "<li class=\"nav-item\"><a href=\"#\" class=\"nav-link\">" . $row['menu_naam'] . "</a></li>\n";
}
}
}
?>
<header class="navbar navbar-dark bg-dark fixed-top navbar-expand-sm">
<a class="navbar-brand" href="#">Webshop</a>
<button class="navbar-toggler" style="background: #000000" type="button" data-toggle="collapse" data-target="#navbar-header" aria-controls="navbar-header">
☰
</button>
<div class="navbar-collapse collapse show" id="navbar-header">
<ul class="navbar-nav mr-auto">
<?php
drawMenu($pdo, 0, null);
?>
</ul>
</div>
</header>
但现在的问题是它会打印多个
But the problem now is that it prints multiple
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
HTML现在看起来像这样：
The HTML looks like this now:
<div class="navbar-collapse collapse show" id="navbar-header">
<ul class="navbar-nav mr-auto">
<li class="nav-item"><a href="#" class="nav-link"><span class="fas fa-home"></span> Home</a></li>
<li class="nav-item dropdown"><a href="#" class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a><div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li class="nav-item dropdown"><a href="#" class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Sub Menu</a><div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li class="nav-item"><a href="#" class="nav-link">Sub-sub Menu</a></li>
</div></li>
</div></li>
<li class="nav-item"><a href="#" class="nav-link"><span class="fas fa-shopping-cart"> </span> Winkelwagen</a></li>
<li class="nav-item"><a href="#" class="nav-link">Contact</a></li>
<li class="nav-item"><a href="#" class="nav-link">Feedback</a></li>
</ul>
</div>
推荐答案
我添加了菜单到数据库并检查它是否为0或1.我已经删除了子子菜单，但如果我添加它，我会更新这篇文章。
I added menu to the database and check if it's 0 or 1. I have dropped the sub-sub menu's, but I will update this post if I add them.
function menu_builder($pdo, $parent_id) {
$sql = $pdo->prepare("SELECT * FROM menus");
if ($sql->execute()) {
while ($row = $sql->fetch(PDO::FETCH_ASSOC)) {
$array[$row['parent_id']][] = $row;
}
main_menu($array);
}
}
function main_menu ($array, $parent_id = 0) {
if (!empty($array[$parent_id])) {
foreach ($array[$parent_id] as $item) {
if ($item['menu'] == '0') {
echo " <li class=\"nav-item\">" . PHP_EOL;
echo " <a class=\"nav-link\" href=\"#\">" . $item['menu_naam'] . "</a>" . PHP_EOL;
main_menu($array, $item['id']);
echo " </li>" . PHP_EOL;
}
elseif ($item['menu'] == '1') {
echo " <li class=\"nav-item dropdown\"><a class=\"nav-link dropdown-toggle\" href=\"#\" id=\"navbarDropdown\" role=\"button\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">" . $item['menu_naam'] . "</a>" . PHP_EOL;
sub_menu($array, $item['id']);
echo " </li>" . PHP_EOL;
}
}
//echo "</div>" . PHP_EOL;
echo "</li>" . PHP_EOL;
}
}
function sub_menu ($array, $parent_id) {
if (!empty($array[$parent_id])) {
echo " <div class=\"dropdown-menu\" aria-labelledby=\"navbarDropdown\">" . PHP_EOL;
foreach ($array[$parent_id] as $item) {
echo " <a class=\"dropdown-item\" href=\"" . $item['url'] . "\">" . $item['menu_naam'] . "</a>" . PHP_EOL;
}
echo " </div>" . PHP_EOL;
}
}
?>
<header class="navbar navbar-dark bg-dark fixed-top navbar-expand-sm">
<a class="navbar-brand" href="#">Webshop</a>
<button class="navbar-toggler" style="background: #000000" type="button" data-toggle="collapse" data-target="#navbar-header" aria-controls="navbar-header">
☰
</button>
<div class="navbar-collapse collapse show" id="navbar-header">
<?php
echo "<ul class=\"navbar-nav mr-auto\">";
echo menu_builder($pdo, 0);
echo "</ul>" . PHP_EOL;
?>
</div>
</header>
编辑：要有子菜单，代码看起来像这样，你需要以下 css 。
EDIT: To have sub-menu's the code looks like this and you need the following css too.
function menu_builder($pdo, $parent_id) {
$sql = $pdo->prepare("SELECT * FROM menus");
if ($sql->execute()) {
while ($row = $sql->fetch(PDO::FETCH_ASSOC)) {
$array[$row['parent_id']][] = $row;
}
main_menu($array);
}
}
function main_menu ($array, $parent_id = 0) {
if (!empty($array[$parent_id])) {
foreach ($array[$parent_id] as $item) {
if ($item['menu'] == '0') {
echo " <li class=\"nav-item\">" . PHP_EOL;
echo " <a class=\"nav-link\" href=\"" . $item['url'] . "\">" . $item['menu_naam'] . "</a>" . PHP_EOL;
main_menu($array, $item['id']);
echo " </li>" . PHP_EOL;
}
elseif ($item['menu'] == '1') {
echo " <li class=\"nav-item dropdown\">". PHP_EOL;
echo " <a class=\"nav-link dropdown-toggle\" href=\"" . $item['url'] . "\" id=\"navbarDropdown\" role=\"button\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">" . $item['menu_naam'] . "</a>" . PHP_EOL;
sub_menu($array, $item['id']);
echo " </li>" . PHP_EOL;
}
}
}
}
function sub_menu ($array, $parent_id) {
if (!empty($array[$parent_id])) {
echo " <div class=\"dropdown-menu\" aria-labelledby=\"navbarDropdown\">" . PHP_EOL;
foreach ($array[$parent_id] as $item) {
if ($item['sub_menu'] == '0') {
echo " <a class=\"dropdown-item\" href=\"" . $item['url'] . "\">" . $item['menu_naam'] . "</a>" . PHP_EOL;
}
elseif ($item['sub_menu'] == '1') {
echo " <div class=\"dropdown-submenu\">" . PHP_EOL;
echo " <a class=\"dropdown-item dropdown-toggle\" href=\"" . $item['url'] . "\">" . $item['menu_naam'] . "</a>" . PHP_EOL;
sub_sub_menu($array, $item['id']);
echo " </div>" . PHP_EOL;
}
}
echo " </div>" . PHP_EOL;
}
}
function sub_sub_menu ($array, $parent_id) {
if (!empty($array[$parent_id])) {
echo " <div class=\"dropdown-menu\" aria-labelledby=\"navbarDropdown\">" . PHP_EOL;
foreach ($array[$parent_id] as $item) {
echo " <a class=\"dropdown-item\" href=\"" . $item['url'] . "\">" . $item['menu_naam'] . "</a>" . PHP_EOL;
}
}
echo " </div>" . PHP_EOL;
}
子菜单需要的CSS因为bootstrap没有支持默认情况下（ https://stackoverflow.com/a/45755948/2877035 ）：
The CSS you need for the sub-menu's because bootstrap doesn't have support for it by default (https://stackoverflow.com/a/45755948/2877035):
.dropdown-submenu {
position: relative;
}
.dropdown-submenu a::after {
transform: rotate(-90deg);
position: absolute;
right: 6px;
top: .8em;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-left: .1rem;
margin-right: .1rem;
}
和jQuery：
$('.dropdown-menu a.dropdown-toggle').on('click', function(e) {
if (!$(this).next().hasClass('show')) {
$(this).parents('.dropdown-menu').first().find('.show').removeClass("show");
}
var $subMenu = $(this).next(".dropdown-menu");
$subMenu.toggleClass('show');
$(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
$('.dropdown-submenu .show').removeClass("show");
});
return false;
});
这篇关于带有子菜单的PHP Bootstrap 4导航菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
