是否可以在导航栏的折叠按钮上实现侧边栏?
缩小屏幕时,我会在导航栏中看到折叠按钮,上面有所有按钮。
当我单击该折叠按钮时,它将展开导航栏并显示按钮。有没有一种方法可以代替此展开按钮,而是在右侧或右侧显示侧边栏,从而占据整个屏幕并显示导航按钮?
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<a class="navbar-brand" href="#">Navbar</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">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
答案 0 :(得分:1)
在文件的CSS下方添加
@media only screen and (max-width: 767px) {
#collapsibleNavbar {position: fixed;top: 0;left: -100%;bottom: 0;display: block;max-width: 320px;width: calc(100% - 80px);min-height: 100%;z-index: 999;transition: all 0.3s ease;background: #000000;}
#collapsibleNavbar.show {left: 0;}
}