README

这是来自 Twitter 的 Bootstrap 3 的另一个大菜单。

轻量级纯 CSS 大菜单，使用 Bootstrap 3 的标准导航栏标记和流体网格系统类。适用于固定和响应式布局，并可以包含（几乎）任何 Bootstrap 元素。

演示

使用 npm 安装

npm install @geedmo/yamm3 --save

使用 bower 安装

bower install yamm3 --save

通过 composer 安装

{
    "require": {
        "geedmo/yamm3": "dev-master"
    }
}

标记

重用导航栏标记，并在顶部添加类 .yamm。
然后，将您的标记添加到 .dropdown-menu 中。
可选地使用 .yamm-content 包裹内容并添加填充。

示例

<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 到 .dropdown 以扩展全宽。Yamm 与全宽菜单配合得更好。

示例

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

JavaScript

如果需要，此代码将防止在使用某些组件（如手风琴、表单等）时意外关闭菜单。

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

AngularJS

请查看 hjzheng/angular-mega-menu

错误和功能请求

请首先阅读问题指南并搜索现有和已关闭的问题。如果您的错误或想法尚未得到解决，请创建一个新的问题。

编译

在仓库文件夹中运行以下命令

npm install
gulp

编译带演示的 yamm

gulp demo

许可证

MIT 许可 - 详细信息在此

geedmo / yamm3

维护者

详情