Bootstrap v4 navbarを利用してメガメニューを作る

2017.10.28|表示サンプル
メガメニューサンプル 多階層ドロップダウン

メガメニューサンプル

ドロップダウンのメガメニューです。
3階層まで。
メインメニューはクリックで、それ以降はマウスオンで階層が展開されていきます。

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> 
		   	

CSS

.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;
		       }
		   

多階層ドロップダウン

ドロップダウンのメガメニューです。
3階層まで。
メインメニューはクリックで、それ以降はマウスオンで階層が展開されていきます。

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>

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: fontawesome;
			     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; 
			     }