[英]Navbar button collapse to sidebar
Is there a way to implement a side bar on the collapse button on the navbar?有没有办法在导航栏的折叠按钮上实现侧边栏?
When I reduce the screen, I get the collapse button on the navbar with all the buttons on it.当我缩小屏幕时,我会在导航栏上看到折叠按钮,上面有所有按钮。
When I click on that collapse button it expands the navbar and shows the buttons.当我单击该折叠按钮时,它会展开导航栏并显示按钮。 Is there a way that instead of this expand button, it shows a side bar on the right or wrong side occupying the entire screen and showing the nav buttons?
有没有一种方法可以代替这个展开按钮,而是在右侧或右侧显示一个侧栏,占据整个屏幕并显示导航按钮?
<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>
Add below css in your file在您的文件中添加以下 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;}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.