簡単に作れる！jQueryを使ったアニメーション付きハンバーガーメニューの実装方法

jQuery

今回は、jQueryを使ったハンバーガーメニューの実装方法について解説します。

ハンバーガーメニューは、スマートフォンやタブレットなどの小さい画面で、ナビゲーションメニューをコンパクトに表示するための便利な方法です。

この記事では、jQueryを使用して、簡単にハンバーガーメニューを作成する方法を紹介します。また、CSSアニメーションを使用して、メニューリストをスライドダウンさせ、見栄えを良くします。

初心者でも理解しやすいように、コードの解説も行いますので、ぜひ最後まで読んでチャンレジしてみてください！

サンプル

サンプルページ

HTML

<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ハンバーガーメニュー</title>
  <link rel="stylesheet" href="styles.css">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="scripts.js"></script>
</head>
<body>
  <header>
    <nav>
      <div class="hamburger">
        <span></span>
        <span></span>
        <span></span>
      </div>
      <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="#" class="close-menu">閉じる</a></li>
      </ul>
    </nav>
  </header>
  <!-- その他のコンテンツ -->
</body>
</html>

CSS

/* ページ全体にマージンを設定 */
body {
  margin: 0;
  font-family: Arial, sans-serif;
}

/* ヘッダーの背景色を設定 */
header {
  background-color: #333;
  position: relative;
}

/* ナビゲーションを横並びに配置 */
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
}

/* ハンバーガーアイコンのカーソルスタイルを変更 */
.hamburger {
  cursor: pointer;
}

/* ハンバーガーアイコンの各バーのスタイルを設定 */
.hamburger span {
  display: block;
  background-color: #fff;
  height: 2px;
  width: 25px;
  margin: 4px;
  transition: all 0.3s ease-in-out;
}

/* ハンバーガーアイコンがオープンした場合のスタイルを設定 */
.hamburger.open span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.open span:nth-child(2) {
  opacity: 0;
}

.hamburger.open span:nth-child(3) {
  transform: rotate(-45deg) translate(3px, -4px);
}

/* メニューリストのスタイルを設定 */
.menu {
  list-style: none;
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: #333;
  flex-direction: column;
  padding: 0;
  margin: 0;
}

/* メニューリストの各項目のスタイルを設定 */
.menu li {
  padding: 1rem 0;
  margin: 0;
}

/* メニューリストの各項目内のアンカータグのスタイルを設定 */
.menu li a {
  display: block;
  padding: 0;
  text-align: center;
  color: #fff;
  text-decoration: none;
  margin: 0;
}

/* 閉じるボタンのスタイルを設定 */
.close-menu {
  margin-top: auto;
  padding: 1rem 0;
  border-top: 1px solid #fff;
}

/* メニューリストがアクティブな場合のスタイルを設定 */
.menu.active {
  display: flex;
  animation: slide-down 0.3s ease-in-out forwards;
}

/* メニューリストをスライドダウンさせるアニメーションを定義 */
@keyframes slide-down {
  from {
    transform: translateY(-50%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

このCSSは、ハンバーガーメニューの実装で使用されるスタイルの一部を定義しています。

まず、body要素に対してマージンを設定し、フォントファミリーをArialとsans-serifに設定します。次に、header要素に背景色を設定し、相対的な位置を指定します。

nav要素には、display: flexを使用して、子要素を横並びに配置します。justify-content: space-betweenを使用することで、子要素間にスペースを挿入し、両端に子要素を配置します。align-items: centerを使用して、子要素を縦方向に中央揃えにします。

.hamburgerクラスは、カーソルスタイルを変更するために使用されます。.hamburger spanは、ハンバーガーアイコンの各バーのスタイルを定義します。display: blockを使用して、各バーを縦に配置し、高さと幅を指定します。marginを使用して、各バーの間にスペースを挿入します。transitionを使用して、各バーにアニメーションを追加します。

.hamburger.open span:nth-child(1)、.hamburger.open span:nth-child(2)、.hamburger.open span:nth-child(3)は、ハンバーガーアイコンがオープンした場合の各バーのスタイルを定義します。

.menuクラスは、メニューリストのスタイルを設定します。list-style: noneを使用して、リストマーカーを非表示にします。display: noneを使用して、メニューリストを非表示にします。position: absoluteを使用して、要素を絶対的な位置に配置します。topとleftを使用して、要素をページの上部に配置します。widthを使用して、要素の幅を100%に設定します。flex-direction: columnを使用して、子要素を縦方向に配置します。

.menu liクラスは、メニューリストの各項目のスタイルを設定します。paddingを使用して、各項目の上下にスペースを挿入します。

.menu li aクラスは、メニューリストの各項目内のアンカータグのスタイルを設定します。display: blockを使用して、アンカータグをブロックレベル要素に変換します。colorを使用して、テキストの色を指定します。text-decorationを使用して、下線を非表示にします。

.close-menuクラスは、閉じるボタンのスタイルを設定します。margin-topを使用して、閉じるボタンの上部にスペースを挿入します。paddingを使用して、閉じるボタンの上下にスペースを挿入します。border-topを使用して、上部に1pxの罫線を追加します。

.menu.activeクラスは、メニューリストがアクティブな場合のスタイルを設定します。display: flexを使用して、要素を表示します。animationを使用して、スライドダウンするアニメーションを追加します。

最後に、@keyframesルールを使用して、slide-downアニメーションを定義します。このアニメーションは、メニューリストをスライドダウンさせるために使用されます。fromとtoキーワードを使用して、アニメーションの開始と終了のスタイルを指定します。transformを使用して、要素を移動します。opacityを使用して、要素の透明度を変更します。これにより、メニューリストがスムーズに表示され、ユーザーがナビゲーションを行うことができます。

javascript

// メニューを閉じる関数を定義
function closeMenu() {
  // メニューのアクティブクラスを削除
  $('.menu').removeClass('active');
  // ハンバーガーアイコンのopenクラスを削除
  $('.hamburger').removeClass('open');
}

// 閉じるボタンをクリックしたときの処理を定義
$('.close-menu').on('click', function() {
  // メニューを閉じる関数を呼び出し
  closeMenu();
});

// メニュー項目をクリックしたときの処理を定義
$('.menu li a').on('click', function() {
  // メニューを閉じる関数を呼び出し
  closeMenu();
});

このコードは、jQueryを使用してハンバーガーメニューを作成する際に使用されるコードの一部です。ここでは、メニューを閉じるための関数を定義し、閉じるボタンとメニュー項目がクリックされたときに呼び出します。

まず、function closeMenu()という名前の関数を定義します。この関数は、メニューを閉じるための処理を実行します。具体的には、.menuと.hamburgerクラスから、それぞれの要素のアクティブクラスとopenクラスを削除します。

次に、閉じるボタンの要素にクリックイベントを追加します。これは、.close-menuクラスの要素を選択して、それがクリックされたときにcloseMenu()関数を呼び出すことを意味します。これにより、閉じるボタンがクリックされた場合、メニューが閉じられます。

同様に、メニュー項目の要素にもクリックイベントを追加します。これは、.menu li aクラスの要素を選択して、それがクリックされたときにcloseMenu()関数を呼び出すことを意味します。これにより、メニュー項目がクリックされた場合、メニューが閉じられます。

このように、ハンバーガーメニューの実装では、閉じるボタンとメニュー項目がクリックされたときにメニューを閉じる関数を呼び出すことが重要です。これにより、ユーザーがスムーズにナビゲーションを行うことができます。

まとめ

以上で、jQueryを使ったハンバーガーメニューの実装方法について解説しました。

ハンバーガーメニューは、スマートフォンやタブレットなどの小さい画面で、ナビゲーションメニューをコンパクトに表示するための便利な方法です。

この記事では、jQueryとCSSアニメーションを使用して、簡単にハンバーガーメニューを作成する方法を紹介しました。

初心者でも理解しやすいように、コードの解説を行いましたので、ぜひ実際にコードを書いて試してみてください。

ハンバーガーメニューを実装することで、ユーザーがスマートフォンやタブレットでサイトを閲覧した際に、スペースを節約し、使いやすいナビゲーションメニューを提供することができます。