【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

ECサイト構築クラウド型プラットフォーム

【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

モバイルファーストマーケティングラボ

【jQuery&CSS】レスポンシブなハンバーガーメニューを作成する

【jQuery&CSS】レスポンシブなハンバーガーメニューを作成する

昨今、スマホ対応サイトではハンバーガーメニューをよく見かけます。ハンバーガーメニューとは三本線でメニューを開閉することができるナビゲーションメニューのことです。
図1 ハンバーガーメニューの使用例

ハンバーガーメニューの使用例

図1の赤枠で囲んだところがハンバーガーメニュー部分です。
今回はそんなハンバーガーメニューの作成方法をcssとjQueryを用いて解説していきます。さらに、レスポンシブなハンバーガーメニューの実装例を紹介していきます。

なぜハンバーガーメニューなのか?

PCでウェブサイトを開くと、ヘッダーやサイドにメニューが並んでいることが多いと思います。しかし、スマホ画面のような小さい画面でこのようにメニューがたくさん並んでいると、コンテンツの表示エリアを大きく割いてしまい好ましくありません。

ですが、ハンバーガーメニューを使えば必要に応じてメニューを表示非表示させることができます。つまり、スマホ画面のような小さい画面でもコンテンツの表示エリアを大きく獲得することができるのです。

スマホが普及し始めた当初は、ユーザにハンバーガーメニューがメニューのボタンだと認識されないという短所がありました。しかし、多くのユーザがスマホを所持している現在において、その短所は無くなりつつあると言えるでしょう。

さらに言えば、最近はサイトのレスポンシブ化が必要とされており、スマホ画面でハンバーガーメニューを実装することはとても重要なことだと言えます。

では、次に実際の作成方法について解説していきます。

ハンバーガーメニューの作成方法

基本的なハンバーガーメニューの作成方法

まずはjQueryとCSSを用いてハンバーガーメニューを作ってみました。例1を見てください。
例1 基本的なハンバーガーメニューを作成する
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画面ではヘッダーメニューに、スマホ画面では折りたたみのできるハンバーガーメニューに」という使い分けができれば、サイトレイアウトの引き出しが増えると思います。

ここでは、そんなレスポンシブなハンバーガーメニューの作り方を紹介します。例2を見てください

例2 レスポンシブなハンバーガーメニューを作成する

例2のコード
HTML、jQueryは例1と同様
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
}
/*スマホ画面で例1のハンバーガーメニューの形にする*/
@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を用いたハンバーガーメニューの作り方を紹介してきました。

ただし注意点としてスマホ画面では必ずハンバーガーメニューというわけではありません。ユーザの視点に立って、必要であれば適宜実装していくことが望ましいです。

ハンバーガーメニューが実装できれば、サイトエリアの節約になりますし、ページレイアウトの引き出しを増やすことができるので、ぜひ理解しておきましょう。

”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。
機能のご確認はお気軽にお問合せ、もしくは2週間無料お試し利用で。
aishipRの無料体験、お問合わせはお気軽に。説明会・資料請求も受付中。
0120-173-163
0120-173-163
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+