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

演示  website 下载

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

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