CSS JavaScript プログラミング

【jQuery&CSS初心者】レスポンシブなハンバーガメニューを実装する方法

 

イケゾー
この記事は、こんな人におすすめ!
・レスポンシブなハンバーガーメニューの作成方法を知りたい
・完成版ソースコードが欲しい
・jQuery初心者(どうやって使うの?なにができるの?)
・jQueryってなんだか難しそうって思っている
・jQueryの「toggleClass」の使い方を知りたい

 

このような疑問にお答えします。

 

本記事の内容

  • jQueryを使ったハンバーガメニュー の実装方法を解説
  • 完成版ソースコードを公開

 

筆者情報

Ikezooo

 
  • Web制作フリーランス
  • ブログ3年目。
  • 執筆記事数200本以上
  • ブログ実績:最高15万円
  • SEO検定3級保有
  • Twitterフォロワー3,100人
   

 

 

 

多くの人がスマホでWEBサイトを閲覧する時代において、限られたスペースにうまく情報を配置したいですよね。最近は、メニューを非表示にしておいて、画面の隅っこにメニューを開くボタンを配置する「ハンバーガーメニュー」が採用されています。

 

ハンバーガーメニューはレスポンシブ対応の代表的なモノなので、ぜひ抑えておきたいテクニックですね。タブレットやPCでは最上部やサイドにメニューが常に表示するのが一般的です。  

 

HTML/CSSだけを触っただけの方にとって、jQueryのこういった動きのあるモノってハードル高く感じます。僕もそうでした。しかし、仕組みを理解してから取り組んでみると、意外と大したことはありません。

 

当記事では、コードを掲載するだけでなく文章で噛み砕き、超初心者向けに丁寧に解説していきます。

 

コードはそのまま仕事に応用できる財産になりますので、ぜひ手を動かしてPC上で動かしてみてください。

 

初心者向けのテクニックまとめ
【jQuery完全版】初心者が最初に習得すべきテクニックまとめ|仕事でそのまま使えるサンプル有り

続きを見る

当ブログでは、WordPressテーマ 「ACTION(AFFINGER6)」 を使用しています。

 

完成物の確認

記事のトップに動画で載せましたが、実装していく内容はこちらです。

 

 

  • ハンバーガーボタン・・・ 「btn-gNav」をクリックすると画面幅いっぱいの「gNav-menu」が開きます。
  • レスポンシブ ・・・画面サイズがタブレット以上だと、画面上部にメニューが常に表示

 

注意点ですが、基本的なHTML,CSSは出来ていて、jQueryが使える状態であることを前提に進めいてきます。
不安な方はこちらの記事で確認してから始めましょう。

HTML/CSSの基本
初心者向け【WEBサイト模写のやり方】HTMLとCSSのテンプレートを作る方法を解説

続きを見る

 

ハンバーガーメニューの実装

では、実際に手を動かしてやっていきましょう!  

 

コピペ用完成ソースコード

See the Pen KKgpKKw by いけぞー@WEB始めたて先生 (@ikezoooblog) on CodePen.

 

 

HTMLの解説

では、HTMLを書いていきます。   ハンバーガーボタンを.btn-gNavとして、spanタグ3つで作成します。

<p class="btn-gNav">
  <span></span>
  <span></span>
  <span></span>
</p>

  メニューをgNav、リストをgNav-menuで作成します。

<nav id="gNav">
  <ul class="gNav-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>

 

 

CSSの解説

では、CSSを書いていきます。  

 

ハンバーガーメニューの仕組みを理解する

まずは、スマホ表示用のスタイルを書いていきます。   ハンバーガーボタンを作ります。横棒をspanで3つ作ります。

#hamburger .btn-gNav span{
	position: absolute;
	width: 100%;
	height: 4px;
	background: #666;
	border-radius: 10px;
	-webkit-transition: all 400ms;
	transition: all 400ms;
}
#hamburger .btn-gNav span:nth-child(1) {
	top:0;
}
#hamburger .btn-gNav span:nth-child(2) {
	top:10px;
}
#hamburger .btn-gNav span:nth-child(3) {
	top:20px;
}

 

 スマホ表示用のハンバーガーボタンを固定表示position: fixedします。

#hamburger .btn-gNav{
	position: fixed;
	top: 20px;
	right: 20px;
	width: 30px;
	height: 24px;
	z-index: 3;
}

 

メニューをposition: fixedで、画面の右に隠しておく。(非表示ではなく、画面の外に配置する感じ)

#gNav{
	position: fixed;
	top: 0;
	right: -100%;
	width: 100%;
	height: 100%;
	z-index: 2;
}

 

ハンバーガーボタンに「.open」のクラスがある時のみ、画面内に配置します。 このように、ハンバーガーボタンがクリックされた時に、メニューに「.open」の付け替えで、位置を画面外⇄画面内に変更します。

#gNav.open{
	right: 0px;
}

 

スマホ用のメニューは縦並びflex-direction: columnに配置します。

#gNav .gNav-menu{
	width: 100%;
	height:100%;
	display: flex;
	flex-direction: column;
	text-align: center;
}

 

あとは、タブレットやPC用のレイアウトを作成します。 メディアクエリで、ハンバーガーボタンを非表示、メニューを横並び(flex-direction: row)にします。

@media screen and (min-width: 600px){
	.btn-gNav{
		display: none;
	}
	#gNav{
		position: fixed;
		top: 0;
		right: 0;
		height: 50px;
	}
	#gNav .gNav-menu{
		display: flex;
		flex-direction: row;
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		right: 0;
		padding-left: 50px;
	}
	#gNav .gNav-menu li{
		padding-top: 15px;
	}
}

 

jQueryの解説

では、jQueryを書いていきます。2行で書けちゃいます 🙂  

 

jQueryの導入

jQuery導入に必須です。こちらで最新版を確認してください。つまずく事も多いので、心配な方は念のためチェックしてください!

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

 

ハンバーガーメニューの仕組みを理解する

まずは大切な仕組みの理解をしましょう。

  1. ハンバーガーメニュー「btn-gNav」「.show」の付け替えで、メニュー「.gNev-menu」の位置を画面外⇄画面内を変更します。
  2. ハンバーガーメニュー「btn-gNav」がクリックされたら、「btn-gNav」「.open」toggleClassで付け替えます。
  3. [おまけ]ハンバーガーメニューを開いた時に、ボタンを「閉じる」に変更するデザインをする場合 ハンバーガーメニュー「btn-gNav」がクリックされたら、「span」「.open」toggleClassで付け替えます。 デザインは色々やり方があるので、こちらが大変参考になりました。
    →参考にしたサイト

 

jQueryを書いてみよう

$(function() {
	$('.btn-gNav').on("click", function(){
		$(this).toggleClass('open');
		$('#gNav').toggleClass('open');
	});
});

 

まとめ

レスポンシブなハンバーガーメニューの作成方法を解説しました。

最初は難しく感じるかもしれませんが、動きの仕組みを理解すると、簡単だと思います。

記事の最下部にソースコードを掲載しておりますので、ぜひご利用ください。

 

イケゾー
最後まで読んでいただき、ありがとうございました。 ご不明点やご意見は、コメントやTwitterにて、お寄せください 🙂 では、またお会いしましょう

 

完成版ソースコードのダウンロードはこちらからどうぞ。

完成版データはこちら
  • この記事を書いた人

ikezooo

愛知県30歳のフリーランスエンジニア。 サイト制作とブログで生き抜く。 ブログでは、月10〜15万ほど稼いでいます。 SEO検定3級保有。

-CSS, JavaScript, プログラミング
-, , , ,