ハンバーガーメニュー jqueryなし

【jQuery不要！】シンプルで軽量！JavaScriptだけで作るハンバーガーメニュー

近年、スマホユーザーの増加に伴い、ウェブサイトをモバイルフレンドリーにすることが重要になっています。その中でも、ハンバーガーメニューは、限られた画面スペースを有効活用できるため、スマホサイトで頻繁に採用されています。この記事では、jQueryなどの外部ライブラリを使用せず、JavaScriptだけでハンバーガーメニューを実装する方法を解説します。初心者の方でも分かりやすいよう、コードを細かく解説しながら、シンプルで軽量なハンバーガーメニューの作り方をステップごとにご紹介します。

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

ハンバーガーメニューは、3本線のアイコンをクリックするとナビゲーションメニューが開閉するUIデザインパターンです。その見た目がハンバーガーに似ていることから、このように呼ばれています。

スマホサイトにおけるメリット

ハンバーガーメニューは、特にスマホサイトにおいて以下のメリットがあります。

画面の有効活用：画面の小さなスマホでは、ハンバーガーメニューを採用することで、ナビゲーションメニューをコンパクトに表示できます。
スッキリとしたデザイン：ナビゲーションメニューを非表示にすることで、コンテンツ領域を広く使うことができ、スッキリとしたデザインを実現できます。

具体的な使用例

多くのウェブサイト、特に企業サイトやECサイト、ブログなどで広く利用されています。

JavaScriptでハンバーガーメニューを実装する方法

jQueryを使わずに、JavaScriptだけでハンバーガーメニューを実装する方法を、HTML、CSS、JavaScriptに分けて解説します。

HTMLの基本構造

まずは、ハンバーガーメニューを実装するためのHTMLの基本構造を作成します。


<header>
  <div class="container">
    <h1 class="site-title">サイトタイトル</h1>
    <button class="hamburger-menu">
      <span></span>
      <span></span>
      <span></span>
    </button>
    <nav class="global-nav">
      <ul>
        <li><a href="#">メニュー1</a></li>
        <li><a href="#">メニュー2</a></li>
        <li><a href="#">メニュー3</a></li>
      </ul>
    </nav>
  </div>
</header>

.hamburger-menu: ハンバーガーメニューボタン
.global-nav: グローバルナビゲーションメニュー

CSSの基本設定

次に、ハンバーガーメニューとナビゲーションメニューのスタイルを設定します。


/* ハンバーガーメニューのスタイル */
.hamburger-menu {
  display: block;
  width: 30px;
  height: 30px;
  position: relative;
  cursor: pointer;
  /* ハンバーガーメニューボタンの見た目を整える */
  background-color: transparent;
  border: none;
  padding: 0;
}

.hamburger-menu span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: #333;
  position: absolute;
  transition: all 0.3s ease-in-out;
}

.hamburger-menu span:nth-child(1) {
  top: 8px;
}

.hamburger-menu span:nth-child(2) {
  top: 15px;
}

.hamburger-menu span:nth-child(3) {
  top: 22px;
}

/* ナビゲーションメニューのスタイル */
.global-nav {
  display: none; /* 初期状態では非表示にする */
}

.global-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.global-nav li {
  margin: 0;
  padding: 0;
}

.global-nav a {
  display: block;
  padding: 10px 0;
  text-decoration: none;
  color: #333;
}

/* メディアクエリを使ったレスポンシブ対応 */
@media screen and (min-width: 768px) {
  .hamburger-menu {
    display: none; /* PCサイズではハンバーガーメニューを非表示にする */
  }

  .global-nav {
    display: block; /* PCサイズではナビゲーションメニューを表示する */
  }
}

@media: メディアクエリを使用することで、画面サイズに応じて表示を切り替えています。

JavaScriptの実装

最後に、ハンバーガーメニューの開閉動作をJavaScriptで実装します。


const hamburgerMenu = document.querySelector('.hamburger-menu');
const globalNav = document.querySelector('.global-nav');

hamburgerMenu.addEventListener('click', () => {
  hamburgerMenu.classList.toggle('active'); // ハンバーガーメニューの開閉状態をクラスで制御
  globalNav.classList.toggle('active'); // ナビゲーションメニューの開閉状態をクラスで制御
});

addEventListener: クリックイベントを検知し、メニュー開閉処理を実行します。
classList.toggle(): 要素にクラスがある場合は削除し、ない場合は追加します。

アニメーションを追加して、より使いやすく

CSSのtransitionプロパティを使えば、ハンバーガーメニューの開閉時にアニメーションを追加できます。


/* CSS */
.global-nav {
  /* ... */
  transition: height 0.3s ease-in-out; /* アニメーションを追加 */
}

JavaScriptを使って、さらに複雑なアニメーションを実装することも可能です。

まとめ｜jQueryなしでも簡単に実装できる！

この記事では、jQueryなどの外部ライブラリを使わずに、JavaScriptだけでハンバーガーメニューを実装する方法を紹介しました。ハンバーガーメニューは、スマホサイトにおいて、ユーザーエクスペリエンスを向上させるための有効なUIです。

今回の実装方法では、JavaScriptのコード量も少なく、初心者の方でも比較的容易に実装できるかと思います。ぜひ、今回の記事を参考に、ご自身のウェブサイトにもハンバーガーメニューを実装してみてください。

参考文献

ハンバーガーメニューに関するQ&A

Q1: ハンバーガーメニューはSEOに影響しますか？

A1: ハンバーガーメニューは、それ自体がSEOに直接影響することはありません。ただし、適切に実装しないと、検索エンジンがサイトの構造を理解しにくくなり、SEOに悪影響を与える可能性があります。ナビゲーションメニューをJavaScriptで後から展開するのではなく、HTML上に記述することで、クローラーが正しく認識できるようになります。また、CSSで初期状態を非表示にする場合は、`:focus-within`などを活用して、キーボード操作時にもナビゲーションメニューが表示されるように配慮しましょう。

Q2: ハンバーガーメニューのクリックエリアが狭くて押しづらいのですが？

A2: ハンバーガーメニューのボタン要素に、CSSで上下左右に余白を設定することで、クリックエリアを広くすることができます。例えば、以下のCSSを追加すると、クリックエリアを上下左右に10pxずつ広げることができます。


.hamburger-menu {
  /* ... */
  padding: 10px; /* クリックエリアを広げる */
}

Q3: アニメーションをもっと滑らかにしたい場合は？

A3: CSSの`transition`プロパティを調整することで、アニメーションを滑らかにすることができます。例えば、`ease-in-out`の値を`cubic-bezier()`関数を使って細かく調整したり、アニメーションの時間を変更したりすることで、より自然な動きを実現できます。

その他の参考記事:ハンバーガーメニュー jquery