Bootstrap 4 右侧折叠垂直菜单
Posted
技术标签:
【中文标题】Bootstrap 4 右侧折叠垂直菜单【英文标题】:Bootstrap 4 collapsing vertical menu on the right 【发布时间】:2018-10-20 02:07:25 【问题描述】:我正在尝试在右侧创建折叠垂直菜单,就像在这个网站上一样:http://presentation.creative-tim.com/
可以看源码:view-source:http://presentation.creative-tim.com/
这是我目前的网站状态:
我想要同样的效果。当我单击第三个图标(菜单图标)时,我想在右侧创建一个包含项目的菜单。 目前,它设置在默认折叠菜单上:
虽然我想变成这样:
我如何实现这个,这个效果的名称是什么?
这是我当前的代码: https://jsfiddle.net/prozik/n12o3vhz/
这里只是导航栏:
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light navbar-burger">
<div class="container-fluid">
<a class="navbar-brand" href="#">
</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 ml-auto">
<li class="nav-item active">
<a class="nav-link" href="index.html">
<i class="material-icons md-36">shopping_cart</i>
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="prakse.html">
<i class="material-icons md-36">search</i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="kontakt.html">
<i class="material-icons md-36">menu</i>
</a>
</li>
</ul>
</div>
</div>
</nav>
我正在使用 Bootstrap v4.1.0 和 jQuery 3.3.1
【问题讨论】:
【参考方案1】:这里有你需要做的一切:tympanus.net/codrops/2013/04/17/slide-and-push-menus
希望对你有帮助,
您好。
【讨论】:
以上是关于Bootstrap 4 右侧折叠垂直菜单的主要内容,如果未能解决你的问题,请参考以下文章
Bootstrap 3 Navbar 左侧和右侧导航栏项目的左侧折叠菜单