Hallo,
eine Möglichkeit, dies zu tun, ist, die Elemente, die du anzeigen möchtest, in einem Container-Element zu platzieren, das standardmäßig ausgeblendet ist, und dann die Sichtbarkeit dieses Elements zu ändern, wenn der Benutzer auf den Dropdown-Button klickt. Zum Beispiel:
<style> /* Stilisiere den Dropdown-Button */ .dropbtn { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; }
/* Der Container <div> - benötigt, um das Dropdown-Menü zu positionieren */ .dropdown { position: relative; display: inline-block; }
/* Dropdown-Inhalt (standardmäßig ausgeblendet) */ .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; }
/* Links innerhalb des Dropdowns */ .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; }
/* Ändere die Farbe der Dropdown-Links beim Überfahren mit der Maus */ .dropdown-content a:hover {background-color: #f1f1f1}
/* Der Container <div> für die zusätzlichen Elemente / .dropdown-extra { display: none; / Ausgeblendet, bis der Button geklickt wird / position: absolute; top: 100%; / Unter dem Dropdown-Menü positioniert */ left: 0; width: 100%; background-color: #f9f9f9; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; padding: 12px 16px; } </style>
<div class=“dropdown”> <button class=“dropbtn” onclick=“toggleDropdown()”>Dropdown</button> <div class=“dropdown-content” id=“dropdown-content”> <a href=“#”>Link 1</a> <a href=“#”>Link 2</a> <a href=“#”>Link 3</a> </div> <div class=“dropdown-extra” id=“dropdown-extra”> <!-- Füge hier die Elemente hinzu, die du anzeigen möchtest --> <p>Kontaktinformationen</p> <p>Shariff Icons</p> </div> </div>
<script> // Eine Funktion, um das Dropdown-Menü und die zusätzlichen Elemente ein- und auszublenden
function toggleDropdown() {
var dropdown = document.getElementById(“dropdown-content”);
var extra = document.getElementById(“dropdown-extra”);
if (dropdown.style.display == “none”) {
// Wenn das Dropdown-Menü ausgeblendet ist, zeige es an
dropdown.style.display = “block”;
// Zeige auch die zusätzlichen Elemente an
extra.style.display = “block”;
} else {
// Wenn das Dropdown-Menü angezeigt wird, blende es aus
dropdown.style.display = “none”;
// Blende auch die zusätzlichen Elemente aus
extra.style.display = “none”;
}
} </script>
Alles anzeigen
Dies ist nur eine mögliche Lösung, es gibt viele andere Möglichkeiten, dies zu erreichen.
