Wie erstellt man ein Dropdown-Menü mit PHP, CSS, JS, das bei Überfahren der Menüpunkte die Untermenüpunkte öffnet?

Question

Wie erstellt man ein Dropdown-Menü mit PHP, CSS, JS, das bei Überfahren der Menüpunkte die Untermenüpunkte öffnet?

Antwort

Verwandte Fragen

Wie sieht ein Drop-Down-Menü aus?

Dropdownmenu mit 9 Menüpunkten und Untermenüpunkten erstellen, die beim Klick auf einen Button öffnen und schließen in CSS und JS.

Wie erstellt man ein Menü mit Untermenüpunkten, die sich beim Klick auf den Menüpunkt öffnen und dabei die anderen Menüpunkte schließen?

Welche Begriffe umfasst die Website-Navigation?

Accepted Answer

Um ein Dropdown-Menü mit PHP, CSS und JavaScript zu erstellen, das bei Überfahren der Menüpunkte die Untermenüpunkte öffnet, kannst du folgendes Beispiel verwenden: ### HTML/PHP ```php <!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <meta name="" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> <title>Dropdown Menü</title> </head> <body> <div class="dropdown"> <button class="dropbtn">Menü</button> <div class="dropdown-content"> <div class="submenu"> <a href="#">Punkt 1</a> <div class="submenu-content"> <a href="#">Unterpunkt 1.1</a> <a href="#">Unterpunkt 1.2</a> </div> </div> <div class="submenu"> <a href="#">Punkt 2</a> <div class="submenu-content"> <a href="#">Unterpunkt 2.1</a> <a href="#">Unterpunkt 2.2</a> </div> </div> </div> </div> <script src="script.js"></script> </body> </html> ``` ### CSS (styles.css) ```css body { font-family: Arial, sans-serif; } .dropdown { position: relative; display: inline-block; } .dropbtn { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .submenu { position: relative; } .submenu-content { display: none; position: absolute; left: 100%; top: 0; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } .submenu:hover .submenu-content { display: block; } .dropdown:hover .dropdown-content { display: block; } ``` ### JavaScript (script.js) In diesem Fall ist kein JavaScript erforderlich, da das Dropdown-Menü nur mit CSS und dem Hover-Effekt funktioniert. Wenn du jedoch zusätzliche Interaktivität benötigst, kannst du JavaScript hinzufügen. ### Erklärung - **HTML**: Die Struktur des Menüs wird mit einer `div` für das Dropdown und `a`-Tags für die Links erstellt. - **CSS**: Das Styling sorgt dafür, dass die Untermenüpunkte nur angezeigt werden, wenn der Benutzer mit der Maus über die Hauptmenüpunkte fährt. - **JavaScript**: In diesem Beispiel nicht notwendig, kann aber für erweiterte Funktionen verwendet werden. Mit diesem Code hast du ein einfaches Dropdown-Menü, das bei Überfahren der Menüpunkte die Untermenüpunkte öffnet.

Accepted Answer

Ein Drop-Down-Menü ist ein grafisches Benutzeroberflächenelement, das eine Liste von Optionen anzeigt, wenn der Benutzer auf ein bestimmtes Feld klickt oder darüber fährt. Es beste... [mehr]

Accepted Answer

Ein Drop-Down-Menü ist ein grafisches Benutzeroberflächenelement, das eine Liste von Optionen anzeigt, wenn der Benutzer auf ein bestimmtes Feld klickt oder darüber fährt. Es besteht typischerweise aus einem Eingabefeld oder Button, der den aktuellen Auswahlwert anzeigt. Wenn das Menü geöffnet wird, erscheinen die verfügbaren Optionen darunter, und der Benutzer kann eine Auswahl treffen. Visuell sieht es oft so aus: 1. **Eingabefeld oder Button**: Zeigt die aktuell ausgewählte Option an. 2. **Pfeil nach unten**: Oft ein Symbol, das anzeigt, dass das Menü erweiterbar ist. 3. **Liste von Optionen**: Eine vertikale Liste, die erscheint, wenn das Menü geöffnet wird. Jede Option kann angeklickt werden, um sie auszuwählen. Das Design kann je nach Anwendung und Plattform variieren, aber die Grundfunktionalität bleibt gleich.

Accepted Answer

Um ein Dropdown-Menü mit 9 Menüpunkten und Untermenüpunkten zu erstellen, das sich beim Klicken auf einen Button öffnet und schließt, kannst du HTML, CSS und JavaScript verwe... [mehr]

Accepted Answer

Um ein Dropdown-Menü mit 9 Menüpunkten und Untermenüpunkten zu erstellen, das sich beim Klicken auf einen Button öffnet und schließt, kannst du HTML, CSS und JavaScript verwenden. Hier ist ein einfaches Beispiel: ### HTML ```html <!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <meta name="" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> <title>Dropdown Menü</title> </head> <body> <button id="dropdownButton">Menü</button> <div id="dropdownMenu" class="dropdown-content"> <div class="menu-item">Punkt 1 <div class="submenu">Unterpunkt 1.1</div> </div> <div class="menu-item">Punkt 2 <div class="submenu">Unterpunkt 2.1</div> </div> <div class="menu-item">Punkt 3 <div class="submenu">Unterpunkt 3.1</div> </div> <div class="menu-item">Punkt 4 <div class="submenu">Unterpunkt 4.1</div> </div> <div class="menu-item">Punkt 5 <div class="submenu">Unterpunkt 5.1</div> </div> <div class="menu-item">Punkt 6 <div class="submenu">Unterpunkt 6.1</div> </div> <div class="menu-item">Punkt 7 <div class="submenu">Unterpunkt 7.1</div> </div> <div class="menu-item">Punkt 8 <div class="submenu">Unterpunkt 8.1</div> </div> <div class="menu-item">Punkt 9 <div class="submenu">Unterpunkt 9.1</div> </div> </div> <script src="script.js"></script> </body> </html> ``` ### CSS (styles.css) ```css body { font-family: Arial, sans-serif; } #dropdownMenu { display: none; position: absolute; background-color: white; border: 1px solid #ccc; z-index: 1; } .menu-item { padding: 10px; cursor: pointer; } .menu-item:hover { background-color: #f1f1f1; } .submenu { display: none; padding-left: 20px; } .menu-item:hover .submenu { display: block; } ``` ### JavaScript (script.js) ```javascript document.getElementById("dropdownButton").addEventListener("click", function() { const menu = document.getElementById("dropdownMenu"); menu.style.display = menu.style.display === "block" ? "none" : "block"; }); ``` ### Erklärung - **HTML**: Der Button öffnet das Dropdown-Menü, das 9 Menüpunkte enthält. Jeder Menüpunkt kann Untermenüpunkte haben. - **CSS**: Stile für das Dropdown-Menü und die Menüelemente. Die Untermenüpunkte sind standardmäßig verborgen. - **JavaScript**: Ein Klick-Event wird auf den Button gesetzt, um das Menü ein- oder auszublenden. Du kannst dieses Beispiel in eine HTML-Datei einfügen und die CSS- und JavaScript-Dateien entsprechend verlinken, um das Dropdown-Menü zu testen.

Accepted Answer

Um ein Menü mit Untermenüpunkten zu erstellen, bei dem sich die Untermenüpunkte beim Klicken auf den Hauptmenüpunkt öffnen und die anderen Menüpunkte schließen, kan... [mehr]

Accepted Answer

Um ein Menü mit Untermenüpunkten zu erstellen, bei dem sich die Untermenüpunkte beim Klicken auf den Hauptmenüpunkt öffnen und die anderen Menüpunkte schließen, kannst du HTML, CSS und JavaScript verwenden. Hier ist ein einfaches Beispiel: ### HTML ```html <!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Menü mit Untermenüpunkten</title> <link rel="stylesheet" href="styles.css"> </head> <body> <ul class="menu"> <li> <a href="#" class="menu-item">Menüpunkt 1</a> <ul class="submenu"> <li><a href="#">Untermenü 1.1</a></li> <li><a href="#">Untermenü 1.2</a></li> </ul> </li> <li> <a href="#" class="menu-item">Menüpunkt 2</a> <ul class="submenu"> <li><a href="#">Untermenü 2.1</a></li> <li><a href="#">Untermenü 2.2</a></li> </ul> </li> </ul> <script src="script.js"></script> </body> </html> ``` ### CSS (styles.css) ```css .menu { list-style-type: none; padding: 0; } .menu-item { display: block; padding: 10px; background: #007BFF; color: white; text-decoration: none; } .submenu { display: none; list-style-type: none; padding: 0; } .submenu li { background: #0056b3; } ``` ### JavaScript (script.js) ```javascript document.querySelectorAll('.menu-item').forEach(item => { item.addEventListener('click', function(event) { event.preventDefault(); // Schließe alle anderen Untermenüs document.querySelectorAll('.submenu').forEach(submenu => { if (submenu !== this.nextElementSibling) { submenu.style.display = 'none'; } }); // Toggle das aktuelle Untermenü const submenu = this.nextElementSibling; submenu.style.display = submenu.style.display === 'block' ? 'none' : 'block'; }); }); ``` ### Erklärung 1. **HTML**: Die Struktur des Menüs wird mit einer ungeordneten Liste (`<ul>`) erstellt. Jeder Menüpunkt hat ein Untermenü, das ebenfalls eine Liste ist. 2. **CSS**: Das Styling sorgt dafür, dass die Untermenüs standardmäßig nicht angezeigt werden. 3. **JavaScript**: Hier wird die Logik implementiert, die beim Klicken auf einen Menüpunkt das entsprechende Untermenü öffnet und alle anderen schließt. Mit diesem Code kannst du ein funktionierendes Menü mit Untermenüpunkten erstellen.

Accepted Answer

Ja, es gibt viele Begriffe und Konzepte im Zusammenhang mit der Navigation einer Website. Hier sind einige der gängigsten: 1. **Hamburger-Menü**: Ein Symbol, das aus drei horizontalen Linie... [mehr]

Accepted Answer

Ja, es gibt viele Begriffe und Konzepte im Zusammenhang mit der Navigation einer Website. Hier sind einige der gängigsten: 1. **Hamburger-Menü**: Ein Symbol, das aus drei horizontalen Linien besteht und oft auf mobilen Geräten verwendet wird, um ein verstecktes Menü anzuzeigen. 2. **Breadcrumbs (Brotkrumen-Navigation)**: Eine sekundäre Navigationshilfe, die dem Benutzer zeigt, wo er sich innerhalb der Hierarchie der Website befindet. 3. **Dropdown-Menü**: Ein Menü, das sich öffnet, wenn der Benutzer auf einen Menüpunkt klickt oder darüber fährt, und weitere Unterpunkte anzeigt. 4. **Mega-Menü**: Ein großes Dropdown-Menü, das oft mehrere Spalten und eine Vielzahl von Links und Informationen enthält. 5. **Sidebar-Navigation**: Eine vertikale Navigationsleiste, die sich oft auf der linken oder rechten Seite der Website befindet. 6. **Footer-Navigation**: Eine Navigationsleiste, die sich am unteren Rand der Website befindet und oft Links zu wichtigen Seiten wie Impressum, Datenschutz und Kontakt enthält. 7. **Top-Navigation (Hauptnavigation)**: Eine horizontale Navigationsleiste, die sich am oberen Rand der Website befindet und die Hauptkategorien oder -seiten der Website enthält. 8. **Tab-Navigation**: Eine Navigationsmethode, bei der Inhalte in Registerkarten organisiert sind, die der Benutzer anklicken kann, um verschiedene Abschnitte anzuzeigen. 9. **Flyout-Menü**: Ein Menü, das sich seitlich öffnet, wenn der Benutzer über einen Menüpunkt fährt oder darauf klickt. 10. **Off-Canvas-Menü**: Ein Menü, das sich von der Seite herein schiebt und den Hauptinhalt der Seite zur Seite schiebt. Diese Begriffe decken die häufigsten Navigationsmethoden ab, die auf Websites verwendet werden.