スマホサイトでよく見かける、最上部の左か右にある「三」のようなボタン。知っていますか？
タップするとメニューが出てくる、通称「ハンバーガーメニュー」と言います。ナビゲーションドロワーとも言うのかな。
WEBデザインが好きな人なら特に使ってみたいと思う機能ですよね。
そんなハンバーガーメニューをコピペだけで実装！js等は使わず cssだけで実装する方法を紹介します。
今回もコピペで使えるようにサンプルを用意しました！
※追記※
ハンバーガーメニューでページ内リンクをクリックした時、メニュー画面を閉じることはできないのですか？という質問をいただきました。
ページ内リンククリック時にメニューを同時に閉じるにはcssだけでは少々ややこしくなってしまうため、jQueryを1つ仕込むことで解決する方法をページ下部へ追記しました。そちらもぜひ参照ください。
ハンバーガーメニュー作成時のhtmlコピペ用コード
まずは html のサンプルをば。
<header> <div class="header-logo-menu"> <div id="nav-drawer"> <input id="nav-input" type="checkbox" class="nav-unshown"> <label id="nav-open" for="nav-input"><span></span></label> <label class="nav-unshown" id="nav-close" for="nav-input"></label> <div id="nav-content">ここに中身を入れる</div> </div> <div class="logo-area">LOGO</div> </div> </header>
ヘッダーメニューに入れるものなので、headerで囲っています。
仕組みのイメージとしては「チェックボックスを付けたらメニューがでてきて、メニュー外の薄黒箇所をタップするとチェックボックスのチェックが外れて隠れる」といった仕組みです。
ハンバーガーメニュー作成時のコピペ用CSS
cssはこちら。ちょっと長いよ。
header {
padding:10px;
background: #ccc;
}
#nav-drawer {
position: relative;
}
/*チェックボックス等は非表示に*/
.nav-unshown {
display:none;
}
/*アイコンのスペース*/
#nav-open {
display: inline-block;
width: 30px;
height: 22px;
vertical-align: middle;
}
/*ハンバーガーの形をCSSで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
position: absolute;
height: 3px;/*線の太さ*/
width: 25px;/*長さ*/
border-radius: 3px;
background: #555;
display: block;
content: '';
cursor: pointer;
}
#nav-open span:before {
bottom: -8px;
}
#nav-open span:after {
bottom: -16px;
}
/*閉じる用の薄黒箇所*/
#nav-close {
display: none;
position: fixed;
z-index: 99;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: .3s ease-in-out;
}
/*メニューの中身*/
#nav-content {
overflow: auto;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
width: 90%;
max-width: 330px;/*最大幅（お好みで調整を）*/
height: 100%;
background: #fff;
transition: .3s ease-in-out;
-webkit-transform: translateX(-105%);
transform: translateX(-105%);
}
/*チェックがついたら表示させる*/
#nav-input:checked ~ #nav-close {
display: block;
opacity: .5;
}
#nav-input:checked ~ #nav-content {
-webkit-transform: translateX(0%);
transform: translateX(0%);
box-shadow: 6px 0 25px rgba(0,0,0,.15);
}
.header-logo-menu{
display: flex;
display: -moz-flex;
display: -o-flex;
display: -webkit-flex;
display: -ms-flex;
flex-direction: row;
-moz-flex-direction: row;
-o-flex-direction: row;
-webkit-flex-direction: row;
-ms-flex-direction: row;
}
/*ロゴやサイトタイトルをセンタリング*/
.logo-area{text-align:center;margin:auto;}
少し説明も入れました。
これだけでもうハンバーガーメニューが実装できます。簡単だね！
CSSを利用し簡単にコピペでハンバーガーメニューが完成！
ハンバーガーメニューの完成図イメージがこちら。CSSだけで簡単に実装できました！もちろんCSSだけなので動きも軽快です。
こんな感じに実装できて、ハンバーガーメニューをタップすると
こんな感じにメニューがでてきます。
右端の薄黒の箇所をタップすると開いたメニューが閉じます。
バッテンを用意せず、スライドさせたり黒いところをタップするだけで閉じることができるので、ユーザビリティも高いです。
「×」でしか閉じられないハンバーガーメニューは「×」を探すのが結構大変なんですよね。
このサンプルではハンバーガーやLOGOの背景色は#cccの薄いグレーにして、
そして、確実に入れるであろうサイトタイトル等を入れる箇所をセンタリングした状態で用意しました。
ハンバーガーメニューをモバイル（スマホ/タブレット）だけで表示させるには
ハンバーガーメニューをスマホやタブレットだけで利用したい場合は、@media screenで レスポンシブデザイン として記述してあげてください。
@media screen and (min-width:767px) {
#nav-drawer {
display:none;
}
}
横幅が767px以上のときにハンバーガー部分を見えなくするというサンプルです。
タブレットでも見えなくする場合、480pxくらいを指定してあげたら良さそうです。
逆に、大きいサイズのデバイスではハンバーガーメニューではなく通常のメニューを見せたいというときも上記レスポンシブデザインの応用で記載したりしてあげてください。
追記：ハンバーガーメニューでページ内リンクをクリックした時、メニュー画面を閉じる方法
今回紹介した html + css だけのハンバーガーメニューは、
- ページを開く→スイッチオフの状態
- メニュー押す→スイッチオン
- 黒い部分を押す→スイッチオフ
という仕様なので、ハンバーガーメニュー内にページ内リンクを仕込む場合、そのままではメニューを自動で閉じることができませんでした。
なので、”html + css だけ”という範囲を超えてしまいますが、jQueryを仕込んでページ内リンクの指定に”スイッチオフ”を追加することで解決します。
ハンバーガーメニュー内のページ内リンクは、ul li で作ることを仮定しコードを作りました。
<div id="nav-content">ここに中身を入れる</div>↑こう記載していたハンバーガーメニュー内のメニューコンテンツの箇所を、
<div id="nav-content">ここに中身を入れる
<ul>
<li><a href="#01">コンテンツ01</a></li>
<li><a href="#02">コンテンツ02</a></li>
</ul>
</div>こんな感じで ul li リスト式メニューのページ内リンクを作成。
そして、以下のjQueryを追加でコピペします。
<script>
$(function() {
$('#nav-content li a').on('click', function(event) {
$('#nav-input').prop('checked', false);
});
});
</script>以上！
これだけで、ハンバーガーメニューでページ内リンクをクリックした時にメニュー画面を自動で閉じることができます。
こんな感じに動作します。
cssとhtmlだけでハンバーガーメニューをコピペで実装するというところからは少し外れてしまいますが、ページ内リンクを仕込む場合はこの方法が最適かなと思ったので紹介しました。
ページ内リンクをつける場合はぜひ上記 jQuery もコピペして利用ください！
ちなみに上記サンプルの飛び先 html は、
<h2 id="01">コンテンツ01</h2>
・
・
・
・
<h2 id="02">コンテンツ02</h2>というような、h2見出しへページ内リンクで飛ばす形のサンプルを書きました。
ご自身がハンバーガーメニューから遷移させたいリンク先の設定で、柔軟に変更していただいて大丈夫です。
例えばリンクの指定を、
<a href="#contents01">コンテンツ01</a>として、飛び先を
<div id="contents01">コンテンツ01</div>という風にしても大丈夫です。
もくじへ戻るとか、問い合わせへジャンプとか、好きなように使ってもらえます。
以上、追記でした。
まとめ：cssとhtmlをコピペしてハンバーガーメニューを実装！
こんな感じで とても使いやすい、ごく一般的なスタイルのハンバーガーメニューを コピペ で簡単に実装できるようにしました。
良し悪しはさておき、ハンバーガーメニューってすごく一般的になりましたよね。
世の中的に利用頻度はそこまで高くないという記事を読んだりしましたが、レスポンシブデザインを実装するにあたってはとても便利なのでやっぱり使いたいテクニックの1つ。
注意点としては、ハンバーガーメニューの中にコンテンツを詰め込みすぎないことでしょうか・・！
「基本的なものをハンバーガーメニューの中に入れて、大切なリンク・コンテンツは表にバナー等でリンクを作るようにしましょう。」
サイトオーナーの意図とユーザビリティが合致して見てもらいたいコンテンツへのアクセスが増えるはずです。
良きWEBデザインをっ！
当記事のコードをデジタルハリウッド大学様の書籍に提供しました
ありがたいことに、学習用書籍で使うためのコードサンプルに選んでいただきました。
225ページのハンバーガーメニューの紹介項目、『Lesson7-04の「ヘッダーを作り込む」-「ハンバーガーメニューを実装する」』というページで紹介されています。
2020年2月26日発売！
良ければ手にとって参照ください。
