ハンバーガーメニューの作成手順をまとめました。
スマホなどの画面が小さいデバイスで、メニューを常時表示しない時に使用できます。
ハンバーガーメニューの作成手順
ハンバーガーメニューは大きく分けて3つの手順で作成します。
１ メニューのボタンを作成
まずは画面上に表示させるメニューボタンを作成していきます。
スマホ等の画面幅が小さいデバイスの時のみ表示するのであれば、
合わせてメディアクエリの記載も必要になります。
divブロックを作成し、中に空白のspanタグを入力する。
<div class=”hamburger”>
<span></span>
<span></span>
<span></span>
</div>
spanはメニュー内の線を表します。
・widthとheightで画面上での大きさを設定。
.hamburger { width:50px height:50px background-color: #fff
・画面スクロール時にも表示されるようpositionを設定。
position: fixed
・top,rightなどで画面上での表示位置と、z-indexで表示順を設定。
top: 50px, right: 10px , z-index: 30 }
続いてメニュー上の線を作成します。今回であれば作成した3つのspanタグが線になります。
・線の長さと太さと色を設定。
.hamburger span {width: 30px height: 3px backgroundcolor: #000 display: inline-block
・メニュー上の線の位置を設定。
position: absolute , left: 10px }
1本ずつ表示されるように、擬似クラスを使って高さを設定。
.hamburger span:nth-of-type(1) { top: 16px}
.hamburger span:nth-of-type(2) { top: 25px}
.hamburger span:nth-of-type(3) { top: 34px}
画面上に、スクロールできる3本のハンバーガーメニューができました。
２ メニューの中身を作成
次に、メニューの中身を作成します。
メニューはnavタグで作成することが多いと思いますので、navタグに対して設定していきます。
表示されるメニューボックスのサイズを設定。今回は画面いっぱいのサイズです。
nav { height: 100vh; width: 100%; background-color: #fff;
メニュー内の設定をします。
メニュー内のサイズをいっぱいにし縦並びにします。
nav ul { width: 100%; height: 100vh; display: flex; flex-direction: column; }
ハンバーガーメニューの中身が作成できました。
３ ボタンを押した時の動作を作成
ハンバーガーメニューのボタン（3本線のアイコン）が押された時の動作を作成します。
cssの他にjQueryを使用し、activeクラスの付与や削除を利用して表現します。
ハンバーガーメニューのボタンが押された時にactiveクラスを付与、削除します。
$(function(){
$(“.hamburger”).click(function(){
$(this).toggleClass(“active”);
$(“nav”).toggleClass(“active”); });
$(nav li).click(function(){
$(“.hamburger”).removeClass(“active”);
$(“nav”).removeClass(“active”);});
});
以上でボタンを押した時の動作まで作成が完了しました。
４ トランジションの設定
ボタンを押した際を動きをトランジションで設定します。
画面外からのスライドインと、画面内に徐々に現れるフェードインをそれぞれまとめます。
通常時は非表示にするための位置を設定。
nav { position: fixed; top: 0; right: -80%; z-index: 20; }
ボタンを押した時に非表示になっているメニューを表示させ、トランジションを設定します。
nav.active { right: 0; transition: all 1s; }
通常時は透明にしクリックできないように設定。
nav { postion: fixed; top: 0; left: 0; z-index: 20; opacity: 0; visibility: hidden; }
ボタンを押した時に透明になっているメニューを表示させ、
クリックできるようにしトランジションを設定します。
nav.active { opacity: 1; visibility: visible; transition: all 1s; }
まとめ
ハンバーガーメニューの作成手順についてまとめました。
最初はものすごく手順がたくさんあると感じたのですが、動作をまとめてみることで
構造や作成の理解がしやすくなるのではないでしょうか。
レスポンシブ設定やアニメーションを加えることでより使いやすいサイト設計が可能です。
コメント