【Webデザイン CSS】レスポンシブでハンバーガー・リストをつくる。まだ使っていい？
Webサイトのメニューはモバイルで表示することを想定してデバイスのサイズでメニューのデザインを変えることが一般的になりました。
その時に活躍するのがCSS3から登場したメディアクエリというデバイスサイズ毎でCSSを切り分ける方法です。
PCとかタブレットの表示サイズはある程度余裕があり、デザインを考える時もいろんなバリエーションを想定できます。
しかし、スマホサイズになると極端にデザインが制限され使い勝手重視になります。
スマホサイズで、よりコンテンツの部分を多く見せるためにメニューは畳んでおいて使用する時に展開する作り方が多いのではないでしょうか。
ハンバーガーリストは有効か
ですが最近のUI、UXを考えた時にメニューを隠すことは使い勝手は良くないという結果が出ています。
４つ以内のメニューであればスマホサイズでも表示していた方がユーザビリティが向上する結果も出ています。
ですが、私が一番参考にしているWebサイト”Apple”。
なんだかんだ、スマホサイズでメニューを隠すデザインである通称ハンバーガーリストをAppleは自社Webサイトで使っています。
Appleが使っているということは何か理由があるはずだ。と私もまだ使っていきたいと思います。
See the Pen
Hamburger-list-menu by tatsuya☆ラボラトリ【 tatsuya-lab.com 】 (@labtatsuya)
on CodePen.
jQueryを使ったクラス名の付与
と言うわけでjQuery噛ませたJavaScriptを使った動的（動く部分はCSS3アニメーションですが）なハンバーガーリスト作ってみました。
jQuery
//WordPress用のjQueryの書き方
jQuery(function ($) {
//ここに普通のjQueryの書き方で。トグルアニメーション
$("nav").click(function() {
$(this).toggleClass("on");
});
});jQueryで使用するJavaScriptです。
私がミスりましてワードプレスで使用するバージョンの書き方でJavaScript書いております。
問題なく走っておりますのでこのままそっ閉じします。
そしてHTMLは<nav>の中に<ul>で構成します。
メディアクエリを使ってレスポンシブします。
モバイル・ファーストということでスマホで見たメニューから作っていきます。
CSS
nav ul{
list-style-type: none;
height: 0;
overflow: hidden;
transition: all .3s ease-out 0s;
}まずハンバーガーリストバーを作ります。タップするとシュッと降りてくる仕様にしますので<ul>の高さをゼロにしておきます。
CSSはheight: 0;にします。
セレクタはnav ulで高さをゼロにしていても中身は見えていますので非表示にします。overflow: hidden;を設定します。
トランジッション・アニメーション
そしてシュッと動かすためにtransition: all .3s ease-out 0s;を設定しておきます。
これはCSSアニメーションの一種でトランジッション・アニメーションです。transitionがプロパティになりまして内容がall（全てのプロパティに対して）.3s（0.3秒間）ease-out（最初早く後からゆっくり終わる動き）0s（始まりはゼロ秒でスタート）という意味になります。
プロパティの部分に変化があるとアニメーションしながら変化していきます。
この部分と連動するのが.on ulというセレクタです。
JavaScriptで<nav>をタップするとクラス名を付与する仕組みにしておきます。
CSS
.on ul{
height: calc(38px * 4);
transition: all .3s ease-out 0s;
}付与されたクラス名でプロパティを変化させて、アニメーションさせます。
まず高さをheight: calc(38px * 4);にします。そしてここにもアニメーションの設定のtransition: all .3s ease-out 0s;を記述しておきます。
これにより<nav>をタップする毎にクラス名がトグルされアニメーションが切り替わります。
そしてハンバーガーリストのアイコンを置いておきます。
方法は::beforeを使います。nav::beforeと設定し背景画像のhamburger_1.pngを表示させます。
クラス名.onの名前が付与されたら背景画像を切り替えます。.on::beforeでhamburger_2.pngに変更するようにします。
これで通常はハンバーガーアイコンが表示されていてタップしてメニューが展開されると×マークに差し変わります。
タップすると下記のように動きながら展開されます。
タブレット以上でメニューはハンバーガーバーに格納せず通常メニュー本体を表示させます。
nav ul{
display: flex;
overflow: visible;
}
nav::before{
display: none;
}