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>