转载

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

本文版权属于jQuery之家，转载请注明出处：http://www.htmleaf.com/jQuery/Menu-Navigation/201509162579.html

正文到此结束

所属分类：编程技术

本文标签： jquery Document 安装 HTML 网站响应式代码 js Menu ip CSS http java Bootstrap src UI 插件
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

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

安装

使用方法

HTML结构

全屏宽度

CSS样式

Javascript

热门推荐

相关文章

说给你听

本文目录

随机标签

书籍教程

近期评论

网站信息

其他链接

关于本站

问题交流