ハンバーガーメニューの作り方のポイント・バリエーションを解説します
こんにちは。今回はハンバーガーメニューについてのお話です。
スマホだけではなくPCでWEBサイトを閲覧する際もよく見かける、今ではなくてはならない機能の1つですよね。
ですがコーディングを学習したての方は実装が難しいなと感じていたり、表現のバリエーションを増やすことってできないのかな?と悩んでいる方も多いのではないでしょうか。
今回の記事では実際の記述例だけではなく、メニューを作るときのそもそもの考え方や、ボタン・メニュー開閉のアニメーション表現例のパターンも紹介していけたらと思います。
考え方のポイントをしっかり抑えて、しっかりと実装できるようにしていきましょう。
目次
ハンバーガーメニューとは
そもそもハンバーガーメニューとは、スマートフォンやタブレットなどの画面サイズが小さいデバイスでよく見かけるメニュー形式です。
3本線(2本線の場合もありますが)のアイコンをタップすると、メニューがスライドやフェードで表示され、コンテンツを切り替えることができます。
画面の限られたスペースを有効に活用できるため、レスポンシブデザインで特に多く使用されます。
作成時の考え方
ハンバーガーメニューを実装する際のポイントは、3本線のボタンと、メニュー表示部分をどのように作成・制御するかです。
具体的なコードを紹介する前に、以下の考え方をしっかり理解しておきましょう。
HTMLのポイント
ハンバーガーメニューのボタンを<div>タグ内に3本の<span>要素で作ります。
それぞれの<span>は、CSSで幅・高さ・背景色を設定して「線」のように見せます。
CSSのポイント
position: relativeや position: absoluteを使い、3本線をきれいに並べるのがポイントです。
線の太さや間隔を調整するほか、メニュー開閉時の動きや表示のアニメーション表現も行っていきます。
JavaScriptのポイント
ハンバーガーメニューをクリックすると、メニューが表示される動きをJavaScriptでコントロールします。クリック時にHTML要素へクラスを付与・削除の切り替えを行うようなイメージです。
記述例
それでは、実際のHTML、CSS、JavaScriptを使ったハンバーガーメニューの記述例を見ていきましょう。
以下のcodepenのプレビューにあるハンバーガーメニューのボタンをクリックすると動きが確認できます。
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
記述のポイントとしては以下のとおりです。
HTML
nav内にボタン(=クラスhamburger)とメニュー(ul)を準備します。
<nav class="menu">
<div class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
<ul>
<li><a href="#">トップ</a></li>
<li><a href="#">お知らせ</a></li>
<li><a href="#">私たちについて</a></li>
<li><a href="#">制作事例</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav>
CSS
あらかじめクラスmenuはpositionを使って画面外にずらしておき、後述するJavascriptの記述によってクラスopenが付与されたときにrightの値が変わるようにします。
結果メニューが右から左にスライドしてくるアニメーションが実装できます。
ボタンに関してはspanタグを使って線を作っておき、こちらもJavascriptの記述によってクラスactiveが付与されたときにそれぞれのspanの角度や位置を変化させています。
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #fff;
}
/* メニューのスタイル */
.menu {
position: fixed;
top: 0;
right: -100%; /* 初期状態では画面の外に隠れている */
width: 300px;
height: 100%;
background-color: #fafad2;
color: #333;
transition: right 0.3s ease; /* スライドインのアニメーション */
padding: 20px;
box-sizing: border-box;
z-index: 10;
}
/* メニューが開いているとき */
.menu.open {
right: 0;
}
/* ボタンのスタイル */
.hamburger {
position: fixed;
top: 20px;
right: 20px;
width: 30px;
cursor: pointer;
z-index: 20;
}
.hamburger span {
display: block;
height: 3px;
width: 100%;
background-color: #333;
margin: 5px 0;
transition: 0.4s;
}
/* バツ印に変化するスタイル */
.hamburger.active span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.hamburger.active span:nth-child(2) {
opacity: 0;
}
.hamburger.active span:nth-child(3) {
transform: rotate(-45deg) translate(6px, -6px);
}
/* メニューリストのスタイル */
.menu ul {
list-style-type: none;
padding: 0;
margin-top: 80px;
}
.menu li {
padding: 20px 0;
border-bottom: 1px solid #444;
}
.menu li a {
color: #333;
text-decoration: none;
display: block;
}
Javascript
toggleClassメソッドを使うことで、クリックをするたびに要素へクラスを付与/削除を切り替えています。jQueryの記述がシンプルになっておすすめです。
$(function() {
$('.hamburger').click(function() {
// メニューの開閉状態を切り替える
$('.menu').toggleClass('open');
// ハンバーガーボタンのアクティブクラスを切り替えて三本線をバツにする
$(this).toggleClass('active');
});
});
メニュー表示のパターン紹介
先ほどの記述例では右から左にメニューがスライドインしてくる仕様でしたが、そのほかのパターンについてもご紹介していきます。
上から下へスライド
先ほどの記述例と同じ考え方で、メニューを上から下へスライドさせて表示させる方法です。
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
フェードイン・フェードアウト
ボタンクリック時にメニューがふわっと表示される・非表示になるアニメーションです。
opacityとtransitionを設定し、時間をかけてopacityが0→1、1→0に変化するようにしています。
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
ハンバーガーメニューボタンのバリエーション
メニューの表示切り替えのほか、ボタンのアニメーションにもひと工夫加えられると良いですよね。
三本線がバツ印に変化するアニメーションパターンをご紹介します。
ボタンが回転するアニメーション
三本線をクリックすると回転し、最後にバツ印に切り替わるのが特徴的なアニメーションです。
色を変化させても良さそうですね。
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
ふわっと円が表示されるアニメーション
三本線をクリックすると線が回転するアニメーションに加え、周りに円形のあしらいを取り入れたアニメーションです。
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
まとめ
いかがでしたか?
CSSを使用した線やアニメーションの動き、jQueryによるクラス付与の分岐など、ハンバーガーメニューの実装にはいくつかポイントが必要ですが、要点を押さえることでしっかり作成できるようになり、アレンジ展開もしやすくなります。
ぜひこの記事が参考になれば嬉しいです。
STUDIO NNC 合同会社ではコーディングのみなど部分的なお手伝いはもちろん、WEBサイトのコンセプト設計からデザイン、ワードプレス構築まで一貫した制作を得意としております。ご相談がございましたら、お気軽にフォームよりお問い合わせください!