jQuery

【jQuery】Bootstrap3グリッドシステムメガメニュープラグインyamm3

September 19, 2015
yamm3

レスポンシブ対応でBootstrap3のグリッドシステムクラスを使用したメガメニュープラグイン。軽量なCSSと任意のブートストラップの要素を含めることができるみたいです。サンプルにはリスト、アコーディオン、テーブル、サムネイルなどがあります。

CSS

<link href="demo/components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="demo/components/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet">
<link href="yamm/yamm.css" rel="stylesheet">

JS

<script src="demo/components/jquery/dist/jquery.js"></script>
<script src="demo/components/bootstrap/dist/js/bootstrap.min.js"></script>

HTMLマークアップ

<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>

Width

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

インストール

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