你的位置:首页 > 网页设计

[网页设计]基于Bootstrap3的轻量级大型导航菜单


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

在线预览    源码下载

 安装

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

bower install yamm3 --save               

 使用方法

 HTML结构

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

<nav role="navigation">  ...  <ul >    <li >      <a href="#" data-toggle="dropdown">Dropdown</a>      <ul >        <li>          <div >          <div >             ...        </li>      </ul>    </li>  </ul>  ...</nav>             
 全屏宽度

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

<nav role="navigation">...   <ul >    <li >       ...    </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()})