CODING

[jQuery] jQueryでハンバーガーメニューを作る

投稿日:2019年11月7日 更新日:


どうも、べ〜やんです。

今回は、jQueryを使ってハンバーガーメニューを作る方法を紹介します。





ハンバーガーメニューとは


ハンバーガーメニューとは、例えばヘッダーのメニューを隠しておいてアイコンをクリックするとメニューが表示させたりするもので、Webページをスマートフォンなどで見たときによく使われます。

See the Pen XWWqpro by beeyan (@orientado) on CodePen.


作り方


簡単な作り方をざっくり紹介します。

HTMLでメニューとアイコンを用意。

CSSで見た目を整えてメニューを見えなくしておく。

jQueryでアイコンをクリックすると動き出すように設定。


HTML

使用するHTMLは以下の通り

アイコンはborderでデザインするので中身は空です。

<!-- ナビメニュー -->
<nav class="menu">
 <ul class="menu__ul">
  <li class="menu__ul--item"><a href="#">メニュー1</a></li>
  <li class="menu__ul--item"><a href="#">メニュー2</a></li>
  <li class="menu__ul--item"><a href="#">メニュー3</a></li>
  <li class="menu__ul--item"><a href="#">メニュー4</a></li>
  <li class="menu__ul--item"><a href="#">メニュー5</a></li>
 </ul>
</nav>
<!-- アイコン --> 
<div class="icon">
  <span></span>
  <span></span>
  <span></span>
</div>

CSS

.menu {
  position: fixed;
  top: 0;
  right: 0;
  text-align: center;
  width: 100%;
  transform: translateY(-100%);
  transition: all 0.8s;
  z-index: 2;
}

position: fixed;で位置を固定。

位置はtop: 0; right: 0;で右上を起点にしています。

transform: translateY(-100%);で上に100%移動させて隠しています。

z-index: 2;で他の要素より上に来るように重なり順を設定。

transition: all 0.8s;ナビが動くスピードを設定。

.menu__ul {
  width: 100%;
  margin: 0 auto;
  padding: 0;
  background: skyblue;
}

メニューリストの色や大きさを指定。

.menu__ul--item {
  list-style-type: none;
  padding: 0;
  width: 100%;
  border-bottom: 1px solid #333;
}

list-style-type: none;でリストの点を消す。

border-bottom: 1px solid #333;下線を指定。

.menu__ul--item a {
  display: block;
  padding: 0.5em 0;
  color: #fff;
  text-decoration: none;
}

display: block;クリック出来る範囲を要素全体に広げる。

text-decoration: none;でリンクの下線を非表示。

.active {
  transform: translateY(0%);
}

メニューにactiveクラスを付け加えた時の設定。

transform: translateY(0%);でクリック後のメニューの位置を指定。

activeクラスはHTMLには記述しません。jQueryで後から追加します。

.icon {
  display: block;
  position: fixed;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  cursor: pointer;
  z-index: 3;
}

アイコンの位置を指定。

cursor: pointer;でカーソルが変化してクリック出来るとわかるようにする。

z-index: 3;で重なり順をメニューより上に。

.icon span {
  display: block;
  position: absolute;
  width: 30px;
  border-bottom: solid 2px;
  -webkit-transition: .30s;
  -moz-transition: .30s;
  transition: .30s;
}

iconspanborder-bottom: solid 2px;を指定します。

これがハンバーガーメニューのアイコンの3本線になります。

transition: .30s;で3本線が×になるまでのスピードを指定。

.icon span:nth-child(1) {
  top: 10px;
}
.icon span:nth-child(2) {
  top: 20px;
}
.icon span:nth-child(3) {
  top: 30px;
}

3本線のそれぞれの位置を指定。

.active span:nth-child(1) {
  top: 20px;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.active span:nth-child(2) {
  top: 20px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
}
.active span:nth-child(3) {
  top: 20px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
}

iconの要素にactiveクラスを付け加えた時の設定。

1本目の線をtransform: rotate(-45deg);傾ける。

2本目3本目はtransform: rotate(45deg);で一本目と反対方向に傾ける。

2本目と3本目の設定が全く同じなので2本の線が重なって一本に見えるようになる。

CSS全体↓

.menu {
  position: fixed;
  top: 0;
  right: 0;
  text-align: center;
  width: 100%;
  transform: translateY(-100%);
  transition: all 0.8s;
  z-index: 2;
}
.menu__ul {
  width: 100%;
  margin: 0 auto;
  padding: 0;
  background: skyblue;
}
.menu__ul--item {
  list-style-type: none;
  padding: 0;
  width: 100%;
  border-bottom: 1px solid #333;
}
.menu__ul--item a {
  display: block;
  padding: 0.5em 0;
  color: #fff;
  text-decoration: none;
}

.active {
  transform: translateY(-7%);
}

.icon {
  display: block;
  position: fixed;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  cursor: pointer;
  z-index: 3;
}
.icon span {
  display: block;
  position: absolute;
  width: 30px;
  border-bottom: solid 2px;
  -webkit-transition: .30s;
  -moz-transition: .30s;
  transition: .30s;
}
.icon span:nth-child(1) {
  top: 10px;
}
.icon span:nth-child(2) {
  top: 20px;
}
.icon span:nth-child(3) {
  top: 30px;
}

.active span:nth-child(1) {
  top: 20px;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.active span:nth-child(2) {
  top: 20px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
}
.active span:nth-child(3) {
  top: 20px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
}

jQuery

$(function() {
 $('.icon').click(function() {
  $(this).toggleClass('active');

 if ($(this).hasClass('active')) {
  $('.menu').addClass('active');
 } else {
  $('.menu').removeClass('active');
 }
 });
});

$('.icon').click(function()アイコンをクリックした時動き出すように指定。

$(this).toggleClass('active');でiconの要素にactiveクラスをつけたり外したりする。

if ($(this).hasClass('active'))はiconの要素がactiveクラスを持っているかどうかを判定。

$('.menu').addClass('active');menuクラスにもactiveクラスをつける。

elseifと反対だった時の指定。

$('.menu').removeClass('active');activeクラスを外す。

つまりiconの要素がactiveクラスを持つかどうかをクリックで切り替える、iconの要素がactiveクラスを持っていればmenuクラスにもactiveクラスを与え、iconの要素がactiveクラスを持っていなければmenuクラスactiveクラスを外す指定。


おわりに


今回は、jQueryを使ってハンバーガーメニューを作る方法を紹介しました。

レスポンスデザインの時などに便利ですね。



-CODING
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

[CSS] CSSで背景色と文字色を半々にする方法

どうも、べ〜やんです。 今回は、CSSで背景色と文字色が半々で入れ替わるようなデザインの作り方を紹介します。 おしゃれなデザイン 背景色と文字色が半々で入れ替わるような表現が出来ると、一段とおしゃれな …

[CSS] CSSで吹き出し風デザイン・三角形

どうも、べ〜やんです。 今回は、三角形の作り方と吹き出し風のデザインの作り方を紹介します。 三角形がぴょこって付いているアレです。 三角形 まずはCSSで三角形を作る方法をざっくり紹介します。 三角形 …

[CSS] :beforeと:afterでハンバーガーメニューを作る

どうも、べ〜やんです。 今回は、:beforeと:afterでハンバーガーメニューを作る方法を紹介します。 :beforeと:afterを使った方法 以前spanを使ったハンバーガーメニューの作り方も …

[HTML] articleとsectionの使い方

どうも、べ〜やんです。 今回は、HTMLのarticleとsectionの使い方を紹介します。 articleとsection div、article、sectionどれを使っても見た目上は同じ様に表 …

HTML文法チェックサービスMarkup Validation Service

どうも、べ〜やんです。 今回は、HTMLの文法にミスがないかを自動で判別してくれるサービスMarkup Validation Serviceを紹介します。 HTMLを独学で勉強していて自分の知識がどれ …