CSS - Dropdowns: A Beginner's Guide

Hallo zusammen, zukünftige Webdesigner! Heute tauchen wir in die wundervolle Welt der CSS-Dropdowns ein. Als dein freundlicher Nachbarschafts-EDV-Lehrer freue ich mich, dich auf dieser Reise zu führen. Keine Sorge, wenn du noch nie eine Zeile Code geschrieben hast – wir beginnen ganz von vorne und arbeiten uns hoch. Also hole dir einen Becher Kaffee (oder Tee, wenn das dein Ding ist) und los geht's!

Was ist ein CSS Dropdown?

Bevor wir uns dem Code widmen, lassen Sie uns verstehen, was ein Dropdown ist. Stell dir vor, du bist in einem schicken Restaurant und der Kellner reicht dir eine Speisekarte. Aber dies ist keine gewöhnliche Speisekarte – es ist eine magische Speisekarte! Wenn du auf "Vorspeisen" tippst, erscheint eine Liste köstlicher Vorspeisen. Genau das macht ein Dropdown auf einer Website. Es ist ein Menü, das bei Interaktion weitere Optionen zeigt.

Nun sehen wir, wie wir diese Magie mit CSS erstellen können!

CSS Dropdown - Grundlegendes Beispiel

Fangen wir mit einem einfachen Dropdown-Menü an. Hier ist der HTML- und CSS-Code:

<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>

.dropdown {
position: relative;
display: inline-block;
}

.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;
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
display: block;
}

Lassen Sie uns das auseinandernehmen:

1. Wir erstellen einen Container (<div class="dropdown">) für unser gesamtes Dropdown.
2. Innen haben wir einen Knopf (<button class="dropbtn">), der das Dropdown auslöst.
3. Der tatsächliche Dropdown-Inhalt befindet sich in einem anderen Div (<div class="dropdown-content">).
4. Wir verwenden CSS, um den Dropdown-Inhalt standardmäßig zu verbergen (display: none;).
5. Wenn wir über den Dropdown-Container fahren, zeigen wir den Inhalt (display: block;).

CSS Dropdown - Hover-Effekt

Nun, da wir unser grundlegendes Dropdown haben, machen wir es mit einem Hover-Effekt etwas schicker:

.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}

.dropdown:hover .dropbtn {
background-color: #3e8e41;
}

Dieses CSS ändert die Knopffarbe, wenn du darüber fährst. Es ist, als ob der Knopf sagt: "Hey, ich bin bereit, dir mehr Optionen zu zeigen!"

CSS Dropdown - Klickbare Dropdowns

Manchmal möchten wir, dass unser Dropdown bei einem Klick und nicht nur bei einer Bewegung erscheint. Hier ist, wie wir das mit ein wenig JavaScript erreichen können:

<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>

function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}

window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
for (var i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}

.show {display:block;}

Dieses Skript schaltet die 'show'-Klasse ein und aus, wenn der Knopf geklickt wird, und schließt das Dropdown, wenn du irgendwo anders auf der Seite klickst.

CSS Dropdown - Rechtsbündige Menü

Was ist, wenn wir möchten, dass unser Dropdown nach rechts ausgerichtet ist, anstatt nach links? Ganz einfach!

.dropdown-content {
right: 0;
}

Füge dies zu deinem bestehenden CSS hinzu. Es ist, als ob du deinem Dropdown sagst: "Rücke nach rechts, bitte!"

CSS Dropdown - Linksbündige Menü

Um teljeskennlichkeit, hier ist, wie du dein Menü explizit links ausrichtest (obwohl dies normalerweise der Standard ist):

.dropdown-content {
left: 0;
}

CSS Dropdown - Mit Bild

Lassen Sie uns unser Dropdown noch aufregender machen, indem wir ein Bild hinzufügen:

<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#"><img src="img_5terre.jpg" alt="Cinque Terre" width="100"></a>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
</div>
</div>

.dropdown-content img {
margin: 10px 0;
}

Jetzt hat dein Dropdown eine schöne Bildergalerie oben. Es ist, als ob du eine Kirsche auf deinem CSS-Sundae hinzufügst!

CSS Dropdown - Mit Navbar

Schließlich sehen wir, wie wir unser Dropdown in eine Navigationsleiste einbinden können:

<ul class="navbar">
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li class="dropdown">
<a href="#" class="dropbtn">Dropdown</a>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</li>
</ul>

.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

.navbar li {
float: left;
}

.navbar li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

.navbar li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}

.navbar .dropdown {
display: inline-block;
}

Und voilà! Ein voll funktionsfähiges Navigationsmenü mit einem Dropdown-Menü.

Fazit

Herzlichen Glückwunsch! Du hast gerade gelernt, wie man verschiedene Arten von CSS-Dropdowns erstellt. Denke daran, Übung macht den Meister, also habe keine Angst, diese Beispiele zu experimentieren. Ändere Farben, füge Animationen hinzu oder versuche, verschiedene Arten von Dropdowns auf einer Seite zu kombinieren.

Hier ist eine schnelle Referenztabelle der Methoden, die wir behandelt haben:

Methode	Beschreibung
Grundlegendes Dropdown	Einfaches Dropdown, das bei einer Bewegung erscheint
Hover-Effekt	Dropdown mit Farbänderung bei einer Bewegung
Klickbares Dropdown	Dropdown, das bei einem Klick erscheint
Rechtsbündiges Menü	Dropdown, das nach rechts ausgerichtet ist
Linksbündiges Menü	Dropdown, das nach links ausgerichtet ist (Standard)
Mit Bild	Dropdown, das ein Bild enthält
Mit Navbar	Dropdown, das in eine Navigationsleiste integriert ist

Denke daran, in der Welt des Webdesigns ist Kreativität dein bester Freund. Also geh voran und erstelle erstaunliche Dropdowns! Wer weiß, vielleicht erfindest du das nächste große Ding in der Webnavigation. Viel Spaß beim Coden!

Credits: Image by storyset