ハンバーガーメニューは、今やスマートフォンサイトやタブレットサイトにて広く普及されているメニューの表示形式であり、中にはPCサイトでも設置されている事例さえ見られます。かつては、これがメニューだと認識されないという短所もありましたが、ハンバーガーメニューのデザインが一般的に認知広まったことで、操作方法と、操作することによって期待できる表示結果を多くの人が予想できるようになりました。
スマートフォンのような表示領域が小さいデバイスであっても、コンテンツの表示領域を妨げることなく、特に、カテゴリ数等のメニューが多いサイトに相性が良いハンバーガーメニューについて、レスポンシブ対応で簡単に作成できる方法をまとめました。
ハンバーガーメニューとは？
赤枠で囲んだところがハンバーガーメニューです。ヘッダーメニュー内の左隅もしくは右隅に設置されていることがほとんどです。
ハンバーガーメニューの作成方法
ハンバーガーメニューの作成は、jQueryの利用が簡単です。まずはHTMLを作成し、タップ（クリック）操作によってclassを追加・削除する処理を記述します。そしてCSSでレイアウトを調整します。
基本的なハンバーガーメニュー
サンプル
早速ですが、サンプルをご用意致しました。画面右隅にハンバーガメニューを設置しており、タップ（クリック）操作でメニューが開きます。QRコードから、是非スマートフォンやタブレットからもご確認ください。
HTML
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <div id="wrapper"> <span></span> <span></span> <span></span> <nav id="global-navi"> <ul class="menu"> <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> </div>
※aishipシリーズにて作成する場合、上記のHTMLソースを機能パーツにて作成します。
サイト管理 > 機能パーツ作成 > 新規作成でテキストを選択し機能設定（テキスト）のコンテンツに上記HTMLを記入します。
jQuery
$(function(){
$(".btn-gnavi").on("click", function(){
// ハンバーガーメニューの位置を設定
var rightVal = 0;
if($(this).hasClass("open")) {
// 位置を移動させメニューを開いた状態にする
rightVal = -300;
// メニューを開いたら次回クリック時は閉じた状態になるよう設定
$(this).removeClass("open");
} else {
// メニューを開いたら次回クリック時は閉じた状態になるよう設定
$(this).addClass("open");
}
$("#global-navi").stop().animate({
right: rightVal
}, 200);
});
});
※aishipシリーズにて作成する場合、サイト管理 > ユーザーJS編集もしくは、
サイト管理 > レイアウト作成 > 該当レイアウトの編集画面内、head内挿入箇所に設置します。
CSS
#wrapper nav {
position: fixed;
top: 0;
right: -300px;
width: 300px;
height: 100%;
padding-top: 50px;
background:#333;
font-size: 16px;
box-sizing: border-box;
z-index: 2
}
#wrapper nav ul li {
display:block;
padding: 20px 28px
}
#wrapper nav ul li a {
text-decoration: none;
color: #ddd
}
#wrapper .btn-gnavi {
position: fixed;
top: 20px;
right: 20px;
width: 30px;
height: 24px;
z-index: 3;
box-sizing: border-box;
cursor: pointer;
-webkit-transition: all 400ms;
transition: all 400ms
}
#wrapper .btn-gnavi span {
position: absolute;
width: 30px;
height: 4px;
background: #666;
border-radius: 10px;
-webkit-transition: all 400ms;
transition: all 400ms
}
#wrapper .btn-gnavi span:nth-child(1) {
top: 0
}
#wrapper .btn-gnavi span:nth-child(2) {
top: 10px
}
#wrapper .btn-gnavi span:nth-child(3) {
top: 20px
}
#wrapper .btn-gnavi.open span {
background: #fff
}
#wrapper .btn-gnavi.open span {
width: 24px;
}
#wrapper .contents section p {
position: absolute;
top: 50%;
width: 30%;
line-height: 1.4;
font-size: 20px;
color: #fff;
}
#wrapper .contents section:nth-child(odd) p {
left: 10%
}
#wrapper .contents section:nth-child(even) p {
right: 10%
}
※aishipシリーズにて作成する場合、サイト管理 > ユーザーCSS編集もしくは、
サイト管理 > レイアウト作成 > 該当レイアウトの編集画面内、head内挿入箇所に設置します。
以上にてサンプルのようなハンバーガーメニューの完成です。
レスポンシブなハンバーガーメニュー
表示領域の広いPC画面ではヘッダーにメニューを常時表示し、スマートフォン画面ではハンバーガーメニューにする、という方法をご紹介します。「基本的なハンバーガーメニュー」にてご案内した内容に、CSSを少し追加するだけで完成します。
サンプル
レスポンシブ対応ハンバーガーメニューのサンプルです。PCにてブラウザの幅を広げたり狭めたりしてご確認ください。
HTMLとjQuery
「基本的なハンバーガーメニュー」にてご案内した内容と同上の為、割愛致します。
（記述箇所に戻りたい場合はこちらから⇒HTML/jQuery）
CSS
画面サイズが600pxを超える場合はPC用のヘッダーメニュー、600px以下の場合はハンバーガーメニューに切り替わる例です。600pxでの切り替えは17行目のメディアクエリにて指定します。「基本的なハンバーガーメニュー」にてご紹介したCSSに対し、1～17行目と104行目を追加しています。
#global-navi {
background:#333;
position: fixed;
top: 0;
right: 0px;
width: 100%;
}
#wrapper nav ul li{
display:inline-block;
font-size: 16px;
padding: 30px 20px 25px 28px;
}
#wrapper nav ul li a{
color: #ddd
}
@media screen and (max-width: 600px) {
#wrapper nav {
position: fixed;
top: 0;
right: -300px;
width: 300px;
height: 100%;
padding-top: 50px;
background:#333;
font-size: 16px;
box-sizing: border-box;
z-index: 2
}
#wrapper nav ul li {
display:block;
padding: 20px 28px
}
#wrapper nav ul li a {
text-decoration: none;
color: #ddd
}
#wrapper .btn-gnavi {
position: fixed;
top: 20px;
right: 20px;
width: 30px;
height: 24px;
z-index: 3;
box-sizing: border-box;
cursor: pointer;
-webkit-transition: all 400ms;
transition: all 400ms
}
#wrapper .btn-gnavi span {
position: absolute;
width: 30px;
height: 4px;
background: #666;
border-radius: 10px;
-webkit-transition: all 400ms;
transition: all 400ms
}
#wrapper .btn-gnavi span:nth-child(1) {
top: 0
}
#wrapper .btn-gnavi span:nth-child(2) {
top: 10px
}
#wrapper .btn-gnavi span:nth-child(3) {
top: 20px
}
#wrapper .btn-gnavi.open {
-webkit-transform: rotate(180deg);
transform: rotate(180deg)
}
#wrapper .btn-gnavi.open span {
background: #fff
}
#wrapper .btn-gnavi.open span {
width: 24px;
}
#wrapper .contents section p {
position: absolute;
top: 50%;
width: 30%;
line-height: 1.4;
font-size: 20px;
color: #fff;
text-shadow: 0 0 6px #666
}
#wrapper .contents section:nth-child(odd) p {
left: 10%
}
#wrapper .contents section:nth-child(even) p {
right: 10%
}
}
※aishipシリーズにて作成する場合、サイト管理 > ユーザーCSS編集もしくは、
サイト管理 > レイアウト作成 > 該当レイアウトの編集画面内、head内挿入箇所に設置します。
まとめ
いかがでしたでしょうか。冒頭でも述べました通り、ハンバーガーメニューは広く普及されている状況です。しかし、これがメニューだと分かりづらい人も一定数いるということも見込んでおく必要もあります。サイトを設計する際はハンバーガーメニューだけに頼るのではなく、見落とされたくないメニューは、コンテンツの合間やフッター等のエリアを活用して、常に表示させておく工夫も必要です。
ハンバーガーメニューが実装方法を理解しておけば、サイトのデザインやレイアウト構成にて表現の幅を増やすことにも繋がりますので、ぜひ理解しておきましょう。
