CSSでハンバーガーメニューの作り方を覚えるために練習したことを誰かに説明しているかのように記事にまとめました。ハンバーガーメニューの作り方に必要なHTMLとCSSの書き方で役に立つ部分があれば役立ててください。
ハンバーガーメニューのCSSは練習を兼ねて書いたのでポンコツな内容があったときはすいません。
ハンバーガーメニューのHTML
まずはハンバーガーメニューの作り方のうち、CSSでデザインをするために土台になるHTMLです。
以下のHTMLを元にハンバーガーメニューの作り方を説明します。
<div class="hamburger-menu">
<input type="checkbox" id="menu_btn_check">
<label for="menu_btn_check" class="menu-btn"><span></span></label>
<label for="menu_btn_check" class="menu-mask"></label>
<div class="hamburger-contents">
<label for="menu_btn_check" class="menu-close"><i class="fas fa-times"></i><span>閉じる</span></label>
<h2>MENU</h2>
<ul class="burger-wrap">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
inputタグにtype属性を使用して値にcheckboxを指定します。チェックボックスはハンバーガーメニューの開閉ボタンに連動するスイッチの役割になります。
inputタグにはid属性も記述してid名を付与しておきます。
次にlabel要素をマークアップです。label要素のfor属性値にはinputタグに付与したid名を指定します。
これによりinputのidとlabelのforが連動するので、labelをクリックしてもチェックボックスのオンとオフの切り替えが可能になり、CSSでハンバーガーメニューを作るときの開閉動作に使用できるようになります。
label要素はあと2つマークアップします。ハンバーガーメニューを閉じるときのボタン用になります。
閉じるボタン2つのうち1つは最初のlabel要素のすぐ下にマークアップです。2つ目のlabelはhamburger-contentsのクラスを付与しているdiv要素のすぐ下に記述します。
どちらのlabel要素にもinputタグのidを指定しますが、クラスはそれぞれ異なるクラス名を記述しておき、CSSでハンバーガーメニューのデザインをするときに使用します。
ここまでのハンバーガーメニューの作り方で画面に表示しているのはHTMLでマークアップしたcheckboxのスイッチと閉じるラベル、そしてmenu見出しとリストの点だけが表示していればハンバーガーメニューの作り方が成功しています。
ハンバーガーメニューのCSS
ハンバーガーメニューのCSSは次の記述を元に説明します。
CSSでハンバーガーメニューの作り方はパーツごとに覚えると分かりやすくなります。
/*ハンバーガーボタン(3本線)パーツ*/
.menu-btn {
position: fixed;
top: 20px;
right: 20px;
display: flex;
height: 60px;
width: 60px;
justify-content: center;
align-items: center;
z-index: 90;
background-color: #333;
transition-duration: 0.3s;
}
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
content: "";
display: block;
height: 3px;
width: 25px;
border-radius: 3px;
background-color: rgb(83, 228, 238);
position: absolute;
}
.menu-btn span:before {
bottom: 8px;
}
.menu-btn span:after {
top: 8px;
}
/*ハンバーガーメニューパーツ*/
.hamburger-contents{
background-color: rgb(83, 228, 238);
color: #333;
position: fixed;
width: 100%;
height: 100%;
max-width: 340px;
top: 0;
right: 0;
margin: 0;
padding: 0 10px;
transition-duration: 0.3s;
z-index: 1;
overflow: auto;
transform: translateX(110%);
}
/*チェックボックス：オン・オフ動作のパーツ*/
#menu_btn_check:checked ~ .hamburger-contents{
transform: translateX(0);
}
#menu_btn_check:checked + .menu-btn{
transform: translateX(340px);
transition-duration: 0.3s;
}
/*閉じる動作のパーツ：ボタンか画面全体のマスクで閉じる*/
.menu-close {
display: block;
background: rgb(83, 228, 238);
text-align: center;
margin-top: 15px;
}
#menu_btn_check:checked ~ label.menu-mask{
display: block;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0,.5);
position: fixed;
top: 0;
left: 0;
}
/*チェックボックス非表示*/
.hamburger-menu input[type="checkbox"]{
transform: translateX(-50vw);
}
最初にハンバーガーボタン(3本線)パーツとハンバーガーメニューパーツの作り方の説明をしておきます。
まずはハンバーガーボタンのデザインを3本線にします。
ハンバーガーボタン(3本線)パーツはCSSで4つのクラスセレクタを使用する作り方です。
.menu-btn
.menu-btn span
.menu-btn span:before
.menu-btn span:after
.menu-btnはHTMLで一番上にマークアップしたlabelに付与したクラス名です。子要素にはspan要素があります。
menu-btnクラス付きのlabel要素にCSSでposition: fixedを適用することで要素を固定し、固定位置を画面の右上topとrightともに20pxの位置で固定します。
そして画面右上に固定したmenu-btnの子要素spanにはCSSの疑似要素beforeとafterを適用してハンバーガーメニューの3本線でデザインしたボタンになってもらいます。
.menu-btn span
.menu-btn span:before
.menu-btn span:after
上記の3要素でハンバーガーメニューの3本線ボタンの作り方は、線を同じ高さと幅を指定し、position: absoluteを指定、beforeとafter要素をそれぞれtopとbottomでmenu-btn要素の線を基準に位置をずらしデザインします。
次にハンバーガーメニューパーツの作り方です。ハンバーガーボタンをクリックして開閉するコンテンツの要素をデザインです。
CSSのposition:fixedで画面の右上に固定。固定位置はtopとrightを0指定で要素が画面の右側にピッタリ配置するようにしておきます。
そしてハンバーガーメニューパーツの幅と高さを作ります。
width:100%
max-width:340px
height:100%
のCSSです。
これによりハンバーガーメニューが開かれると画面右から340px幅で、高さは画面の最上から最下までの領域でコンテンツを表示できます。
ハンバーガーメニューのパーツはハンバーガーボタンをクリックしたら登場するので最初は隠しておきます。
.hamburger-contentsセレクタにCSSのtransform: translateX(110%);を記述して隠します。x軸に110%ほど横に移動させて画面から消えてもらっています。
ここまでのハンバーガーメニューの作り方で画面に表示しているのはCSSでデザインしたハンバーガーの3本線ボタンとチェックボックスが表示していればCSSでハンバーガーメニューの作り方が成功しています。
右側から開くハンバーガーメニューの作り方
CSSでのハンバーガーメニューの作り方でハンバーガーボタンをクリックしたら右側から開くハンバーガーメニューの作り方です。
チェックボックス：オン・オフ動作のパーツをCSSで作ります。
使用するCSSは:checked擬似クラスと結合子です。
/*チェックボックス：オン・オフ動作のパーツ*/
#menu_btn_check:checked ~ .hamburger-contents{
transform: translateX(0);
}
#menu_btn_check:checked + .menu-btn{
transform: translateX(340px);
transition-duration: 0.3s;
}
HTMLのlabelとforに指定したmenu_btn_checkをidセレクタにして:checkedを記述します。そして結合子~で.hamburger-contentsセレクタを繋ぎます。
このように記述したCSSセレクタはハンバーガーメニューの作り方でmenu_btn_checkのidと紐づいたforのlabelをクリックしてチェックボックスにチェックが入った状態の場合、結合した要素のセレクタ内のプロパティと値が適用されます。
そのためtransform: translateX(110%);で最初は隠れてもらっているハンバーガーメニューパーツはチェックボックスのチェックが入ったときに画面右側に登場してもらいたいので、transform: translateX(0);を適用して飛び出してきてもらい表示します。
もう一つのmenu_btn_check:checkedは3本線のハンバーガーボタンをハンバーガーメニューが表示したときに隠すCSSを適用するためのセレクタです。
ハンバーガーのボタンにチェックが入ったときハンバーガーメニューと入れ替えにボタンがx軸に340px移動して隠れてくれる作り方をしています。
ここまでのハンバーガーメニューの作り方は、ハンバーガーボタンをクリックしたらハンバーガーメニューのコンテンツが画面の右側からスッと表示、そしてハンバーガーボタンが隠れてくれればハンバーガーメニューの作り方が成功しています。
ハンバーガーメニューを閉じるCSS
ハンバーガーメニューの作り方で覚えておくと良いと思えたのはハンバーガーメニューを閉じるときの動作です。
ハンバーガーメニューのコンテンツ内には閉じるのボタンをlabelで作成してありますが、ハンバーガーメニューの外側でも閉じるような作り方をしたいです。
/*閉じる動作のパーツ：ボタンか画面全体のマスクで閉じる*/
#menu_btn_check:checked ~ label.menu-mask{
display: block;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0,.5);
position: fixed;
top: 0;
left: 0;
}
.menu-close {
display: block;
background: rgb(83, 228, 238);
text-align: center;
margin-top: 15px;
}
そのためにはmenu-maskクラスを付与したlabel要素で画面全体にマスクをかけます。
作り方としてはCSSでlabelのid値menu_btn_checkに:checked擬似クラスを使用してlabel.menu-maskの要素にbackgroundプロパティで透過した背景色を適用します。
そしてハンバーガーメニュー以外の要素全体を覆った背景色でハンバーガーメニューを閉じるようにCSSを適用したいのでチェックボックスのチェックが外れる範囲を、幅100vwに、高さを100vhで画面全体にします。
背景色のポジションはfixedで固定位置をtopとleftともに0で指定。
すると3本線のハンバーガーメニューをクリックしたときには、左からメニューがニョキッと表示するとともに、画面全体はCSSで適用した透過背景色で覆われます。
透過背景色をクリックするとハンバーガーメニューを閉じることができます。
CSSでハンバーガーメニュー内をスクロール
ここまで書いたCSSの記述でハンバーガーメニューの作り方は完成ですが、最後にコンテンツを加えてみたときにハンバーガーメニュー内がスクロールしないことに気づきました。
CSSのオーバーフローでハンバーガーメニュー内をスクロールできるようにします。
.hamburger-contents{
overflow: auto;
}
ハンバーガーメニューとしてのコンテンが入ることになる親要素にCSSのoverflow: auto;を適用します。
子要素が親要素に収まるようにスクロールバーがオートで適用されます。
See the Pen
ハンバーガーメニュー by @shu (@shua01cdfbae5)
on CodePen.
チェックボックスを非表示にするのを忘れてました。
CSSの属性セレクタを使用してtranslateでX軸に位置をずらしてチェックボックスを画面から非表示にします。
.hamburger-menu input[type="checkbox"]{
transform: translateX(-50vw);
}
まとめ
CSSでハンバーガーメニューの作り方を覚えるために練習をして誰かに説明しているかのように記事にまとめた今回の投稿。
ハンバーガーメニューの作り方はデザインよりも先にハンバーガーメニューが開閉する仕組みが上手に動作しないと作業が先に進めないので、大切なのはinputタグとlabel要素を連動したハンバーガーボタン、そして連動させたハンバーガーボタンと開閉するハンバーガーメニューとの連動かと思っています。
最後にハンバーガーメニューのCSSはposition:fixedを多く使うのでz-indexでの要素の重ね合わせ順序にも気を配るとハンバーガーメニューの作り方はスムーズになるかと思えました。
