BootStrapで実装できるMegamenuメガメニューのサンプルです。
jQueryのプラグイン要らずでBootstrapのファイルのみで実装できます。
レスポンシブデザインにも対応しており、もちろんスマホでも見やすいです。
BootStrapなのでカスタマイズも簡単です。
動作サンプル
詳しくは以下をご確認下さい。
PCを想定した画面です。メニューをクリックすると。。。
このようにメガメニューが展開されます。
スマホを想定した画面です。メニューをクリックすると。。。
レスポンシブデザインなので、スマホでもこのようにメガメニューが展開されます。
ソースコードはこちらです。
CSS
<style type="text/css"> .navbar-nav>li>.dropdown-menu { margin-top: 20px; border-top-left-radius: 4px; border-top-right-radius: 4px; } .navbar-default .navbar-nav>li>a { width: 200px; font-weight: bold; } .mega-dropdown { position: static !important; width: 100%; } .mega-dropdown-menu { padding: 20px 0px; width: 100%; box-shadow: none; -webkit-box-shadow: none; } .mega-dropdown-menu:before { content: ""; border-bottom: 15px solid #fff; border-right: 17px solid transparent; border-left: 17px solid transparent; position: absolute; top: -15px; left: 285px; z-index: 10; } .mega-dropdown-menu:after { content: ""; border-bottom: 17px solid #ccc; border-right: 19px solid transparent; border-left: 19px solid transparent; position: absolute; top: -17px; left: 283px; z-index: 8; } .mega-dropdown-menu > li > ul { padding: 0; margin: 0; } .mega-dropdown-menu > li > ul > li { list-style: none; } .mega-dropdown-menu > li > ul > li > a { display: block; padding: 3px 20px; clear: both; font-weight: normal; line-height: 1.428571429; color: #999; white-space: normal; } .mega-dropdown-menu > li ul > li > a:hover, .mega-dropdown-menu > li ul > li > a:focus { text-decoration: none; color: #444; background-color: #f5f5f5; } .mega-dropdown-menu .dropdown-header { color: #428bca; font-size: 18px; font-weight: bold; } </style>
JavaScript
<script> jQuery(document).on('click', '.mega-dropdown', function(e) { e.stopPropagation() }) </script>
HTML
<div class="container"> <nav class="navbar navbar-default"> <div class="navbar-header"> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">MegaMenuSample</a> </div> <div class="collapse navbar-collapse js-navbar-collapse"> <ul class="nav navbar-nav"> <li class="dropdown mega-dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">メニューを開く <span class="glyphicon glyphicon-chevron-down pull-right"></span> </a> <ul class="dropdown-menu mega-dropdown-menu row"> <li class="col-sm-3"> <ul> <li class="dropdown-header">メニューA</li> <li> <a href="#">メニューA1</a> </li> <li> <a href="#">メニューA2</a> </li> <li> <a href="#">メニューA3</a> </li> <li> <a href="#">メニューA4</a> </li> <li> <a href="#">メニューA5</a> </li> <li> <a href="#">メニューA6</a> </li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">メニューB</li> <li> <a href="#">メニューB1</a> </li> <li> <a href="#">メニューB2</a> </li> <li> <a href="#">メニューB3</a> </li> <li> <a href="#">メニューB4</a> </li> <li> <a href="#">メニューB5</a> </li> <li> <a href="#">メニューB6</a> </li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">メニューC</li> <li> <a href="#">メニューC1</a> </li> <li> <a href="#">メニューC2</a> </li> <li> <a href="#">メニューC3</a> </li> <li> <a href="#">メニューC4</a> </li> <li> <a href="#">メニューC5</a> </li> <li> <a href="#">メニューC6</a> </li> </ul> </li> <li class="col-sm-3"> <ul> <li class="dropdown-header">メニューD</li> <li> <a href="#">メニューD1</a> </li> <li> <a href="#">メニューD2</a> </li> <li> <a href="#">メニューD3</a> </li> <li> <a href="#">メニューD4</a> </li> <li> <a href="#">メニューD5</a> </li> <li> <a href="#">メニューD6</a> </li> </ul> </li> </ul> </li> </ul> </div> </nav> </div>