【Bootstrap v4】メガメニュー、多階層メニューを作る

2017.10.28|サイト構築

20191019…修正

Bootstrap v4 でのメガメニュー作成方法です。

Bootstrap v3 では見たのですが、 v4ではまだあまり検索しても出てこなかったので、お役に立てれば幸いです。

メガメニューついでに、多階層メニューも作っています。

Bootstrapでドロップダウンのメガメニューを作る

Bootstrap v4での標準では、ドロップダウンはありますが、メガメニューは作成方法が見当たらなかったので、色々と試行錯誤の結果、自分で作成してみました。

作り方によっては標準装備で色々作れるかもしれませんが…

ソース(CSS)
a.dropdown_multilayer_menu::after { 
 content: "\f0d7"; 
 font-family: "Font Awesome 5 Free"
 font-weight: 400; 
}
.mega-dropdown { 
position: static;
}
.dropdown-menu.mega-dropdown-menu.show { 
width: 100%;
}
.dropdown-submenu:hover .dropdown-submenu-menu {  
visibility: visible;
}
.dropdown-submenu-menu { 
position: absolute; 
left: 0; 
visibility: 
hidden;
}
p.card-text { 
word-wrap: break-word; 
white-space: pre-line; 
word-break: break-all;
}

※こちらで使用しているiconは[fontawesome]を使用しています。

fontawesome

https://fontawesome.com/

fontawesomeの::before ::afterでのアイコン設置方法は公式こちらにも記載があります。

CSS Pseudo-elements

https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements
ソース(HTML)
<nav class="navbar navbar-expand-lg navbar-light bg-light">

  <a class="navbar-brand" href="#">LOGO</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">ホーム <span class="sr-only">(カレント)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">メニュー</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">メニュー</a>
      </li>
            <!--ドロップダウンメニュー-->
    <li class="nav-item dropdown mega-dropdown">
        <a class="nav-link dropdown-toggle" href="http://example.com" id="DDL1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          ドロップダウンリンク
        </a>
        <div class="dropdown-menu mega-dropdown-menu" aria-labelledby="DDL1">
          <ul class="navbar-nav">
          <li class="nav-link dropdown-item"><a href="#">ドロップダウンリンク</a></li>
          <li class="nav-link dropdown-item"><a href="#">ドロップダウンリンク</a></li>
          <li class="nav-link dropdown-item"><a href="#">ドロップダウンリンク</a></li>

         <li class="nav-link dropdown-item dropdown-submenu">
      <a href="#">サブメニュー2</a>
      <div class="dropdown-submenu-menu container-fluid bg-light">
        <div class="row p-2">
           <div class="col-3">
          <div class="card">
            <div class="card-body">
           <h4 class="card-title">カードタイトル</h4>
           <h6 class="card-subtitle mb-2 text-muted">カードサブタイトル</h6>
           <p class="card-text">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、</p>
           <a href="#" class="card-link bg-light">カードリンク</a>
            </div>
          </div>
          </div>

           <div class="col-3">
          <div class="card">
            <div class="card-body">
           <h4 class="card-title">カードタイトル</h4>
           <h6 class="card-subtitle mb-2 text-muted">カードサブタイトル</h6>
           <p class="card-text">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、</p>
           <a href="#" class="card-link bg-light">カードリンク</a>
            </div>
          </div>
          </div>

           <div class="col-3">
          <div class="card">
            <div class="card-body">
           <h4 class="card-title">カードタイトル</h4>
           <h6 class="card-subtitle mb-2 text-muted">カードサブタイトル</h6>
           <p class="card-text">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、</p>
           <a href="#" class="card-link bg-light">カードリンク</a>
            </div>
          </div>
          </div>

           <div class="col-3">
          <div class="card">
            <div class="card-body">
           <h4 class="card-title">カードタイトル</h4>
           <h6 class="card-subtitle mb-2 text-muted">カードサブタイトル</h6>
           <p class="card-text">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、</p>
           <a href="#" class="card-link bg-light">カードリンク</a>
            </div>
          </div>
          </div>
     </div>
     </div>
    </li>
  </ul>
        </div>
      </li>
          </ul>
  </div>
</nav>
表示サンプル

ドロップダウンリンクの部分をposition: static;にすることによって、
第二階層部分の横幅をwidth: 100%;にできるようにしています。

ドロップダウンリンク部分は、Bootstrap v4標準のクラスを割り振っています。

それ以降はこちらでCSSを追記して、マウスオンで第三階層メニューを表示するようにしています。

Bootstrapで多階層ドロップダウンメニューを作る

ついでに、多階層ドロップダウンメニューも作成しました。

マウスオンで展開していきます。

ソース(CSS)
.navbar {
    position: relative;
    z-index: 9999;
} 
.dropdown_multilayer_menu_sub {
    position: absolute;
    width: 210px;
    background: #EEE; 
   visibility: hidden;
}
.dropdown_multilayer_menu_third_sub {
    position: absolute;
    top: 0;
    left: 210px;
    width: 100%;
    background: #CCC;
    visibility: hidden;
}
.dropdown_multilayer_menu_third::after {
    content: "\f0da";
    font-family: "Font Awesome 5 Free"
    font-weight: 400;  
    position: absolute;
    top: 8px;
    right: 5px;
}
.dropdown_multilayer_menu_third {
    position: relative;
}
.dropdown_multilayer_menu_third:hover 
.dropdown_multilayer_menu_third_sub {
    visibility: visible;
}
.dropdown_multilayer:hover 
.dropdown_multilayer_menu_sub {
    visibility: visible;
   }
ソース(HTML)
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">LOGO</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">ホーム <span class="sr-only">(カレント)</span></a>
      </li>

      <li class="nav-item dropdown_multilayer">
        <a class="nav-link dropdown_multilayer_menu" href="#">第一階層ドロップダウン</a>

 <ul class="nav flex-column dropdown_multilayer_menu_sub">
 <li class="nav-item dropdown_multilayer_menu_third">
 <a class="nav-link" href="#">第二階層ドロップダウン</a>
 <ul class="nav flex-column dropdown_multilayer_menu_third_sub">
 <li class="nav-item">
 <a class="nav-link" href="#">Link</a>
 </li>
 <li class="nav-item">
 <a class="nav-link" href="#">Link</a>
 </li>
 <li class="nav-item">
 <a class="nav-link" href="#">Link</a>
 </li>
 <li class="nav-item">
 <a class="nav-link" href="#">Link</a>
 </li>
 </ul>
 </li>

 <li class="nav-item">
 <a class="nav-link" href="#">第二階層メニュー</a>
 </li>
 <li class="nav-item">
 <a class="nav-link" href="#">第二階層メニュー</a>
 </li>
 <li class="nav-item">
 <a class="nav-link" href="#">第二階層メニュー</a>
 </li>
 </ul>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">メニュー2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">メニュー3</a>
      </li>
    </ul>
  </div>
</nav>
表示サンプル