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

Question

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

Antwort

Verwandte Fragen

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

Unterschiede von CSS: Inline-Style, CSS im Head-Bereich, CSS in externer Datei.

Was ist der Aufbau einer CSS-Anweisung?

Beispiel für CSS

Was bedeutet flex direction: row?

Was bedeutet border-radius: 20px 0px 10px 5px?

Wie vergrößere ich den Abstand zwischen einem Wort und dem Unterstrich bei einem Link mit CSS?

Wie kann ich das Sternchen in 'Code*' hochstellen?

Wie geht der CSS-Code für einen Standardlistenpunkt?

Welche Arten von Listenpunkten kann ich über CSS generieren?

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 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/... [mehr]

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

Die Unterschiede zwischen den drei CSS-Methoden sind: 1. **Inline-Style**: CSS wird direkt im HTML-Element verwendet, z.B. `<div style="color: red;">`. Es hat die höchste Priorit... [mehr]

Accepted Answer

Die Unterschiede zwischen den drei CSS-Methoden sind: 1. **Inline-Style**: CSS wird direkt im HTML-Element verwendet, z.B. `<div style="color: red;">`. Es hat die höchste Priorität, ist jedoch unpraktisch für große Projekte, da es den Code unübersichtlich macht. 2. **CSS im Head-Bereich**: CSS wird innerhalb eines `<style>`-Tags im `<head>`-Bereich der HTML-Datei platziert. Beispiel: ```html <head> <style> body { background-color: blue; } </style> </head> ``` Dies ermöglicht eine bessere Strukturierung, ist aber nur für die jeweilige HTML-Datei gültig. 3. **CSS in externer Datei**: CSS wird in einer separaten Datei (z.B. `styles.css`) gespeichert und über einen `<link>`-Tag im `<head>`-Bereich eingebunden. Beispiel: ```html <link rel="stylesheet" href="styles.css"> ``` Dies fördert die Wiederverwendbarkeit und Wartbarkeit des Codes, da mehrere HTML-Dateien auf dieselbe CSS-Datei zugreifen können.

Accepted Answer

Eine CSS-Anweisung besteht aus einem Selektor und einer oder mehreren Deklarationen. Der Aufbau sieht folgendermaßen aus: ```css selektor { eigenschaft: wert; eigenschaft: wert; } ```... [mehr]

Accepted Answer

Eine CSS-Anweisung besteht aus einem Selektor und einer oder mehreren Deklarationen. Der Aufbau sieht folgendermaßen aus: ```css selektor { eigenschaft: wert; eigenschaft: wert; } ``` - **Selektor**: Bestimmt, auf welches HTML-Element die CSS-Regeln angewendet werden. - **Eigenschaft**: Definiert, welches CSS-Attribut geändert werden soll (z.B. `color`, `font-size`). - **Wert**: Gibt den neuen Wert für die Eigenschaft an (z.B. `red`, `16px`). Beispiel: ```css h1 { color: blue; font-size: 24px; } ``` In diesem Beispiel wird die Schriftfarbe von `<h1>`-Elementen auf Blau und die Schriftgröße auf 24 Pixel gesetzt.

Accepted Answer

CSS (Cascading Style Sheets) wird verwendet, um das Aussehen von HTML-Dokumenten zu gestalten. Hier ist ein einfaches Beispiel: ```css body { background-color: lightblue; /* Hintergrundfarbe des... [mehr]

Accepted Answer

CSS (Cascading Style Sheets) wird verwendet, um das Aussehen von HTML-Dokumenten zu gestalten. Hier ist ein einfaches Beispiel: ```css body { background-color: lightblue; /* Hintergrundfarbe des Körpers */ font-family: Arial, sans-serif; /* Schriftart den gesamten Text */ } h1 { color: navy; /* Textfarbe für Überschriften der Stufe 1 */ text-align: center; /* Zentriert den Text */ } p { font-size: 16px; /* Schriftgröße für Absätze */ line-height: 1.5; /* Zeilenhöhe für bessere Lesbarkeit */ } ``` In diesem Beispiel wird der Hintergrund des Körpers auf hellblau gesetzt, die Schriftart auf Arial, und die Überschrift wird navyfarben und zentriert dargestellt. Absätze haben eine Schriftgröße von 16 Pixeln und eine Zeilenhöhe von 1,5.

Accepted Answer

`flex-direction: row` ist eine CSS-Eigenschaft, die im Flexbox-Layout verwendet wird. Sie legt die Hauptachse des Flex-Containers fest. Wenn `flex-direction` auf `row` gesetzt ist, werden die Flex-Ele... [mehr]

Accepted Answer

`flex-direction: row` ist eine CSS-Eigenschaft, die im Flexbox-Layout verwendet wird. Sie legt die Hauptachse des Flex-Containers fest. Wenn `flex-direction` auf `row` gesetzt ist, werden die Flex-Elemente in einer horizontalen Reihe angeordnet, von links nach rechts. Dies bedeutet, dass die Elemente in der Reihenfolge, in der sie im HTML-Dokument erscheinen, nebeneinander dargestellt werden. Wenn der Platz nicht ausreicht, um alle Elemente in einer Reihe anzuzeigen, können sie je nach weiteren Flexbox-Eigenschaften umgebrochen oder skaliert werden.

Accepted Answer

Die Angabe `border-radius: 20px 0px 10px 5px;` definiert die Ecken eines Elements in CSS. Die Werte stehen für die Rundung der Ecken im Uhrzeigersinn, beginnend mit der oberen linken Ecke. - `2... [mehr]

Accepted Answer

Die Angabe `border-radius: 20px 0px 10px 5px;` definiert die Ecken eines Elements in CSS. Die Werte stehen für die Rundung der Ecken im Uhrzeigersinn, beginnend mit der oberen linken Ecke. - `20px` bezieht sich auf die obere linke Ecke. - `0px` bezieht sich auf die obere rechte Ecke. - `10px` bezieht sich auf die untere rechte Ecke. - `5px` bezieht sich auf die untere linke Ecke. Das bedeutet, dass die obere linke Ecke stark abgerundet ist, die obere rechte Ecke keine Rundung hat, die untere rechte Ecke eine moderate Rundung hat und die untere linke Ecke ebenfalls eine kleine Rundung hat.

Accepted Answer

Um den Abstand zwischen einem unterstrichenen Link und dem Strich zu vergrößern, kannst du die `text-decoration`-Eigenschaft in Kombination mit `text-underline-offset` verwenden. Hier ist e... [mehr]

Accepted Answer

Um den Abstand zwischen einem unterstrichenen Link und dem Strich zu vergrößern, kannst du die `text-decoration`-Eigenschaft in Kombination mit `text-underline-offset` verwenden. Hier ist ein Beispiel: ```css a { text-decoration: underline; text-underline-offset: 4px; /* Abstand zwischen Text und Unterstrich */ } ``` In diesem Beispiel wird der Abstand zwischen dem Text und dem Unterstrich auf 4 Pixel erhöht. Du kannst den Wert anpassen, um den gewünschten Abstand zu erreichen. Beachte, dass `text-underline-offset` in einigen älteren Browsern möglicherweise nicht unterstützt wird.

Accepted Answer

Um das Sternchen in "Code*" hochgestellt darzustellen, kannst du den folgenden CSS-Code verwenden. Du kannst das Sternchen in ein `<sup>`-Tag einfügen, um es hochzustellen: ```ht... [mehr]

Accepted Answer

Um das Sternchen in "Code*" hochgestellt darzustellen, kannst du den folgenden CSS-Code verwenden. Du kannst das Sternchen in ein `<sup>`-Tag einfügen, um es hochzustellen: ```html <p>Code<sup>*</sup></p> ``` Wenn du zusätzlich CSS verwenden möchtest, um das Aussehen zu steuern, kannst du folgendes hinzufügen: ```css sup { font-size: 0.75em; /* Größe des hochgestellten Textes */ vertical-align: super; /* Positionierung */ } ``` Das `<sup>`-Tag sorgt dafür, dass das Sternchen hochgestellt wird.

Accepted Answer

Um einen Standard-Listenpunkt in CSS zu stylen, kannst du die `list-style`-Eigenschaft verwenden. Hier ist ein einfaches Beispiel: ```css ul { list-style-type: disc; /* Standard Punkt */ marg... [mehr]

Accepted Answer

Um einen Standard-Listenpunkt in CSS zu stylen, kannst du die `list-style`-Eigenschaft verwenden. Hier ist ein einfaches Beispiel: ```css ul { list-style-type: disc; /* Standard Punkt */ margin: 20px; /* Abstand um die Liste */ padding: 0; /* Kein Innenabstand */ } ol { list-style-type: decimal; /* Nummerierte Liste */ margin: 20px; /* Abstand um die Liste */ padding: 0; /* Kein Innenabstand */ } ``` In diesem Beispiel wird für ungeordnete Listen (`ul`) ein Standard-Punkt verwendet, während für geordnete Listen (`ol`) eine nummerierte Darstellung gewählt wird. Du kannst die `list-style-type`-Eigenschaft auch anpassen, um verschiedene Arten von Aufzählungszeichen zu verwenden, wie z.B. `circle`, `square` oder `none`.

Accepted Answer

In CSS kannst du verschiedene Arten von Listenpunkten für geordnete und ungeordnete Listen generieren. Hier sind die gängigsten Typen: 1. **Ungeordnete Listen (ul)**: - Standard: Fü... [mehr]

Accepted Answer

In CSS kannst du verschiedene Arten von Listenpunkten für geordnete und ungeordnete Listen generieren. Hier sind die gängigsten Typen: 1. **Ungeordnete Listen (ul)**: - Standard: Füllt die Listenpunkte mit einemüllten Kreis (•). - `list-style-type: disc;` (Standard) - `list-style-type: circle;` (hohler Kreis) - `list-style-type: square;` (Quadrat) - `list-style-type: none;` (keine Punkte) 2. **Geordnete Listen (ol)**: - Standard: Nummeriert die Listenpunkte mit arabischen Ziffern (1, 2, 3). - `list-style-type: decimal;` (1, 2, 3) - `list-style-type: decimal-leading-zero;` (01, 02, 03) - `list-style-type: lower-alpha;` (a, b, c) - `list-style-type: upper-alpha;` (A, B, C) - `list-style-type: lower-roman;` (i, ii, iii) - `list-style-type: upper-roman;` (I, II, III) - `list-style-type: none;` (keine Nummerierung) 3. **Benutzerdefinierte Listenpunkte**: - Du kannst auch benutzerdefinierte Listenpunkte mit CSS erstellen, indem du das `::marker` Pseudoelement verwendest oder indem du Hintergrundbilder für die Listenpunkte verwendest. Diese Optionen ermöglichen es dir, das Aussehen von Listen in deinem Webdesign flexibel zu gestalten.