はじめに
実務経験で実装をしたメガメニューをソースコードと一緒にご紹介します。
メガメニューの仕様
親カテゴリーをクリックすると子カテゴリーが開きます。
親カテゴリーをクリックしたときに、他の親カテゴリーの子カテゴリーが開いていたら、その子カテゴリーを閉じて、自身の子カテゴリーが開く仕様になっています。(PCでの仕様)
スマホでは通常のアコーディオンメニューになっています。他の親の子カテゴリーが開いていても、その子カテゴリーを閉じずに、自身の子カテゴリーを開きます。もう一度クリックすると子カテゴリーが閉じます。
メガメニューの実際の表示の確認
ここをクリックまたは、タップするとメニューが開きます
メガメニューのソースコード
<div class="openbtn">MENU<span></span></div>
<div class="submenu">
<div class="submenu__header">
<div class="submenu__close">
閉じる
<span class="submenu__close-icon">
<span></span>
<span></span>
</span>
</div>
</div>
<div class="submenu__wrap">
<ul class="submenu__wrap01">
<li class="submenu__list">
<div class="submenu__title">カテゴリー01<span class="triangle-right"></span></div>
<ul class="submenu-child__list">
<li><a href="#">カテゴリー01_01</a></li>
<li><a href="#">カテゴリー01_02</a></li>
<li><a href="#">カテゴリー01_03</a></li>
<li><a href="#">カテゴリー01_04</a></li>
</ul>
</li>
<li class="submenu__list">
<div class="submenu__title">カテゴリー02<span class="triangle-right"></span></div>
<ul class="submenu-child__list">
<li><a href="#">カテゴリー02_01</a></li>
<li><a href="#">カテゴリー02_02</a></li>
<li><a href="#">カテゴリー02_03</a></li>
<li><a href="#">カテゴリー02_04</a></li>
<li><a href="#">カテゴリー02_05</a></li>
<li><a href="#">カテゴリー02_06</a></li>
</ul>
</li>
<li class="submenu__list">
<div class="submenu__title">カテゴリー03<span class="triangle-right"></span></div>
<ul class="submenu-child__list">
<li><a href="#">カテゴリー03_01</a></li>
<li><a href="#">カテゴリー03_02</a></li>
<li><a href="#">カテゴリー03_03</a></li>
<li><a href="#">カテゴリー03_04</a></li>
<li><a href="#">カテゴリー03_05</a></li>
<li><a href="#">カテゴリー03_06</a></li>
</ul>
</li>
<li class="submenu__list">
<div class="submenu__title">カテゴリー04<span class="triangle-right"></span></div>
<ul class="submenu-child__list">
<li><a href="#">カテゴリー04_01</a></li>
<li><a href="#">カテゴリー04_02</a></li>
<li><a href="#">カテゴリー04_03</a></li>
<li><a href="#">カテゴリー04_04</a></li>
<li><a href="#">カテゴリー04_05</a></li>
</ul>
</li>
<li class="submenu__list">
<div class="submenu__title">カテゴリー05<span class="triangle-right"></span></div>
<ul class="submenu-child__list">
<li><a href="#">カテゴリー05_01</a></li>
<li><a href="#">カテゴリー05_02</a></li>
<li><a href="#">カテゴリー05_03</a></li>
<li><a href="#">カテゴリー05_04</a></li>
<li><a href="#">カテゴリー05_05</a></li>
</ul>
</li>
<li class="submenu__list">
<div class="submenu__title">カテゴリー06<span class="triangle-right"></span></div>
<ul class="submenu-child__list">
<li><a href="#">カテゴリー06_01</a></li>
<li><a href="#">カテゴリー06_02</a></li>
<li><a href="#">カテゴリー06_03</a></li>
<li><a href="#">カテゴリー06_04</a></li>
<li><a href="#">カテゴリー06_05</a></li>
<li><a href="#">カテゴリー06_06</a></li>
</ul>
</li>
<li class="submenu__list"><a href="#">カテゴリー07</a></li>
</ul>
</div>
</div>.openbtn {
position: fixed;
top: 14px;
right: 14px;
padding-right: 20px;
font-weight: 700;
cursor: pointer;
z-index: 100000;
}
.openbtn span {
width: 5px;
height: 5px;
border-radius: 1px;
background: #191919;
box-shadow: 7px 0 rgba(13,13,13,1), 0 7px rgba(13,13,13,1), 7px 7px rgba(13,13,13,1);
display: inline-block;
margin-left: 8px;
position: absolute;
top: 9px;
margin: auto;
right: 8px;
}
.openbtn::after {
content: "";
display: inline-block;
width: 100%;
height: 4px;
position: absolute;
left: 0;
bottom: 0;
}
.submenu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
display: none;
background-size: 100% auto;
background-color: #3a3a3a;
overflow: scroll;
}
.submenu__header {
width: 100%;
height: 64px;
border-bottom: 1px solid #7f7f7f;
padding: 0 20px;
display: flex;
justify-content: flex-end;
align-items: center;
}
.submenu__close {
display: flex;
align-items: center;
height: 20px;
line-height: 20px;
padding-right: 16px;
margin: 22px 0;
font-size: 16px;
color: #fff;
cursor: pointer;
}
.submenu__close-icon {
display: block;
width: 20px;
height: 20px;
position: relative;
margin-left: 3px;
}
.submenu__close-icon span {
display: block;
content: "";
position: absolute;
top: 45%;
left: 20%;
width: 20px;
height: 3px;
background: #fff;
}
.submenu__close-icon span:first-child {
transform: rotate(-45deg);
}
.submenu__close-icon span:last-child {
transform: rotate(45deg);
}
.submenu__wrap {
width: 100%;
margin-top: 80px;
padding: 0 30px;
overflow: hidden;
border-bottom: 1px solid #86949f;
}
.submenu__wrap01 {
width: 75%;
position: relative;
}
.submenu__list {
width: 100%;
padding: 0 0 30px 0;
font-size: 24px;
color: #fff;
line-height: 120%;
}
.submenu__list a {
font-size: 24px;
color: #fff;
}
.submenu__list.is-open,
.submenu__list.is--open .submenu__title,
.submenu__list.is--open:hover .submenu__title {
color: #ffdc00;
font-weight: 700;
}
.submenu__title span.triangle-right {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 6.5px 0 6.5px 7px;
border-color: transparent transparent transparent #778693;
}
.submenu__list.is--open span.triangle-right {
border-color: transparent transparent transparent #ffdc00;
}
.submenu__title {
position: relative;
width: 40%;
}
.submenu-child__list {
display: none;
}
.submenu-child__list li {
margin-bottom: 35px;
}
.submenu-child__list li:first-child {
font-weight: 700;
}
.submenu__list.is--open .submenu-child__list {
display: block;
}
.submenu-child__list a {
font-size: 20px;
color: #f9f57c;
}
.submenu .submenu__close {
justify-content: center;
}
@media screen and (min-width: 768px) {
.openbtn:hover::after,
.submenu__wrap {
display: flex;
justify-content: space-between;
height: 600px;
}
.submenu__title:hover span.triangle-right {
border-color: transparent transparent transparent #fff;
}
.submenu__list.is--open:hover span.triangle-right {
border-color: transparent transparent transparent #ffdc00;
}
.submenu-child__list {
width: 55%;
position: absolute;
top: 0;
left: 45%;
}
.submenu__list a:hover {
font-weight: 700;
}
.submenu__title:hover {
color: #fff;
font-weight: 700;
}
}
@media screen and (max-width: 767px) {
.openbtn {
margin-left: 24px;
}
.openbtn span {
top: 7px;
}
.submenu__header {
height: 46px;
padding-left: 16px;
padding-right: 13px;
}
.submenu__close {
height: 14px;
line-height: 14px;
padding-right: 8px;
margin: 16px 0;
font-size: 14px;
}
.submenu__close-icon {
width: 14px;
height: 14px;
}
.submenu__wrap {
margin-top: 90px;
padding: 0 16px;
}
.submenu__wrap01 {
width: 100%;
padding-bottom: 60px;
}
.submenu__list {
padding: 0 0 0 8px;
font-size: 20px;
line-height: 130%;
margin: 35px 16px 0 0;
}
.submenu__title span.triangle-right {
border-width: 7px 6.5px 0 6.5px;
border-color: #778693 transparent transparent transparent;
}
.submenu__list.is--open span.triangle-right {
border-width: 0 6.5px 7px 6.5px;
border-color: transparent transparent #ffdc00 transparent;
}
.submenu__title {
width: 100%;
}
.submenu-child__list li {
margin-top: 35px;
padding-left: 45px;
}
.submenu__list a {
font-size: 20px;
}
.submenu-child__list a {
font-size: 16px;
}
}const openbtn = document.querySelector(".openbtn");
const submenu = document.querySelector(".submenu");
openbtn.addEventListener("click", function() {
submenu.style.display = "block";
});
const closeBtns = document.querySelectorAll('.submenu__close');
closeBtns.forEach(closeBtn => {
closeBtn.addEventListener('click', (e) => {
submenu.style.display = 'none';
});
});
const submenuLists = document.querySelectorAll('.submenu__list');
window.addEventListener('load', function(event){
if(window.innerWidth >= 768){
submenuLists.forEach(submenuList => {
submenuList.addEventListener('click', () => {
submenuLists.forEach(sibling => sibling.classList.remove('is--open'));
submenuList.classList.add('is--open');
});
});
}else{
for(let i = 0; i < submenuLists.length; i++) {
submenuLists[i].addEventListener('click', function() {
this.classList.toggle('is--open');
});
}
}
});注意点
実際はヘッダー内に組み込むと思うので、実装するときにhtmlの構造は変わると思います。ソースコードは適宜ご調整ください。
また検証ツールなどで、ブラウザ幅を変更するとjsがうまく動かなくなるので、一度ページを再読み込みしてから動きを確認してください。
他のHTML・CSS ・JavaScriptソースコード紹介記事まとめ
ソースコードまとめ
実務経験で作成したレイアウトのHTML・CSS ・JavaScriptソースコードを紹介した記事まとめています。
