1 Frage zu Untermenue

Question

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?

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.

1 Frage zu Untermenue

Fragen und Antworten zum Thema Untermenue

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?