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()}) |
