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>
