Bootstrap-megamenu

簡単!BootStrap作るドロップダウン式メガメニュー(レスポンシブ対応)

BootStrapで実装できるMegamenuメガメニューのサンプルです。
jQueryのプラグイン要らずでBootstrapのファイルのみで実装できます。

レスポンシブデザインにも対応しており、もちろんスマホでも見やすいです。

BootStrapなのでカスタマイズも簡単です。

動作サンプル

詳しくは以下をご確認下さい。

⇒ライトプラン 詳細はこちら ライトプラン 詳細はこちら

⇒サンプルはこちら

メガメニューbootstrap1

PCを想定した画面です。メニューをクリックすると。。。

 

メガメニューbootstrap1

このようにメガメニューが展開されます。

 

メガメニューbootstrap1

スマホを想定した画面です。メニューをクリックすると。。。

 

メガメニューbootstrap1

レスポンシブデザインなので、スマホでもこのようにメガメニューが展開されます。

 

ソースコードはこちらです。

 

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>

人気記事ランキング

投稿者:

kishiken

企業務めのWEBデザイナーです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です