Bootstrapでメガメニューを作成する。

準備

yammを使用してメガメニューを作成していきます。
まずはgithubよりcssファイルををダウンロード。

・geedmo/yamm3

実装

1,ヘッダーでyamm.cssを読みこませる。

<link rel="stylesheet" type="text/css" href="css/yamm.css" media="all">

2,jsを読み込ませる。

<script type="text/javascript">
    $(document).on('click', '.yamm .dropdown-menu', function(e) {
                e.stopPropagation()
    })
</script>

3,メニュー作成

<nav class="navbar navbar-inverse navbar-fixed-top yamm" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand" href="/">サイト名</a>
        </div>
        <ul class="nav navbar-nav">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">メニュー1</a>
                <ul class="dropdown-menu">
                    <li>
                        <div class="yamm-content">
                            <div class="row">
                                'コンテンツ中身'
                            </div>
                        </div>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</nav>