【簡単コピペ】CSSとjQueryを使ってハンバーガーメニューを実装しよう

CSSとjQueryを使ってハンバーガーメニューを実装したい。

本記事ではこのような悩みを解決。

実装方法について解説します。

実装サンプル

See the Pen
ハンバーガーメニュー
by Kohei (@kouk05)
on CodePen.0

実装サンプルです。

三本線をクリックすると閉じる(バツ・×)マークに変換されます。

上記のようなシンプルハンバーガメニューの実装手順は以下の通りです。

HTML

<button class="menu-trigger" id="menu01">
  <span></span>
  <span></span>
  <span></span>
</button>

ハンバーガーメニュー用のHTMLを準備。

上記コードをコピペします。

CSS

  .menu-trigger,
  .menu-trigger span {
    display: inline-block;
    transition: all 0.4s;
    box-sizing: border-box;
    position: relative;
    z-index: 100;
  }
  .menu-trigger {
    position: relative;
    width: 32px;//横幅
    height: 26px;//高さ
    background: none;
    border: none;
    appearance: none;
    cursor: pointer;
  }
  .menu-trigger span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 4px;//太さ
    background-color: #172a22;
    border-radius: 4px;//角丸
  }
  .menu-trigger span:nth-of-type(1) {
    top: 0;
  }
  .menu-trigger span:nth-of-type(2) {
    top: 11px;//中線の位置
  }
  .menu-trigger span:nth-of-type(3) {
    bottom: 0;
  }
/*クリックした後*/
  #menu01.active span:nth-of-type(1) {
    transform: translateY(11px) rotate(-45deg);//translateYに中線の位置を指定
  }
  #menu01.active span:nth-of-type(2) {
    opacity: 0;
  }
  #menu01.active span:nth-of-type(3) {
    transform: translateY(-11px) rotate(45deg);//translateYに中線の位置を指定
  }

次に上記CSSコードをコピぺしましょう。

ここまでの工程で一度ブラウザ確認。

三本線が表示されてたら成功です。

上記コメントアウトされてる部分で数値変更すると、中線の位置・太さ・高さ・形状を変更できます。

任意の値に変更してみましょう。

jQuery

		$(function() {
			$('.menu-trigger').on('click', function() {
				$(this).toggleClass('active');
                                 //任意の実行メソッド
				return false;
			});
		});

最後、スクリプト内に上記コードをコピペします。

※jQueryを使うので事前にライブラリを実装環境に読み込みます。

以上でハンバーガーメニューの実装完了です。

onclick関数内でハンバーガーメニューをクリックした後に出力する任意の実行メソッドなどを追記しましょう。

まとめ

ちょっとした動きをサイトに入れたい時、ハンバーガーメニューを実装してみましょう。

本記事で紹介したようにコピペで簡単に導入できます。

以上で解説を終わります。

Ads

関連記事

JavaScript プログラミング

開閉するアコーディオンリストがあり、一つ開いたら、他の開いていたのを閉じさせる方法

2020.07.15
776
JavaScript プログラミング

jqueryを使って要素を移動・追加・親要素を作成する方法【簡単テンプレ公開】

更新日:2020.04.09
407
JavaScript プログラミング

【簡単】slickを使い左右チラ見せ中央固定のカルーセルスライダーを実装する方法

2022.01.16
508
JavaScript プログラミング

【簡単】jQueryを使って、Instagramをサイトに埋め込む方法

2022.01.22
173