当記事では、ハンバーガーメニューをHTMLとCSSのみで作成する方法についてステップ・バイ・ステップで解説します。
目次
⓪完成イメージ
下記のようなクリックしたら横からメニューがスライドインしてくるハンバーガーメニューをHTMLとCSSのみで作成する事を目指します。
①HTMLでハンバーガーメニューのパーツを用意する
クリックでメニューが開く機能はdetails&summaryタグの力を借りましょう。
<details class="hamburger-menu">
<summary><span></span></summary>
<div class="menu">
<ul>
<li><a href="javascript:void(0)">メニュー１</a></li>
<li><a href="javascript:void(0)">メニュー２</a></li>
<li><a href="javascript:void(0)">メニュー３</a></li>
<li><a href="javascript:void(0)">メニュー４</a></li>
<li><a href="javascript:void(0)">メニュー５</a></li>
</ul>
</div>
</details>
details&summaryタグはCSSもJSもなしでクリックした時にコンテンツを開く仕組みを提供してくれます。
下の三角をクリックすると、メニューが開くはずなので試してみて下さい。
②ハンバーガーメニューのボタンの枠を作る
CSSでメニューボタンを作りましょう。
summaryタグの三角を非表示にしてボタンのサイズや位置や色を調整します。
※9行目のpaddingの値は後で使いたいのでカスタムプロパティにしています。
.hamburger-menu summary {
list-style: none;
}
.hamburger-menu summary::-webkit-details-marker {
display: none;
}
.hamburger-menu summary {
--btn-padding: 10px;
padding: var(--btn-padding);
width: 60px;
height: 60px;
padding: 10px;
display: flex;
flex-direction: column;
justify-content: space-around;
position: fixed;
top: 0;
right: 0;
z-index: 99;
background:aqua;
}
メニューボタンの枠ができました。
③ハンバーガーメニューのボタンの中身を作る
メニューボタンの中身として白い三本線を作ることにします。
三本線の位置については先ほど親要素をFlexボックスにして均等配置するようにしているので、形を定義するだけでOKです。
.hamburger-menu summary span,
.hamburger-menu summary:before,
.hamburger-menu summary:after {
content: "";
width: 100%;
height: 3px;
background: #fff;
}
メニューボタンの中身ができました。
④クリックされたら三本線をバツ印にする
detailsタグはコンテンツを開いた時にopen属性が付くので、それを利用してハンバーガーメニューを開いた時のボタンのスタイルを定義します。
.hamburger-menu[open] summary:before,
.hamburger-menu[open] summary:after {
position: absolute;
width: calc(100% - (var(--btn-padding) * 2));
}
.hamburger-menu[open] summary:before { rotate: -45deg; }
.hamburger-menu[open] summary:after { rotate: 45deg; }
.hamburger-menu[open] summary span { opacity: 0; }
クリックで三本線がバツ印に変わると思うので試してみてください。
⑤ハンバーガーを開く時のアニメーションとメニューの見た目
最後に、開く時の動きとメニューの見た目を定義してハンバーガーメニューを完成させましょう。
.hamburger-menu[open] .menu {
position: fixed;
inset: 0;
margin: auto;
z-index: 98;
background: aqua;
animation: slideIn 1s ease;
}
.hamburger-menu[open] .menu ul{
position: fixed;
inset: 0;
margin: auto;
width: fit-content;
height: fit-content;
}
.hamburger-menu[open] .menu ul li{
margin: 20px 0;
}
@keyframes slideIn {
from { transform: translateX(100%)}
to { transform: translateX(0)}
}
ハンバーガーメニューが完成しました！
下記はデモ用のためfixedしてないので、開いた時のボタンの位置がおかしいかもしれませんが、気にしないでください。
ソースコード全文
最後にソースコード全文を載せておきます。
<style>
/* ハンバーガーメニューのボタン */
.hamburger-menu summary {
list-style: none;
}
.hamburger-menu summary::-webkit-details-marker {
display: none;
}
.hamburger-menu summary {
--btn-padding: 10px;
padding: var(--btn-padding);
width: 60px;
height: 60px;
padding: 10px;
display: flex;
flex-direction: column;
justify-content: space-around;
position: fixed;
top: 0;
right: 0;
z-index: 99;
background:aqua;
}
/* ハンバーガーメニューのボタンの三本線 */
.hamburger-menu summary span,
.hamburger-menu summary:before,
.hamburger-menu summary:after {
content: "";
width: 100%;
height: 3px;
background: #fff;
}
.hamburger-menu[open] summary:before,
.hamburger-menu[open] summary:after {
position: absolute;
width: calc(100% - (var(--btn-padding) * 2));
}
.hamburger-menu[open] summary:before { rotate: -45deg; }
.hamburger-menu[open] summary:after { rotate: 45deg; }
.hamburger-menu[open] summary span { opacity: 0; }
/* ハンバーガーメニューのメニュー */
.hamburger-menu[open] .menu {
position: fixed;
inset: 0;
margin: auto;
z-index: 98;
background: aqua;
animation: slideIn 1s ease;
}
.hamburger-menu[open] .menu ul{
position: fixed;
inset: 0;
margin: auto;
width: fit-content;
height: fit-content;
}
.hamburger-menu[open] .menu ul li{
margin: 20px 0;
}
@keyframes slideIn {
from { transform: translateX(100%)}
to { transform: translateX(0)}
}
</style>
<details class="hamburger-menu">
<summary><span></span></summary>
<div class="menu">
<ul>
<li><a href="javascript:void(0)">メニュー１</a></li>
<li><a href="javascript:void(0)">メニュー２</a></li>
<li><a href="javascript:void(0)">メニュー３</a></li>
<li><a href="javascript:void(0)">メニュー４</a></li>
<li><a href="javascript:void(0)">メニュー５</a></li>
</ul>
</div>
</details>以上、HTMLとCSSのみでハンバーガメニューを作成する方法でした！
今回のようにCSSのみで出来ることはなるべくCSSで実現したいものですね。
他にもCSSのみで実現できるものがありますので、ぜひ試してみてください！
