Erstellen eines mehrstufigen Dropdown-Menüs

In diesem Artikel erkläre ich, wie man ein mehrstufiges Dropdown-Menü mit HTML, CSS und JavaScript erstellt. Wir werden Schritt für Schritt analysieren, wie man ein solches Menü bequem und modern macht. Auch wenn Sie ein Neuling sind, können Sie diesen Anweisungen folgen und Ihr eigenes Dropdown-Menü erstellen. Los geht's!

Was ist ein mehrstufiges Dropdown-Menü?

Ein Dropdown-Menü ist ein Element der Benutzeroberfläche, mit dem der Benutzer schnell auf der Website navigieren kann. Das mehrstufige Menü verfügt über Untermenüs, die ineinander verschachtelt werden können. Solche Menüs sind häufig auf großen Websites mit vielen Kategorien und Unterkategorien zu finden. Ein Beispiel für ein solches Menü finden Sie auf den Websites von Online-Shops oder Unternehmensportalen.

HTML-Struktur für das Dropdown-Menü

Um ein mehrstufiges Dropdown-Menü zu erstellen, beginnen wir mit HTML. Erstellen Sie die grundlegende Menüstruktur mit den Elementen <ul> und <li> für die Liste und Unterelemente:

<nav class="menu">
  <ul>
    <li><a href="# ">Startseite</a></li>
    <li><a href="# ">Dienstleistungen</a>
      <ul class="submenu">
        <li><a href="# ">Webentwicklung</a></li>
        <li><a href="# Mobilanwendungen
          <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="# ">Kontakte</a></li>
  </ul>
</nav>

Hier verwenden wir verschachtelte Listen <ul>, um mehrstufige Menüelemente zu erstellen. Jeder <li> kann einen Link (<a>) und eine verschachtelte Liste (<ul>) enthalten, um ein Untermenü zu bilden.

Menü mit CSS stylen

Fügen wir nun Stile hinzu, damit unser Menü schön aussieht und über Dropdown-Funktionen verfügt. CSS hilft dabei, Untermenüs auszublenden und sie anzuzeigen, wenn Sie mit der Maus über das übergeordnete Element fahren.

/* Основные стили для меню */
.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%;
}

Hinzufügen von Interaktivität mit JavaScript

Um das Menü auch auf mobilen Geräten benutzerfreundlich zu gestalten, fügen wir etwas JavaScript hinzu. Mit Hilfe von JavaScript können wir die Anzeige des Untermenüs beim Klicken steuern.

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');
    });
  });
});

In diesem Code fügen wir jedem Menüelement mit Untermenü einen Ereignishandler hinzu. Die Klasse show wird hinzugefügt und entfernt, um Untermenüs anzuzeigen und auszublenden. Wir fügen auch einen Handler für das gesamte Dokument hinzu, um das Untermenü auszublenden, wenn Sie auf eine andere Stelle auf der Seite klicken.

Befund

Das Erstellen eines mehrstufigen Dropdown-Menüs ist nicht so schwierig, wie es scheint. Die Hauptsache ist, die HTML-Struktur zu verstehen und zu lernen, wie man die Sichtbarkeit von Elementen mit CSS und JavaScript steuert. Das Dropdown-Menü hilft dem Benutzer, die benötigten Informationen leicht zu finden und macht die Website benutzerfreundlicher.

Versuchen Sie, anhand dieses Beispiels ein eigenes Dropdown-Menü zu erstellen. Und wenn Sie lernen möchten, wie man noch komplexere Benutzeroberflächen erstellt, empfehle ich Ihnen, die App auszuprobieren Kodik. Hier finden Sie Kurse zu HTML, CSS und JavaScript, die Ihnen helfen, die Webentwicklung schnell zu erlernen und noch interessantere Projekte zu erstellen!