マルチレベルのドロップダウンメニューの作成

この記事では、HTML、CSS、JavaScriptを使用してマルチレベルのドロップダウンメニューを作成する方法について説明します。このようなメニューをどのように便利でモダンにするかを段階的に分析します。初心者でも、これらの手順に従って独自のドロップダウンメニューを作成できます。さあ始めましょう！

マルチレベル ドロップダウン メニューとは

ドロップダウンメニューは、ユーザーがサイト内を素早く移動できるようにするインターフェース要素です。マルチレベルメニューには、互いにネストできるサブメニューがあります。このようなメニューは、カテゴリやサブカテゴリが多い大規模なサイトでよく見られます。このようなメニューの例は、オンラインストアや企業ポータルのサイトで見ることができます。

ドロップダウンメニューのHTML構造

マルチレベルのドロップダウンメニューを作成するには、HTMLから始めます。リストとサブ項目の要素 <ul> と <li> を使用して、基本的なメニュー構造を作成します。

<nav class="menu">
  <ul>
    <li><a href="# ">ホーム</a></li>
    <li><a href="# ">サービス</a>
      <ul class="submenu">
        <li><a href="# ">ウェブ開発</ a></ li>
        <li><a href="# ">モバイルアプリ</ a>
          <ul class="submenu">
            <li><a href="#">iOS</a></li>
            <li><a href="#">Android</a></li>
          </ul>
        </li>
        <li><a href="#">SEO</a></li>
      </ul>
    </li>
    <li><a href="# ">連絡先</a></li>
  </ul>
</nav>

ここでは、ネストされたリスト <ul> を使用して、マルチレベルのメニュー項目を作成します。各<li>には、サブメニューを形成するためのリンク（<a>）とネストされたリスト（<ul>）を含めることができます。

CSSを使用したメニューのスタイル

ここで、メニューが美しく見え、ドロップダウン機能を持つようにスタイルを追加します。CSS は、サブメニューを非表示にし、親要素にカーソルを合わせたときにサブメニューを表示するのに役立ちます。

/* Основные стили для меню */
.menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu > ul > li {
  position: relative;
  display: inline-block;
  margin-right: 20px;
}

.menu a {
  text-decoration: none;
  color: #333;
  padding: 10px 15px;
  display: block;
}

/* Скрываем подменю по умолчанию */
.menu .submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

/* Показываем подменю при наведении на родительский элемент */
.menu li:hover > .submenu {
  display: block;
}

/* Стили для элементов подменю */
.submenu li {
  position: relative;
  margin: 0;
}

.submenu .submenu {
  top: 0;
  left: 100%;
}

JavaScript を使用したインタラクティブ機能の追加

モバイルデバイスでもメニューを使いやすくするために、JavaScriptを少し追加します。JavaScriptを使用すると、クリック時のサブメニューの表示を制御できます。

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

  menuItems.forEach(item => {
    const submenu = item.querySelector('.submenu');
    if (submenu) {
      item.addEventListener('click', function(e) {
        e.stopPropagation();
        submenu.classList.toggle('show');
      });
    }
  });

  document.addEventListener('click', function() {
    document.querySelectorAll('.submenu').forEach(submenu => {
      submenu.classList.remove('show');
    });
  });
});

このコードでは、サブメニューを持つ各メニュー項目にイベントハンドラを追加します。クラス show は、サブメニューを表示および非表示にするために追加および削除されます。また、ページ上の他の場所をクリックしたときにサブメニューを非表示にするために、ドキュメント全体にハンドラーを追加します。

結論

マルチレベルのドロップダウンメニューを作成するのは、それほど難しくありません。HTML の構造を理解し、CSS と JavaScript を使用して要素の表示を管理する方法を学ぶことが重要です。ドロップダウンメニューは、ユーザーが必要な情報を簡単に見つけるのに役立ち、サイトをより使いやすくします。

この例を使用して、独自のドロップダウンメニューを作成してみてください。さらに複雑なインターフェースの作成方法を学びたい場合は、アプリケーションを試すことをお勧めします コディックHTML、CSS、JavaScriptのコースを受講して、ウェブ開発を素早く習得し、さらに面白いプロジェクトを作成しましょう！