Code CSS JavaScript

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

2020年12月1日

こんにちは、イケゾーです。

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

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

HTML/CSSだけを触っただけの方にとって、jQueryのこういった動きのあるモノってハードル高く感じます。僕もそうでした。しかし、仕組みを理解してから取り組んでみると、意外と大したことはありません。なので当記事では、コードを掲載するだけでなく文章で噛み砕き、超初心者向けに丁寧に解説していきます。

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

この記事はこんな人におすすめ!

  • jQuery初心者(どうやって使うの?なにができるの?)
  • jQueryってなんだか難しそうって思っている
  • jQueryでハンバーガーメニューの実装をしたい
  • jQueryの「toggleClass」の使い方を知りたい
 
初心者向けのテクニックまとめ
【jQuery完全版】初心者が最初に習得すべきテクニックまとめ|仕事でそのまま使えるサンプル有り

続きを見る

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

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

このような流れで実装していきますね。

 

完成物の確認

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

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

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

   

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

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

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

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

ご訪問ありがとうございます。 Ikezoooブログ「WEB積み上げ先生」を運営している30歳です。こちらでは、完全初心者からのプログラミング学習を発信しています。

-Code, CSS, JavaScript
-, , , ,

© 2021 IkezoooBlog