我刚开始使用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" alt="Lifting365 Menu" 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" alt="Logo" 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" alt="search icon" 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" alt="Menu" 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>
nav.php
文件,我的头部只有<?php include_once("components/nav.php"); ?>
,我的样式只有几个颜色,因为我尝试的所有定位方式都没有按照我的期望起作用。 - Paddy Hallihan