网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
这是一款轻量级的bootstrap多级下拉菜单导航插件,响应式的布局兼容移动端设备。
1.在菜单导航栏中嵌套创建一个多级下拉菜单,如下所示。
<!-- Required -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/cdn/bootstrap.min.js"></script>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Services</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"> Web Development » </a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="#"> Wordpress Website </a></li>
<li><a class="dropdown-item" href="#"> Website Design </a></li>
<li><a class="dropdown-item" href="#"> Open Source </a></li>
<li><a class="dropdown-item" href="#"> Custom CMS </a></li>
</ul>
</li>
<li><a class="dropdown-item" href="#"> Software Development » </a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="#"> Android App </a></li>
<li><a class="dropdown-item" href="#"> Windows Software </a></li>
</ul>
</li>
<li><a class="dropdown-item" href="#"> Designing » </a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href="#"> Web Designing </a></li>
<li><a class="dropdown-item" href="#"> UI Design </a></li>
<li><a class="dropdown-item" href="#"> Wireframing </a></li>
</ul>
</li>
<li><a class="dropdown-item" href="#"> SEO </a></li>
<li><a class="dropdown-item" href="#"> Management </a>
</ul>
</li>
2. 防止在下拉菜单时单击关闭的jQuery代码。
$(document).on('click', '.dropdown-menu', function (e) {
e.stopPropagation();
});
3. 在移动端上运行时,将多级下拉菜单转换为手风琴风格(本例中当屏幕宽度<992px)。
if ($(window).width() < 992) {
$('.dropdown-menu a').click(function(e){
if($(this).attr('href') == '#')
e.preventDefault();
if($(this).next('.submenu').length){
$(this).next('.submenu').toggle();
}
$('.dropdown').on('hide.bs.dropdown', function () {
$(this).find('.submenu').hide();
})
});
}
4. 多级下拉菜单所需的CSS样式。
@media (min-width: 992px){
.dropdown-menu .dropdown-toggle:after {
border-top: .3em solid transparent;
border-right: 0;
border-bottom: .3em solid transparent;
border-left: .3em solid;
}
.dropdown-menu .dropdown-menu{
margin-left:0; margin-right: 0;
}
.dropdown-menu li{
position: relative;
}
.nav-item .submenu{
display: none;
position: absolute;
left:100%; top:-7px;
}
.nav-item .submenu-left{
right:100%; left:auto;
}
.dropdown-menu > li:hover{ background-color: #f1f1f1 }
.dropdown-menu > li:hover > .submenu{
display: block;
}
}
转载请注明来源:bootstrap响应式多级下拉菜单导航插件
本文永久链接地址:https://www.moyouyouw.cn/code/666.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
已有 位小伙伴发表了看法
欢迎 你 发表评论