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="#">サブメニュー２</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="#">メニュー２</a> </li> <li class="nav-item"> <a class="nav-link" href="#">メニュー3</a> </li> </ul> </div> </nav>
表示サンプル
