位置粘附子菜单不滚动
Position sticky with submenu not scrolling
我正在使用 bootstrap v-4 beta2,我想创建带有子菜单的置顶菜单。一切都在桌面上工作,但在移动设备上,当我单击打开子菜单时,我看不到整个子菜单,当我滚动整个网站而不是菜单时。我发现我必须用 li.dropdown 做点什么——当我添加绝对位置时,它变得有点乱,但我看到了菜单。但是我不能得到我应该做的。这是代码:
li.dropdown:hover>.dropdown-menu {
display: block;
}
li.dropdown {
position: static;
}
.multi-columns {
width: 100%;
}
<div class="nav-wrapper sticky-top">
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light text-uppercase">
<a class="navbar-brand" href="/"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Domov <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="blog.html">Blog</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="eshop.html">E-shop</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu multi-columns">
<div class="row">
<div class="col-md-3">
<h3 class="h5">Blog</h3>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
<div class="col-md-3">
<h3 class="h5">Blog 2</h3>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
<div class="col-md-3">
<h3 class="h5">Blog 3</h3>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
<div class="col-md-3">
<h3 class="h5">Blog 4</h3>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
</li>
</ul>
<form action="" class="form-inline">
<select class="select2 form-control" style="width: 100%;">
</select>
</form>
</div>
</nav>
<!-- /.nav -->
</div>
<!-- /.container -->
</div>
<!-- /.nav-wrapper -->
另外,在桌面上,当我将鼠标悬停在 "dropdown" 上时,它会显示,但当我将鼠标放在子菜单上时,它会消失。我应该移动带有 margin-top: -10px 或 smh 的子菜单吗?或者有什么解决办法吗?
编辑
主要是子菜单大于视口,然后我根本无法在上面滚动
如果您希望导航汉堡按钮在您滚动时在网站上 'stick',则需要将其固定。
编辑: 我忘记了子菜单,但是在启用移动模式的 chrome devtools 中,这工作正常。单击子菜单打开菜单,然后再次单击它,将其关闭。
li.dropdown:hover>.dropdown-menu {
display: block;
}
li.dropdown {
position: static;
}
.multi-columns {
width: 100%;
}
.body {
height: 1000px;
}
.nav-wrapper.sticky-top {
position: fixed;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="body">
<div class="container">
<div class="nav-wrapper sticky-top">
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light text-uppercase">
<a class="navbar-brand" href="/"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Domov <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="blog.html">Blog</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="eshop.html">E-shop</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu multi-columns">
<div class="row">
<div class="col-md-3">
<h3 class="h5">Blog</h3>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
<div class="col-md-3">
<h3 class="h5">Blog 2</h3>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
<div class="col-md-3">
<h3 class="h5">Blog 3</h3>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
<div class="col-md-3">
<h3 class="h5">Blog 4</h3>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
</li>
</ul>
<form action="" class="form-inline">
<select class="select2 form-control" style="width: 100%;">
</select>
</form>
</div>
</nav>
<!-- /.nav -->
</div>
<!-- /.container -->
</div>
<!-- /.nav-wrapper -->
</div>
</div>
请看以下解决方案:
https://jsfiddle.net/ard5rg6f/1/
我用了几行 jQuery 在菜单打开时将 class 添加到粘性 div。
$(document).ready(function() {
$('#navbarNav').on('shown.bs.collapse', function () {
$('.nav-wrapper.sticky-top').addClass('menu-opened');
});
$('#navbarNav').on('hidden.bs.collapse', function () {
$('.nav-wrapper.sticky-top').removeClass('menu-opened');
});
});
并删除了下拉菜单的绝对位置 属性 并添加了滚动到粘性 div。
.nav-wrapper.sticky-top {
position: fixed;
}
.nav-wrapper.sticky-top.menu-opened {
overflow: scroll;
height: 100vh;
}
.dropdown-menu {
display: block;
position: inherit;
}
如果您需要您的子菜单想要在内容中滚动,为此您需要指定 max-height
和 overflow: scroll;
。
您还需要在 dropdown-menu multi-columns
分区内将 col-md-3
更改为 col-lg-3
。
CSS
@media (max-width: 991px){
.multi-columns{
max-height: 300px;
overflow: auto;
}
}
演示代码段:
li.dropdown:hover>.dropdown-menu {
display: block;
}
li.dropdown {
position: static;
}
.multi-columns {
width: 100%;
}
@media (max-width: 991px){
.multi-columns{
max-height: 300px;
overflow: auto;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<div class="nav-wrapper sticky-top">
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light text-uppercase">
<a class="navbar-brand" href="/"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Domov <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="blog.html">Blog</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="eshop.html">E-shop</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu multi-columns">
<div class="row">
<div class="col-lg-3">
<h3 class="h5">Blog</h3>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
<div class="col-lg-3">
<h3 class="h5">Blog 2</h3>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
<div class="col-lg-3">
<h3 class="h5">Blog 3</h3>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
<div class="col-lg-3">
<h3 class="h5">Blog 4</h3>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
</li>
</ul>
<form action="" class="form-inline">
<select class="select2 form-control" style="width: 100%;">
</select>
</form>
</div>
</nav>
<!-- /.nav -->
</div>
<!-- /.container -->
</div>
<!-- /.nav-wrapper -->
希望这对您有所帮助。 Codepen demo link.
谢谢。
我正在使用 bootstrap v-4 beta2,我想创建带有子菜单的置顶菜单。一切都在桌面上工作,但在移动设备上,当我单击打开子菜单时,我看不到整个子菜单,当我滚动整个网站而不是菜单时。我发现我必须用 li.dropdown 做点什么——当我添加绝对位置时,它变得有点乱,但我看到了菜单。但是我不能得到我应该做的。这是代码:
li.dropdown:hover>.dropdown-menu {
display: block;
}
li.dropdown {
position: static;
}
.multi-columns {
width: 100%;
}
<div class="nav-wrapper sticky-top">
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light text-uppercase">
<a class="navbar-brand" href="/"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Domov <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="blog.html">Blog</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="eshop.html">E-shop</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu multi-columns">
<div class="row">
<div class="col-md-3">
<h3 class="h5">Blog</h3>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
<div class="col-md-3">
<h3 class="h5">Blog 2</h3>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
<div class="col-md-3">
<h3 class="h5">Blog 3</h3>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
<div class="col-md-3">
<h3 class="h5">Blog 4</h3>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
</li>
</ul>
<form action="" class="form-inline">
<select class="select2 form-control" style="width: 100%;">
</select>
</form>
</div>
</nav>
<!-- /.nav -->
</div>
<!-- /.container -->
</div>
<!-- /.nav-wrapper -->
另外,在桌面上,当我将鼠标悬停在 "dropdown" 上时,它会显示,但当我将鼠标放在子菜单上时,它会消失。我应该移动带有 margin-top: -10px 或 smh 的子菜单吗?或者有什么解决办法吗?
编辑
主要是子菜单大于视口,然后我根本无法在上面滚动
如果您希望导航汉堡按钮在您滚动时在网站上 'stick',则需要将其固定。
编辑: 我忘记了子菜单,但是在启用移动模式的 chrome devtools 中,这工作正常。单击子菜单打开菜单,然后再次单击它,将其关闭。
li.dropdown:hover>.dropdown-menu {
display: block;
}
li.dropdown {
position: static;
}
.multi-columns {
width: 100%;
}
.body {
height: 1000px;
}
.nav-wrapper.sticky-top {
position: fixed;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="body">
<div class="container">
<div class="nav-wrapper sticky-top">
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light text-uppercase">
<a class="navbar-brand" href="/"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Domov <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="blog.html">Blog</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="eshop.html">E-shop</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu multi-columns">
<div class="row">
<div class="col-md-3">
<h3 class="h5">Blog</h3>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
<div class="col-md-3">
<h3 class="h5">Blog 2</h3>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
<div class="col-md-3">
<h3 class="h5">Blog 3</h3>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
<div class="col-md-3">
<h3 class="h5">Blog 4</h3>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
</li>
</ul>
<form action="" class="form-inline">
<select class="select2 form-control" style="width: 100%;">
</select>
</form>
</div>
</nav>
<!-- /.nav -->
</div>
<!-- /.container -->
</div>
<!-- /.nav-wrapper -->
</div>
</div>
请看以下解决方案:
https://jsfiddle.net/ard5rg6f/1/
我用了几行 jQuery 在菜单打开时将 class 添加到粘性 div。
$(document).ready(function() {
$('#navbarNav').on('shown.bs.collapse', function () {
$('.nav-wrapper.sticky-top').addClass('menu-opened');
});
$('#navbarNav').on('hidden.bs.collapse', function () {
$('.nav-wrapper.sticky-top').removeClass('menu-opened');
});
});
并删除了下拉菜单的绝对位置 属性 并添加了滚动到粘性 div。
.nav-wrapper.sticky-top {
position: fixed;
}
.nav-wrapper.sticky-top.menu-opened {
overflow: scroll;
height: 100vh;
}
.dropdown-menu {
display: block;
position: inherit;
}
如果您需要您的子菜单想要在内容中滚动,为此您需要指定 max-height
和 overflow: scroll;
。
您还需要在 dropdown-menu multi-columns
分区内将 col-md-3
更改为 col-lg-3
。
CSS
@media (max-width: 991px){
.multi-columns{
max-height: 300px;
overflow: auto;
}
}
演示代码段:
li.dropdown:hover>.dropdown-menu {
display: block;
}
li.dropdown {
position: static;
}
.multi-columns {
width: 100%;
}
@media (max-width: 991px){
.multi-columns{
max-height: 300px;
overflow: auto;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<div class="nav-wrapper sticky-top">
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light text-uppercase">
<a class="navbar-brand" href="/"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Domov <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="blog.html">Blog</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="eshop.html">E-shop</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu multi-columns">
<div class="row">
<div class="col-lg-3">
<h3 class="h5">Blog</h3>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
<div class="col-lg-3">
<h3 class="h5">Blog 2</h3>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
<div class="col-lg-3">
<h3 class="h5">Blog 3</h3>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
<div class="col-lg-3">
<h3 class="h5">Blog 4</h3>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
</li>
</ul>
<form action="" class="form-inline">
<select class="select2 form-control" style="width: 100%;">
</select>
</form>
</div>
</nav>
<!-- /.nav -->
</div>
<!-- /.container -->
</div>
<!-- /.nav-wrapper -->
希望这对您有所帮助。 Codepen demo link. 谢谢。