html - 导航项下方带有子菜单的全宽下拉菜单
问题描述
我想默认显示 Bootstrap Navbar 的子菜单。在每个导航项下方。
但我也想将子菜单背景缩放到浏览器窗口的整个宽度。
我尝试了多种解决方案,但找不到任何东西。
目前我尝试使用:before
设置背景,但这也不起作用。有什么解决办法吗?
到目前为止,这是我的代码:https ://codepen.io/cray_code/pen/QXNVLK
如您所见,全角下拉菜单有一个解决方案。但我想要它下面的项目是父菜单项而不是左侧。
这是全宽版本的 CSS。导航栏本身的 HTML 没有变化:
.navbar-full .dropdown-menu {
position: absolute !important;
left: 0 !important;
right: 0 !important;
}
.navbar-full .dropdown, .navbar-full .navbar-nav .nav-item.dropdown {
position: static !important;
}
解决方案
- 如果您知道导航栏菜单项,则可以使用媒体查询来执行此操作
@media only screen and (min-width: 768px)
。 - 您还可以使用引导类减少代码。申请
w-100
和dropdown-menu
其父母dropdown
应包括类position-static
- 更新:如果您无法控制菜单项,则可以使用 jQuery 来实现
$('a.nav-link').hover(function () {
if ($(window).width() >= 768) {
var myId = $(this).attr("id");
if ($("#" + myId).length > 0) {
var pos = Math.round($('#' + myId).position().left) + 12;
$("a.dropdown-item").css('paddingLeft', pos + 'px');
}
}
})
$('a.nav-link').hover(function() {
if ($(window).width() >= 768) {
var myId = $(this).attr("id");
if ($("#" + myId).length > 0) {
var pos = Math.round($('#' + myId).position().left) + 12;
$("a.dropdown-item").css('paddingLeft', pos + 'px');
}
}
})
li.dropdown:hover>.dropdown-menu {
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<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.0/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-full navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown position-static" id="parent">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown 1
</a>
<div class="dropdown-menu w-100" aria-labelledby="navbarDropdown">
<a class="dropdown-item mx-auto" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item dropdown position-static" id="parent1">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown 2
</a>
<div class="dropdown-menu w-100" aria-labelledby="navbarDropdown1">
<a class="dropdown-item mx-auto" href="#">Hello</a>
<a class="dropdown-item" href="#">New</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</body>
</html>
推荐阅读
- python - ValueError:没有文件类型的引擎:'xlsk'
- c++ - 为什么传统的 GetProcAddress 到 std::function 工作不简单
- tcp - 向多个 netcore 客户端应用程序广播消息的最佳方式是什么?
- android - 使用 Gradle 为 Android 构建包含另一个依赖项项目时出现“无法解析项目”错误
- java - 序列化Scala案例类并在Java中反序列化它们
- javascript - 使用函数参数破坏对象
- python - 如何使用 Django 解析图像 URL 并将其保存在 Cloudinary 中?
- r - 如何从R中的字符串中删除第N个字符?
- python - 在小纸牌游戏中调用对象属性时出现 TypeError
- c++ - 如何将 std::string 键值分配给 SecByteBlock