我正在尝试创建一个Navbar Nested Dropdown （子菜单、多级和超级菜单），但我面临一些问题，例如灰烬大小调整 max-width & min-width and directions dropstart & dropend 基于页面viewport。
这是我的代码：
HTML
<nav id="navbar-area" class="navbar navbar-expand-lg navbar-light bg-light py-4">
<div class="container">
<a class="navbar-brand d-inline-flex align-items-center me-0 py-0" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" fill="currentColor" class="bi bi-bootstrap-fill" viewBox="0 0 16 16">
<path d="M6.375 7.125V4.658h1.78c.973 0 1.542.457 1.542 1.237 0 .802-.604 1.23-1.764 1.23H6.375zm0 3.762h1.898c1.184 0 1.81-.48 1.81-1.377 0-.885-.65-1.348-1.886-1.348H6.375v2.725z" />
<path
d="M4.002 0a4 4 0 0 0-4 4v8a4 4 0 0 0 4 4h8a4 4 0 0 0 4-4V4a4 4 0 0 0-4-4h-8zm1.06 12V3.545h3.399c1.587 0 2.543.809 2.543 2.11 0 .884-.65 1.675-1.483 1.816v.1c1.143.117 1.904.931 1.904 2.033 0 1.488-1.084 2.396-2.888 2.396H5.062z"
/>
</svg>
<span class="text-primary fw-bold ms-3">Bootstrap.</span>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mx-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Dropdown Item</a></li>
<li><a class="dropdown-item" href="#">Dropdown Item</a></li>
<li><hr class="dropdown-divider" /></li>
<li class="dropdown-submenu dropstart">
<a href="#" role="button" class="dropdown-item dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Level 1.0 (Left) Item</a>
<ul class="dropdown-menu dropdown-submenu">
<li><a href="#" class="dropdown-item">Dropdown Item</a></li>
<li><a href="#" class="dropdown-item">Dropdown Item</a></li>
<li><a href="#" class="dropdown-item">Dropdown Item</a></li>
<li><hr class="dropdown-divider" /></li>
<li class="dropdown-multilevel dropstart">
<a href="#" role="button" class="dropdown-item dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Level 2.2 (Left) Item</a>
<ul class="dropdown-menu dropdown-multilevel">
<li><a href="#" class="dropdown-item">Dropdown Item</a></li>
<li><a href="#" class="dropdown-item">Dropdown Item</a></li>
<li><a href="#" class="dropdown-item">Dropdown Item</a></li>
<li><hr class="dropdown-divider" /></li>
<li><a href="#" class="dropdown-item">Level 3.3 (Left) Item</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown-submenu dropend">
<a href="#" role="button" class="dropdown-item dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Level 1.0 (Right) Item</a>
<ul class="dropdown-menu dropdown-submenu">
<li><a href="#" class="dropdown-item">Dropdown Item</a></li>
<li><a href="#" class="dropdown-item">Dropdown Item</a></li>
<li><a href="#" class="dropdown-item">Dropdown Item</a></li>
<li><hr class="dropdown-divider" /></li>
<li class="dropdown-multilevel dropend">
<a href="#" role="button" class="dropdown-item dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Level 2.2 (Right) Item</a>
<ul class="dropdown-menu dropdown-multilevel">
<li><a href="#" class="dropdown-item">Dropdown Item</a></li>
<li><a href="#" class="dropdown-item">Dropdown Item</a></li>
<li><a href="#" class="dropdown-item">Dropdown Item</a></li>
<li><hr class="dropdown-divider" /></li>
<li><a href="#" class="dropdown-item">Level 3.3 (Right) Item</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown-megamenu dropend">
<a href="#" role="button" class="dropdown-item dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Mega Menu Item</a>
<div class="dropdown-menu dropdown-megamenu">
<div class="row row-cols-4 g-0">
<div class="col">
<ul class="list-unstyled">
<li><h6 class="dropdown-header">Dropdown Header</h6></li>
<li><hr class="dropdown-divider" /></li>
<li><a href="#" class="dropdown-item">Dropdown Item</a></li>
<li><a href="#" class="dropdown-item">Dropdown Item</a></li>
<li><a href="#" class="dropdown-item">Dropdown Item</a></li>
</ul>
</div>
<div class="col">
<ul class="list-unstyled">
<li><h6 class="dropdown-header">Dropdown Header</h6></li>
<li><hr class="dropdown-divider" /></li>
<li><a href="#" class="dropdown-item">Dropdown Item</a></li>
<li><a href="#" class="dropdown-item">Dropdown Item</a></li>
<li><a href="#" class="dropdown-item">Dropdown Item</a></li>
</ul>
</div>
<div class="col">
<ul class="list-unstyled">
<li><h6 class="dropdown-header">Dropdown Header</h6></li>
<li><hr class="dropdown-divider" /></li>
<li><a href="#" class="dropdown-item">Dropdown Item</a></li>
<li><a href="#" class="dropdown-item">Dropdown Item</a></li>
<li><a href="#" class="dropdown-item">Dropdown Item</a></li>
</ul>
</div>
<div class="col">
<ul class="list-unstyled">
<li><h6 class="dropdown-header">Dropdown Header</h6></li>
<li><hr class="dropdown-divider" /></li>
<li><a href="#" class="dropdown-item">Dropdown Item</a></li>
<li><a href="#" class="dropdown-item">Dropdown Item</a></li>
<li><a href="#" class="dropdown-item">Dropdown Item</a></li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</li>
<li class="nav-item dropdown has-megamenu">
<a href="#" role="button" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Mega Menu</a>
<div class="dropdown-menu dropdown-megamenu">
<div class="row row-cols-4 g-0">
<div class="col">
<ul class="list-unstyled">
<li><h6 class="dropdown-header">Dropdown Header</h6></li>
<li><hr class="dropdown-divider" /></li>
<li><a href="#" class="dropdown-item">Dropdown Item</a></li>
<li><a href="#" class="dropdown-item">Dropdown Item</a></li>
<li><a href="#" class="dropdown-item">Dropdown Item</a></li>
</ul>
</div>
<div class="col">
<ul class="list-unstyled">
<li><h6 class="dropdown-header">Dropdown Header</h6></li>
<li><hr class="dropdown-divider" /></li>
<li><a href="#" class="dropdown-item">Dropdown Item</a></li>
<li><a href="#" class="dropdown-item">Dropdown Item</a></li>
<li><a href="#" class="dropdown-item">Dropdown Item</a></li>
</ul>
</div>
<div class="col">
<ul class="list-unstyled">
<li><h6 class="dropdown-header">Dropdown Header</h6></li>
<li><hr class="dropdown-divider" /></li>
<li><a href="#" class="dropdown-item">Dropdown Item</a></li>
<li><a href="#" class="dropdown-item">Dropdown Item</a></li>
<li><a href="#" class="dropdown-item">Dropdown Item</a></li>
</ul>
</div>
<div class="col">
<ul class="list-unstyled">
<li><h6 class="dropdown-header">Dropdown Header</h6></li>
<li><hr class="dropdown-divider" /></li>
<li><a href="#" class="dropdown-item">Dropdown Item</a></li>
<li><a href="#" class="dropdown-item">Dropdown Item</a></li>
<li><a href="#" class="dropdown-item">Dropdown Item</a></li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>
CSS：
#navbar-area .navbar-collapse .navbar-nav .nav-item.dropdown .dropdown-menu {
min-width: 15rem;
margin-top: 0;
padding: 1rem 0;
border: none;
border-radius: 0;
box-shadow: 0px 20px 30px rgba(83, 88, 93, 0.05), 0px 0px 30px rgba(83, 88, 93, 0.1);
}
#navbar-area .navbar-collapse .navbar-nav .nav-item.dropdown .dropdown-menu:before {
content: "";
display: inline-block;
position: absolute;
top: -0.625rem;
left: 2.188rem;
margin-left: auto;
border-left: 10px solid transparent;
border-bottom: 10px solid #ffffff;
border-right: 10px solid transparent;
}
#navbar-area .navbar-collapse .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-header {
font-size: 1rem;
text-transform: capitalize;
color: #4361ee;
}
#navbar-area .navbar-collapse .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-item {
position: relative;
padding: 0.5rem 1rem;
text-transform: capitalize;
color: #202020;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
#navbar-area .navbar-collapse .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-submenu.dropstart .dropdown-menu {
top: 0;
left: auto;
right: 100%;
margin-top: 0;
margin-left: 0;
}
#navbar-area .navbar-collapse .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-submenu.dropstart .dropdown-menu:before {
content: none;
}
#navbar-area .navbar-collapse .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-submenu.dropstart.dropdown-submenu .dropdown-menu.dropdown-submenu,
#navbar-area .navbar-collapse .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-submenu.dropstart.dropdown-multilevel .dropdown-menu.dropdown-submenu {
border-top-right-radius: 0;
}
#navbar-area .navbar-collapse .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-submenu.dropstart.dropdown-submenu .dropdown-menu.dropdown-submenu {
border-bottom-left-radius: 0;
}
#navbar-area .navbar-collapse .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-submenu.dropend .dropdown-item.dropdown-toggle::before,
#navbar-area .navbar-collapse .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-megamenu.dropend .dropdown-item.dropdown-toggle::before {
border: none;
}
#navbar-area .navbar-collapse .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-submenu.dropend .dropdown-menu,
#navbar-area .navbar-collapse .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-megamenu.dropend .dropdown-menu {
top: 0;
left: 100%;
right: auto;
margin-top: 0;
margin-left: 0;
}
#navbar-area .navbar-collapse .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-submenu.dropend .dropdown-menu:before,
#navbar-area .navbar-collapse .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-megamenu.dropend .dropdown-menu:before {
content: none;
}
#navbar-area .navbar-collapse .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-submenu.dropend.dropdown-submenu .dropdown-menu.dropdown-submenu,
#navbar-area .navbar-collapse .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-submenu.dropend.dropdown-multilevel .dropdown-menu.dropdown-submenu {
border-top-left-radius: 0;
}
#navbar-area .navbar-collapse .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-submenu.dropend.dropdown-submenu .dropdown-menu.dropdown-submenu {
border-bottom-right-radius: 0;
}
#navbar-area .navbar-collapse .navbar-nav .nav-item.dropdown.has-megamenu {
position: static;
}
#navbar-area .navbar-collapse .navbar-nav .nav-item.dropdown.has-megamenu .dropdown-menu.dropdown-megamenu {
left: 0;
right: 0;
width: 100%;
}
@media screen and (min-width: 1299px) and (max-width: 1500px) {
#navbar-area .container {
max-width: 1330px;
}
}
@media screen and (min-width: 992px) {
#navbar-area .navbar-collapse .navbar-nav .nav-item.dropdown.has-megamenu .dropdown-menu.dropdown-megamenu {
max-width: 960px;
}
}
JS：
$(".dropdown-menu [data-bs-toggle='dropdown']").on("click", function (event) {
event.preventDefault();
event.stopPropagation();
$(this).parents(".dropdown-menu").first().find(".show").removeClass("show");
$(this).parents(".dropdown-menu").first().find("[aria-expanded='true']").attr("aria-expanded", false);
$(this).attr("aria-expanded", true);
$(this).siblings(".dropdown-menu").toggleClass("show");
$(this)
.parents(".nav-item.dropdown")
.on("hidden.bs.dropdown", function (e) {
$(".dropdown-submenu .show").removeClass("show");
$(".dropdown-submenu [aria-expanded='true']").attr("aria-expanded", false);
});
});
实例：
答案 0 :(得分：0)
我可以看到问题出在 Mega Menu 中，它位于桌面的最左侧。 我的简单解决方案将为此 更新这个
为了
（最小宽度：992px）
REST Client到这里
#navbar-area .navbar-collapse .navbar-nav .nav-item.dropdown.has-megamenu .dropdown-menu.dropdown-megamenu {
max-width: 960px;
}
您可以为更大的屏幕尺寸更新正确的定位。