HTML・CSS・JavaScriptで作る実用的なメガメニューの作り方

Webサイトのナビゲーションメニューに「メガメニュー」を取り入れることで、ユーザーにとって格段に情報が見やすくなります。ECサイトや大規模な情報サイトなどでよく見かけるこのUIパターンは、一見すると難しそうに感じますが、HTML・CSS・JavaScriptの基礎があれば、誰でも実装可能です。この記事では、シンプルで実用的なメガメニューの作り方を、コード付きで丁寧に解説します。

メガメニューとは？

メガメニューとは、通常のドロップダウンメニューよりも多くの情報を階層的に表示できるナビゲーションメニューです。ユーザーがナビゲーションにマウスを乗せると、大きなボックスが表示され、その中にカテゴリごとのリンクや画像がまとめられています。

メガメニューの特徴

  • 横幅いっぱいに広がる大きなメニュー
  • 複数のカラムで構成されている
  • テキストリンクや画像、アイコンなどの要素を組み込める
  • 情報が視覚的に整理されており、直感的に目的のページへアクセスできる

メガメニューのHTML構造を作る

まずはメガメニューのHTMLマークアップから始めましょう。以下のような基本構造を作成します。

<nav class="main-nav">
  <ul class="menu">
    <li class="menu-item">
      <a href="#">サービス</a>
      <div class="mega-menu">
        <div class="column">
          <h3>Web制作</h3>
          <ul>
            <li><a href="#">ホームページ作成</a></li>
            <li><a href="#">LP制作</a></li>
          </ul>
        </div>
        <div class="column">
          <h3>マーケティング</h3>
          <ul>
            <li><a href="#">SEO対策</a></li>
            <li><a href="#">SNS運用</a></li>
          </ul>
        </div>
      </div>
    </li>
    <li class="menu-item"><a href="#">料金</a></li>
    <li class="menu-item"><a href="#">お問い合わせ</a></li>
  </ul>
</nav>

この構造では、li.menu-item に対して .mega-menu を子要素として配置することで、ホバー時にメニューが表示されるようにします。

CSSでメガメニューの見た目を整える

次に、CSSでスタイルを整えましょう。表示・非表示の制御や、カラムの横並びなどを定義します。

/* ナビゲーション全体のスタイル */
.main-nav {
  background-color: #333;
}

.menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.menu-item {
  position: relative;
}

.menu-item > a {
  display: block;
  padding: 15px 20px;
  color: white;
  text-decoration: none;
}

.mega-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  width: 600px;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  z-index: 1000;
  display: none;
}

.menu-item:hover .mega-menu {
  display: flex;
}

.mega-menu .column {
  flex: 1;
  margin-right: 20px;
}

.mega-menu .column:last-child {
  margin-right: 0;
}

.mega-menu h3 {
  margin-top: 0;
}

.mega-menu ul {
  list-style: none;
  padding: 0;
}

.mega-menu a {
  color: #333;
  text-decoration: none;
  display: block;
  padding: 5px 0;
}

このスタイルでは、hoverによって .mega-menu を表示し、Flexbox でカラムを横並びにしています。シンプルで見やすい設計です。

JavaScriptでホバーイベントを強化（スマホ対応）

JavaScriptは必須ではありませんが、スマートフォンなどタッチデバイス対応やアクセシビリティ改善のために、以下のようなコードで補強します。

document.addEventListener('DOMContentLoaded', function() {
  const menuItems = document.querySelectorAll('.menu-item');

  menuItems.forEach(function(item) {
    item.addEventListener('mouseenter', function() {
      const menu = item.querySelector('.mega-menu');
      if (menu) menu.style.display = 'flex';
    });

    item.addEventListener('mouseleave', function() {
      const menu = item.querySelector('.mega-menu');
      if (menu) menu.style.display = 'none';
    });

    // スマホタップでメガメニュー表示
    item.querySelector('a').addEventListener('click', function(e) {
      const menu = item.querySelector('.mega-menu');
      if (menu) {
        e.preventDefault();
        menu.style.display = menu.style.display === 'flex' ? 'none' : 'flex';
      }
    });
  });
});

このスクリプトは、マウスホバーでもタッチでもメニューが開くようにし、ユーザー操作性を高めています。

完成例

レスポンシブデザイン対応のポイント

画面サイズが狭いときにメガメニューを開くと見づらくなるため、CSSメディアクエリでスタイルを調整しましょう。

@media (max-width: 768px) {
  .mega-menu {
    position: static;
    width: 100%;
    flex-direction: column;
    box-shadow: none;
  }
}

この設定により、スマホでは縦並びのメニューとして表示され、視認性と操作性を確保できます。

よくある失敗と解決法

メニューがはみ出す

position: absolute を使っているため、親要素の幅が足りないと画面外にはみ出すことがあります。親要素に position: relative を指定しておくのがポイントです。

JavaScriptが動かない

イベントリスナーが正しく設定されていない、またはHTMLの読み込みタイミングが合っていないことが原因のことが多いです。DOMContentLoaded を使うことで回避できます。

まとめ：メガメニューでユーザビリティを向上させよう

HTML・CSS・JavaScriptを組み合わせることで、見た目にも美しく、ユーザーにとって使いやすいメガメニューが実装できます。とくに情報量が多いサイトでは、メガメニューの導入がナビゲーションの効率を大きく向上させるでしょう。この記事で紹介したコードをベースに、自サイトに合わせたカスタマイズに挑戦してみてください。

タイトルとURLをコピーしました