<header>
<button tabindex="1" type="button" class="button" id="buttonHamburger" aria-controls="globalmenu" aria-label="メニューを開閉する" aria-expanded="false">
<span class="button-line"></span>
</button>
</header>
<div class="modal_container" id="modal-1" aria-hidden="true">
<div tabindex="-1" class="overlay" data-micromodal-close>
<div role="dialog" aria-modal="true" aria-labelledby="modal-1-content">
<nav id="modal-1-content">
<ul class="menu">
<li class="menu-item"><a class="menu-item_link" href="">メニュー1</a></li>
<li class="menu-item"><a class="menu-item_link" href="">メニュー2</a></li>
<li class="menu-item"><a class="menu-item_link" href="">メニュー3</a></li>
<li class="menu-item"><a class="menu-item_link" href="">メニュー4</a></li>
<li class="menu-item"><a class="menu-item_link" href="">メニュー5</a></li>
</ul>
</nav>
</div>
</div>
</div>
<!-- メインコンテンツ -->
<main>
<section class="section section1"></section>
<section class="section section2"></section>
<section class="section section3"></section>
</main>@charset "UTF-8";
* {
margin: 0;
padding: 0;
}
ul,
li {
list-style: none;
}
button {
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
color: inherit;
vertical-align: middle;
text-align: inherit;
font: inherit;
}
main {
height: 100vh;
}
.section {
height: 300px;
}
.section1 {
background-color: #ccccff;
}
.section2 {
background-color: #99ccff;
}
.section3 {
background-color: #ffccff;
}
/**************** 以下、ハンバーガーボタンのスタイリング ****************/
.button {
/* ボタンの配置位置 */
position: fixed;
top: 24px;
right: 16px;
/* 最前面に */
z-index: 10;
/* ボタンの大きさ */
width: 32px;
height: 32px;
cursor: pointer;
}
/***** 真ん中のバーガー線 *****/
.button-line {
display: block;
/* バーガー線の位置基準として設定 */
position: relative;
/* 線の長さと高さ */
width: 100%;
height: 2px;
/* バーガー線の色 */
background-color: #333;
transition: 0.2s;
}
/***** 上下のバーガー線 *****/
.button-line::before,
.button-line::after {
content: "";
/* 基準線と同じ大きさと色 */
position: absolute;
width: 100%;
height: 100%;
background-color: #333;
transition: 0.5s;
}
.button-line::before {
/* 上の線の位置 */
transform: translateY(-8px);
}
.button-line::after {
/* 下の線の位置 */
transform: translateY(8px);
}
/***** メニューオープン時 *****/
.button.is-open .button-line {
/* 真ん中の線を透明に */
background-color: transparent;
}
.button.is-open .button-line::before,
.button.is-open .button-line::after {
content: "";
transition: 0.2s;
}
.button.is-open .button-line::before {
/* 上の線を傾ける */
transform: rotate(45deg);
}
.button.is-open .button-line::after {
/* 上の線を傾ける */
transform: rotate(-45deg);
}
/**************** ここまで、ハンバーガーボタンのスタイリング ****************/
/* ハンバーガーメニュー 中身 */
.modal_container .menu {
/* メニューの位置マイナス指定で画面外に */
position: fixed;
right: -50%;
top: 0;
width: 50%;
height: 100vh;
/* メニューを縦に */
flex-direction: column;
color: #212121;
background-color: #eee;
transition: 0.3s;
overflow-y: scroll;
}
.modal_container.is-open .menu {
display: flex;
right: 0;
}
.modal_container.is-open .overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.6);
display: flex;
justify-content: center;
align-items: center;
z-index: 0;
}
.menu-item_link {
width: 100%;
padding: 2em 0;
/* メニューテキスト位置をリスト内中心に */
display: flex;
justify-content: center;
align-items: center;
}
.menu-item_link:hover {
cursor: pointer;
}
@media screen and (min-width: 600px) {
.button {
display: none;
}
.modal_container .menu {
position: fixed;
right:auto;
width: 100%;
height: auto;
/* メニューを横に */
display: flex;
flex-direction: row;
justify-content: space-around;
}
/**************** ここまで、メニューのスタイリング ****************/
const button = document.getElementById("buttonHamburger");
const modal = document.getElementById("modal-1");
// メニューの開閉
button.addEventListener("click", () => {
if (modal.classList.contains("is-open")) {
button.classList.remove("is-open");
button.ariaExpanded = true;
MicroModal.close("modal-1", {
awaitCloseAnimation: true // 開閉時のアニメーションを可能に
});
} else {
button.classList.add("is-open");
button.ariaExpanded = false;
MicroModal.show("modal-1", {
disableScroll: true, // ページスクロールを無効に
awaitOpenAnimation: true, // 開閉時のアニメーションを可能に
onClose: () => {
button.classList.remove("is-open"); // 閉じたときハンバーガーボタンのスタイルを戻す
}
});
}
});
External CSS
This Pen doesn't use any external CSS resources.