スマホサイトでよく見かける、最上部の左か右にある「三」のようなボタン。知っていますか？
タップするとメニューが出てくる、通称「ハンバーガーメニュー」と言います。ナビゲーションドロワーとも言うのかな。
WEBデザインが好きな人なら特に使ってみたいと思う機能ですよね。
そんなハンバーガーメニューをコピペだけで実装！js等は使わず cssだけで実装する方法を紹介します。
今回もコピペで使えるようにサンプルを用意しました！
ハンバーガーメニュー作成時の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くらいを指定してあげたら良さそうです。
逆に、大きいサイズのデバイスではハンバーガーメニューではなく通常のメニューを見せたいというときも上記レスポンシブデザインの応用で記載したりしてあげてください。
まとめ：cssとhtmlをコピペしてハンバーガーメニューを実装！
こんな感じで とても使いやすい、ごく一般的なスタイルのハンバーガーメニューを コピペ で簡単に実装できるようにしました。
良し悪しはさておき、ハンバーガーメニューってすごく一般的になりましたよね。
世の中的に利用頻度はそこまで高くないという記事を読んだりしましたが、レスポンシブデザインを実装するにあたってはとても便利なのでやっぱり使いたいテクニックの1つ。
注意点としては、ハンバーガーメニューの中にコンテンツを詰め込みすぎないことでしょうか・・！
「基本的なものをハンバーガーメニューの中に入れて、大切なリンク・コンテンツは表にバナー等でリンクを作るようにしましょう。」
サイトオーナーの意図とユーザビリティが合致して見てもらいたいコンテンツへのアクセスが増えるはずです。
良きWEBデザインをっ！
当記事のコードをデジタルハリウッド大学様の書籍に提供しました
ありがたいことに、学習用書籍で使うためのコードサンプルに選んでいただきました。
225ページのハンバーガーメニューの紹介項目、『Lesson7-04の「ヘッダーを作り込む」-「ハンバーガーメニューを実装する」』というページで紹介されています。
2020年2月26日発売！
良ければ手にとって参照ください。
