基于Bootstrap3的轻量级大型导航菜单

yamm3是一款基于Twitter Bootstrap3的轻量级大型导航菜单插件。该大型菜单使用Bootstrap3标准的导航菜单标签和流式网格系统来制作。它具有顶部固定和响应式等特点，适合用于制作复杂的网站导航菜单。

安装

可以通过bower来安装该Bootstrap3大型菜单插件。

bower install yamm3 --save               
              

使用方法

HTML结构

在标准的Bootstrap3导航菜单的<nav>标签的class中添加.yammclass。然后将你的菜单添加到ul.dropdown-menu中。你可以通过.yamm-content来使用带padding的包裹元素。例如：

<nav class="navbar yamm navbar-default " role="navigation">
    ...
    <ul class="nav navbar-nav">
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
            <ul class="dropdown-menu">
                <li>
                    <div class="yamm-content">
                    <div class="row"> 
                        ...
                </li>
            </ul>
        </li>
    </ul>
    ...
</nav>            
              

全屏宽度

默认情况下大型下拉菜单是根据内容的尺寸来设置大小，你可以为它添加.yamm-fw class来设置它为全屏宽度。

<nav class="navbar yamm navbar-default " role="navigation">
...
     <ul class="nav navbar-nav">
       <li class="dropdown yamm-fw">
             ...
       </li>
     </ul>
...
</nav>                
              

CSS样式

下面是该Bootstrap3大型导航菜单的必要CSS样式：

.yamm .nav,
.yamm .collapse,
.yamm .dropup,
.yamm .dropdown {
  position: static;
}
.yamm .container {
  position: relative;
}
.yamm .dropdown-menu {
  left: auto;
}
.yamm .yamm-content {
  padding: 20px 30px;
}
.yamm .dropdown.yamm-fw .dropdown-menu {
  left: 0;
  right: 0;
}                
              

Javascript

在使用一些手风琴元素和表单元素的时候，如果你不希望它们被折叠，可以使用下面的js代码。

$(document).on('click', '.yamm .dropdown-menu', function(e) {
   e.stopPropagation()
})