はじめに
ECサイトのヘッダーで親メニューをクリックしたときに小さいサブメニューを開くように実装をしたのでご紹介します。
小さいサブメニューの表示
メニュー2とメニュー4が親メニューになっています。
スマホで見たときは横幅の関係で、メニュー4とメニュー5は非表示になっています。
小さいサブメニューの仕様
スクロールすると非表示になる
開くのは1つのサブメニューのみ
サブメニュー以外の部分をクリックするとサブメニューは非表示になる
開くのは1つのサブメニューのみ
サブメニュー以外の部分をクリックするとサブメニューは非表示になる
小さいサブメニューのソースコード例
PR
<header class="header">
<div class="inner">
<nav class="header-menu">
<ul class="header-menu__list">
<li class="header-menu__item"><a href="#">メニュー1</a></li>
<li class="header-menu__item has-child">
<span>メニュー2</span>
<ul class="header-menu__list02">
<li class="header-menu__item02">
<a href="#">メニュー2-1</a>
</li>
<li class="header-menu__item02">
<a href="#">メニュー2-2</a>
</li>
<li class="header-menu__item02">
<a href="#">メニュー2-3</a>
</li>
<li class="header-menu__item02">
<a href="#">メニュー2-4</a>
</li>
</ul>
</li>
<li class="header-menu__item"><a href="#">メニュー3</a></li>
<li class="header-menu__item has-child">
<span>メニュー4</span>
<ul class="header-menu__list02">
<li class="header-menu__item02">
<a href="#">メニュー4-1</a>
</li>
<li class="header-menu__item02">
<a href="#">メニュー4-2</a>
</li>
<li class="header-menu__item02">
<a href="#">メニュー4-3</a>
</li>
<li class="header-menu__item02">
<a href="#">メニュー4-4</a>
</li>
</ul>
</li>
<li class="header-menu__item"><a href="#">メニュー5</a></li>
</ul>
</nav>
</div>
</header>
.header {
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 70px;
background-color: #fff;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
transition: all 0.3s;
z-index: 9999;
}
header .inner {
display: flex;
position: relative;
height: 100%;
padding: 0;
justify-content: center;
max-width: 1140px;
margin: 0 auto;
}
.header-menu {
width: 100%;
}
.header-menu__list {
display: flex;
background-color: #fff;
justify-content: flex-end;
}
.header-menu__item {
position: relative;
font-size: 18px;
font-weight: 700;
height: 70px;
line-height: 70px;
padding: 0 20px;
}
.header-menu__list02 {
display: none;
}
.has-child.open .header-menu__list02 {
display: block;
position: absolute;
font-weight: 400;
line-height: 1.5;
top: 70px;
left: 0;
padding: 8px 0;
min-width: 150px;
background-color: #fff;
z-index: 1000;
border: 1px solid #ccc;
border-radius: 4px;
cursor: pointer;
}
.header-menu__list02 a {
display: block;
padding: 5px 0;
}
.has-child {
position: relative;
text-align: center;
cursor: pointer;
}
.has-child::after,
.has-child.open::after {
content: "";
display: inline-block;
position: absolute;
width: 7px;
height: 7px;
border-top: 2px solid #2c2c2c;
border-right: 2px solid #2c2c2c;
transition: all 0.3s;
}
.has-child.open::after {
top: 50%;
right: 0;
-webkit-transform: rotate(-45deg) translateY(-50%);
transform: rotate(-45deg) translateY(-50%);
}
.has-child::after{
top: 28px;
right: 5px;
-webkit-transform: rotate(135deg) translateY(-50%);
transform: rotate(135deg) translateY(-50%);
}
// スクロールしたらサブメニューを非表示にする
jQuery(window).on('scroll', function () {
if (jQuery(this).scrollTop() > 100) {
jQuery(".has-child").removeClass("open");
}
});
jQuery(".has-child").on('click', function (e) {
const clickedNavItem = jQuery(this);
clickedNavItem.toggleClass("open");
jQuery(".has-child").not(clickedNavItem).removeClass("open");
//クリックイベントが親要素やドキュメントの他の部分に伝わるのを防ぐ
e.stopPropagation();
});
// サブメニュー以外をクリックするとサブメニューが非表示になる
jQuery(document).on('click', function () {
jQuery(".has-child").removeClass("open");
});
他のHTML・CSS ・JavaScriptソースコード紹介記事まとめ
ソースコードまとめ
実務経験で作成したレイアウトのHTML・CSS ・JavaScriptソースコードを紹介した記事まとめています。