昨今、スマホ対応サイトではハンバーガーメニューをよく見かけます。ハンバーガーメニューとは三本線でメニューを開閉することができるナビゲーションメニューのことです。
図１ ハンバーガーメニューの使用例
図１の赤枠で囲んだところがハンバーガーメニュー部分です。
今回はそんなハンバーガーメニューの作成方法をcssとjQueryを用いて解説していきます。さらに、レスポンシブなハンバーガーメニューの実装例を紹介します。
なぜハンバーガーメニューなのか？
PCでウェブサイトを開くと、ヘッダーやサイドにメニューが並んでいることが多いと思います。しかし、スマホ画面のような小さい画面でこのようにメニューがたくさん並んでいると、コンテンツの表示エリアを大きく割いてしまい好ましくありません。
ですが、ハンバーガーメニューを使えば必要に応じてメニューを表示非表示させることができます。つまり、スマホ画面のような小さい画面でもコンテンツの表示エリアを大きく獲得することができるのです。
スマホが普及し始めた当初は、ユーザにハンバーガーメニューがメニューのボタンだと認識されないという短所がありました。しかし、多くのユーザがスマホを所持している現在において、その短所は無くなりつつあると言えるでしょう。
さらに言えば、最近はサイトのレスポンシブ化が必要とされており、スマホ画面でハンバーガーメニューを実装することはとても重要なことだと言えます。
では、次に実際の作成方法について解説していきます。
ハンバーガーメニューの作成方法
基本的なハンバーガーメニューの作成方法
まずはjQueryとCSSを用いてハンバーガーメニューを作ってみました。例１を見てください。
例１ 基本的なハンバーガーメニューを作成する
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>
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%
}
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);
});
});
CSSでは主に位置の調整と色付けを行っています。ハンバーガーメニューのボタンは画像を挿入しているのではなく、色分けで表現しています。さらにCSSをいじれば、独創性のあるハンバーガーメニューができるかもしれません。
jQueryではボタンを押した際のハンバーガーメニューの挙動を指定しています。今回はメニューバーの位置を変えることで表示非表示させる仕組みを実装しました。
レスポンシブなハンバーガーメニューの作成方法
「PC画面ではヘッダーメニューに、スマホ画面では折りたたみのできるハンバーガーメニューに」という使い分けができれば、サイトレイアウトの引き出しが増えると思います。
ここでは、そんなレスポンシブなハンバーガーメニューの作り方を紹介します。例２を見てください
例２のコード
HTML、jQueryは例１と同様
CSS
#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%
}
}
CSSのコードを画面サイズごとに変えることで、メニューの形を分けることができました。
このように画面サイズごとにCSSのコードを分けることで、画面サイズにふさわしいサイトレイアウトを適応させることができるので、非常に有用性が高いです。
まとめ
以上、jQueryとCSSを用いたハンバーガーメニューの作り方を紹介してきました。
ただし注意点としてスマホ画面では必ずハンバーガーメニューというわけではありません。ユーザの視点に立って、必要であれば適宜実装していくことが望ましいです。
ハンバーガーメニューが実装できれば、サイトエリアの節約になりますし、ページレイアウトの引き出しを増やすことができるので、ぜひ理解しておきましょう。
