今回は、「アクセシビリティを意識したハンバーガーメニューの作り方」についてまとめました。
ハンバーガーメニューは頻繁に実装するパーツなので、是非実装できるようになりましょう。
以下の記事を参考にさせて頂きました。
ハンバーガーボタン 何で作ってる？僕なりの作り方を解説してみる。
アクセシビリティを意識したハンバーガーメニューの作り方
デモサイトはこちら。
See the Pen
Untitled by ゆーじろー (@yuji64)
on CodePen.
マウスを使わずタブ操作でハンバーガーメニューを閉開できるので、アクセシビリティ的に良いです。
HTML
<div class="button">
<button type="button" id="js-buttonHamburger" class="c-button p-hamburger" aria-controls="global-nav" aria-expanded="false">
<span class="p-hamburger__line">
<span class="u-visuallyHidden">
メニューを開閉する
</span>
</span>
</button>
</div>
<div class="groval">
<a href="">グローバルメニューです</a>
</div>
ハンバーガーメニューを作るポイントは、buttonタグで実装することです。
buttonタグを使うことで、タブ操作でハンバーガーメニューの閉開が可能となります。
CSS
.c-button {
position: relative;
display: inline-block;
text-decoration: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
background-color: transparent;
cursor: pointer;
}
.p-hamburger {
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 50px;
height: 50px;
transition: all .3s ease-in-out;
background-color: red;
}
.p-hamburger__line {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 18px;
height: 2px;
background-color: #fff;
-webkit-transition: inherit;
transition: inherit;
}
.p-hamburger__line::before,
.p-hamburger__line::after {
position: absolute;
display: block;
width: 100%;
height: 100%;
background-color: inherit;
content: '';
-webkit-transition: inherit;
transition: inherit;
}
.p-hamburger__line::before {
top: -5px;
}
.p-hamburger__line::after {
top: 5px;
}
.p-hamburger[aria-expanded="true"] .p-hamburger__line {
background-color: transparent;
}
.p-hamburger[aria-expanded="true"] .p-hamburger__line::before,
.p-hamburger[aria-expanded="true"] .p-hamburger__line::after {
top: 0;
background-color: #f9d8ae;
}
.p-hamburger[aria-expanded="true"] .p-hamburger__line::before {
transform: rotate(45deg);
}
.p-hamburger[aria-expanded="true"] .p-hamburger__line::after {
transform: rotate(-45deg);
}
.u-visuallyHidden {
position: absolute;
white-space: nowrap;
width: 1px;
height: 1px;
overflow: hidden;
border: 0;
padding: 0;
clip: rect(0 0 0 0);
clip-path: inset(50%);
margin: -1px;
}
.groval {
background-color: pink;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
visibility: hidden;
a {
font-size: 2.2rem;
margin-bottom: 25px;
}
}
.is-drawerActive .groval {
visibility: visible;
}
JavaScript
(function () {
$('#js-buttonHamburger').click(function () {
$('body').toggleClass('is-drawerActive');
if ($(this).attr('aria-expanded') == 'false') {
$(this).attr('aria-expanded', true);
} else {
$(this).attr('aria-expanded', false);
}
});
}) ();
