Bootstrap 中的子菜单下拉布局
Posted
技术标签:
【中文标题】Bootstrap 中的子菜单下拉布局【英文标题】：Submenu dropdown layout in Bootstrap 【发布时间】：2019-11-22 05:45:26 【问题描述】：我刚开始使用 Bootstrap，而 JS 不是我最擅长的语言，所以我正在努力实现我正在寻找的东西。
我有一个使用 php 生成的网站的菜单，如下所示：
<?php
$products_menu = '';
$sql1 = "SELECT * FROM headings";
$stmt1 = DB::run($sql1);
while($row = $stmt1->fetch(PDO::FETCH_ASSOC))
$heading_id = $row['id'];
$heading = $row['heading'];
$products_menu .= '<li class="dropdown-item d-block">';
$products_menu .= '<a class="submenu-item" href="store#'.$heading_id.'">'.$heading.'</a>';
$products_menu .= '<ul class="dropdown-submenu">';
$params = [$heading_id];
$sql = "SELECT categories.category,categories.url FROM categories INNER JOIN category_headings on categories.id=category_headings.category WHERE category_headings.heading=?";
$stmt = DB::run($sql,$params);
while($row = $stmt->fetch(PDO::FETCH_ASSOC))
$category = $row['category'];
$url = $row['url'];
$products_menu .= '<li class="d-block"><a href="category/'.$url.'">'.$category.'</a></li>';
$products_menu .= '</ul>';
$products_menu .= '</li>';
?>
<nav class="navbar navbar-expand-lg">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<img src="media/icons/menu.png" class="icon">
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item text-center"><a class="nav-link nav" href="">Home</a></li>
<li class="nav-item text-center dropdown">
<a class="nav-link nav dropdown-toggle" href="#" data-toggle="dropdown" aria-expanded="false">Products</a>
<ul class="dropdown-menu">
<?php echo $products_menu; ?>
</ul>
</li>
<li class="nav-item text-center"><a class="nav-link nav" href="blog">Blog</a></li>
<li class="nav-item text-center"><a class="nav-link nav" href="about">About</a></li>
<li class="nav-item text-center"><a class="nav-link nav" href="contact">Contact</a></li>
</ul>
</div>
</nav>
我希望第一个下拉菜单位于父标题之外。
那么第一个下拉列表中的每个项目也应该是可点击的，以将您带到商店页面上的那个标题。
悬停在第一个下拉菜单项上应将其子菜单显示在一边。
编辑
我不想发布生成的整个 html，因为它太大了，所以我剪掉了前几个标题的示例，并且只是每个标题的前几个类别
<div class="page-header header-bottom">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-5 col-sm-5 col-xs-5">
<a href="/"><img src="media/logo.png" class="logo"></a>
</div>
<div class="col-lg-4 col-md-5 col-sm-5 col-xs-5">
<form class="form-inline search">
<div class="input-group">
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
<div class="input-group-append">
<button class="btn btn-default bg-orange" type="submit">
<img src="media/icons/search.png" class="icon">
</button>
</div>
</div>
</form>
</div>
<div class="col-lg-4 col-md-2 col-sm-2 col-xs-2">
<nav class="navbar navbar-expand-lg">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<img src="media/icons/menu.png" class="icon">
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item text-center"><a class="nav-link nav" href="">Home</a></li>
<li class="nav-item text-center dropdown">
<a class="nav-link nav dropdown-toggle" href="#" data-toggle="dropdown" aria-expanded="false">Products</a>
<ul class="dropdown-menu">
<li class="dropdown-item d-block">
<a class="submenu-item" href="store#1">Lifters & Accessories</a>
<ul class="dropdown-submenu">
<li class="d-block"><a href="category/Hooks-Weld-On-Hooks">Hooks - Weld On Hooks</a></li>
<li class="d-block"><a href="category/Manhole-Cover-Lifters">Manhole Cover Lifters</a></li>
<li class="d-block"><a href="category/Salt-Spreaders">Salt Spreaders</a></li>
<li class="d-block"><a href="category/ID-Tags">ID Tags</a></li>
</ul>
</li>
<li class="dropdown-item d-block">
<a class="submenu-item" href="store#2">Lifting & Measurement Attachments</a>
<ul class="dropdown-submenu">
<li class="d-block"><a href="category/Big-Bag-Lifters">Big Bag Lifters</a></li>
<li class="d-block"><a href="category/Crane-Slung-Safety-Cages">Crane Slung Safety Cages</a></li>
<li class="d-block"><a href="category/Gas-Bottle-Handlers">Gas Bottle Handlers</a></li>
<li class="d-block"><a href="category/Weighers-Crane-Weighers">Weighers - Crane Weighers</a></li>
</ul>
</li>
<li class="dropdown-item d-block">
<a class="submenu-item" href="store#3">Forklift & Crane Attachments</a>
<ul class="dropdown-submenu">
<li class="d-block"><a href="category/Forklift-Magnetic-Sweepers">Forklift Magnetic Sweepers</a></li>
<li class="d-block"><a href="category/Wheelie-Bin-Tippers">Wheelie Bin Tippers</a></li>
<li class="d-block"><a href="category/Forklift-Safety-Cages">Forklift Safety Cages</a></li>
<li class="d-block"><a href="category/Fork-Extensions">Fork Extensions</a></li>
<li class="d-block"><a href="category/Forklift-Base-Emptying-Stillages">Forklift Base Emptying Stillages</a></li>
</ul>
</li>
<li class="dropdown-item d-block">
<a class="submenu-item" href="store#4">Forklift Hooks & Jibs</a>
<ul class="dropdown-submenu">
<li class="d-block"><a href="category/Forklift-Mounted-Hook-Fixed">Forklift Mounted Hook - Fixed</a></li>
<li class="d-block"><a href="category/Forklift-Mounted-Hook-Adjustable">Forklift Mounted Hook - Adjustable</a></li>
<li class="d-block"><a href="category/Crane-Spreader-Beams">Crane Spreader Beams</a></li>
<li class="d-block"><a href="category/Forklift-Jibs">Forklift Jibs</a></li>
</ul>
</li>
</ul>
</li>
<li class="nav-item text-center"><a class="nav-link nav" href="blog">Blog</a></li>
<li class="nav-item text-center"><a class="nav-link nav" href="page/About">About Us</a></li>
<li class="nav-item text-center"><a class="nav-link nav" href="contact">Contact Us</a></li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</div>
【问题讨论】：
请发布完整的工作代码以及 CSS 和 JS。 @Alessio 这是我完整的nav.php 文件，我的标题只有<?php include_once("components/nav.php"); ?>，我的风格只是几种颜色，因为我尝试的定位方式都没有按预期工作
好的，但重要的是要知道你正在使用哪些资产（CSS、JS），你正在使用哪个框架版本（Bootstrap 3 或 Bootstrap 4），...否则无法为你提供帮助。
@Alessio 问题被标记为 bootstrap4？
也许您应该发布生成的 HTML（不是 PHP）和 CSS。在一个 sn-p 中。
【参考方案1】：
据我了解，您正在寻找嵌套的子菜单。如果，是，下面是相同的解决方案。
.dropdown-submenu
position: relative;
.dropdown-submenu:hover>.dropdown-menu
top: 0;
left: -10rem;
/* 10rem is the min-width of dropdown-menu */
margin-top: -6px;
display:block
.dropdown:hover>.dropdown-menu
display:block
/* rotate caret on hover */
.dropdown-menu>li>a:hover:after
text-decoration: underline;
transform: rotate(-90deg);
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-light bg-light">
<a class="navbar-brand pb-2" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" href="#">Submenu wider text</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Submenu</a></li>
<li><a class="dropdown-item" href="#">Submenu0</a></li>
<li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" href="#">Submenu 1</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Subsubmenu1</a></li>
<li><a class="dropdown-item" href="#">Subsubmenu1</a></li>
</ul>
</li>
<li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" href="#">Submenu 2</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Subsubmenu2</a></li>
<li><a class="dropdown-item" href="#">Subsubmenu2</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</nav>
</body>
</html>【讨论】：
【参考方案2】：我已将它与 Bootstrap 4 和一些自定义 CSS 放在一起：
.navbar-nav a
color: #fff !important;
.navbar-nav a:hover
color: #ddd !important;
.navbar-nav .submenu.level-2
padding-left: 1.5rem;
.navbar-nav .dropdown-toggle::after
display: none;
@media (min-width: 768px)
.navbar-nav .dropdown .submenu
position: absolute;
top: 100%;
display: none;
.navbar-nav .dropdown .submenu li
display: block;
.navbar-nav .dropdown .submenu li a
display: block;
white-space: nowrap;
text-decoration: none;
.navbar-nav .dropdown .submenu.level-1
right: 0;
left: auto;
.navbar-nav .dropdown .submenu.level-2
padding-left: 0;
top: 0;
right: 100%;
left: auto;
.navbar-nav .dropdown:hover .submenu.level-1
display: block;
.navbar-nav .dropdown:hover .submenu.level-1 li
position: relative;
.navbar-nav .dropdown:hover .submenu.level-1 li:hover .submenu.level-2
display: block;
.navbar-nav .dropdown-toggle::after
display: inline-block;
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Career</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#">Info</a>
<ul class="list-unstyled bg-dark text-light submenu level-1">
<li><a class="nav-link" href="#">About</a>
<ul class="list-unstyled bg-dark text-light submenu level-2">
<li><a class="nav-link" href="#">Mission</a></li>
<li><a class="nav-link" href="#">Vision</a></li>
</ul>
</li>
<li><a class="nav-link" href="#">Clients</a></li>
<li><a class="nav-link" href="#">Contact Us</a></li>
</ul>
</li>
</ul>
</div>
</nav>这是一个 jsFiddle，它使用 SCSS 而不是纯 CSS。
我不知道它与您正在寻找的结果有多接近，但我希望它有所帮助。
【讨论】：
以上是关于Bootstrap 中的子菜单下拉布局的主要内容，如果未能解决你的问题，请参考以下文章
爬虫训练场基础铺垫，BT加载器，分页，列表组，卡片，下拉菜单一文掌握