帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

本栏目分享一些实用的网页图片特效、网页导航特效、网页菜单特效、网页文字特效等js、jquery、css网页特效。

当前位置:首页 > 资源 > 网页特效 > 正文

bootstrap响应式多级下拉菜单导航插件

帝国模板之家 2020-11-07 网页特效 评论

这是一款轻量级的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 &raquo </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 &raquo </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 &raquo </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;
  }
}

会员登陆后即可下载资源文件。更多好用网站特效插件,请关注帝国模板之家。

就像朝日会耀眼一样,有一颗明亮的心,一样会照亮人生。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

帝国手册

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言