--> Ein CSS-Drop-Down-Menü: positioning, hover, transitions - Bunterrichten

Ein CSS-Drop-Down-Menü: positioning, hover, transitions

(Letztes Update von Niklas Baumgärtler am 27.9.2020)

Wie in der letzten Lektion versprochen, werden wir heute ein stylisches Drop-Down-Menü mit CSS erstellen! Wir werden dazu eine Menü-Leiste mit drei Links darin erstellen, wobei zwei davon Unter-Menüs aufklappen können, die wiederum eine Anzahl an Links enthalten.

1. Ein CSS-Drop-Down-Menü erstellen

Damit das Ganze auch so richtig imposant wirkt, werden wir zuallererst unsere neu-erworbenen CSS-Fähigkeiten nutzen, um eine Unterteilung zwischen der Menü-Leiste und dem eigentlichen Inhalt der Seite zu erschaffen.

1.1 Das spätere CSS-Drop-Down-Menü vom Inhalt trennen

Wir beginnen also mit einer leeren HTML-Seite, in die wir zwei DIVs einfügen – eines für die Menü-Leiste, der wir die ID ‘main-menu’ zuweisen, und eines für den Inhalt, dem fügen wir die ID ‘content’ hinzu:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>Unser erstes Klapp-Menü</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
 	<div id='main-menu'>
 		Menü
 	</div>
 	<div id='content'>
 		Inhalt
 	</div>
   </body>
</html>

Das Ergebnis sieht (ohne zusätzliche CSS-Befehle in unserer .css-Datei) nicht sehr umwerfend aus:

CSS Drop-Down-Menü

Da das Ganze ohne etwas CSS-Unterstützung etwas gar kläglich aussieht, werden wir unserer Navigations-Leiste und unserem Inhalt mal etwas Farbe und Struktur verpassen, indem wir das Folgende in unserer style.css-Datei einfügen:

#main-menu {
	width: 100%;
	height: 50px;
	background-color: olive;
	text-align: center;
	color: white;
	line-height: 50px;
	text-transform: uppercase;
}

#content {
	width: 100%;
	text-align: center;
	padding-top: 20px;
}

Das Ergebnis sieht doch schon viel besser aus:

CSS Drop-Down-Menü

Zur Erklärung, was die einzelnen Befehle tun:

  • “line-height: 50px;” ändert die Zeilen-Höhe auf 50 Pixel. Das führt dazu, dass die Schrift schön mittig nach oben und unten ausgerichtet wird.
  • “text-transform: uppercase;” verändert den Text auf lauter Groß-Buchstaben. Sieht manchmal gut aus bei Menüs.

Dann wird es Zeit, dass unser Menü einige Optionen zum Auswählen bekommt. Sonst fühlt es sich gar nicht wie ein richtiges Menü, und das wollen wir ja nicht.

1.2 Das CSS-Drop-Down-Menü mit Optionen befüllen

Dazu fügen wir in das DIV mit der ID main-menu eine ungeordnete Liste ein, wie wir es in der letzten Lektion gelernt haben. Hier ein Beispiel-Code dazu:

<body>
 	<div id='main-menu'>
 		<ul>
 			<li>Home</li>
 			<li>Angebot
	 			<ul>
	 				<li>Auto kaufen</li>
	 				<li>Haus kaufen</li>
	 			</ul>
 			</li>
 			<li>Über uns
	 			<ul>
	 				<li>Über die Firma</li>
	 				<li>Über den Gründer</li>
	 			</ul>
 			</li>
 		</ul>
 	</div>
 	<div id='content'>
 		Inhalt
 	</div>
   </body>

Wenn wir diese aktualisierte Webseite jetzt im Browser ansehen, dann sehen wir nicht viel von unserer Liste. Das liegt daran, dass wir ja in unserer .css-Datei angegeben haben, dass eine Zeile im DIV mit der ID main-menu 50px hoch sein soll. Da unsere Liste über mehrere Zeilen geht, wird alles über der ersten Zeile nun “abgeschnitten”.

1.2.1 Wie wir CSS-Befehle durch “auskommentieren” vorübergehend deaktivieren können

Nun werden wir etwas tun, was in der Programmierung sehr häufig ist, aber in HTML etwas umständlich: Wir werden einen Teil unseres CSS-Codes “auskommentieren”. Das bedeutet, wir werden einen Teil des CSS-Codes zu einem Kommentar machen. In HTML ging das mit Hilfe von <!– und –!>, in CSS gibt es dazu zwei Möglichkeiten:

  • Alles, was sich zwischen /* und */ befindet, wird zum Kommentar
  • Alles, was nach einem // kommt, wird bis zum Ende der Zeile ein Kommentar

Wenn wir nun einige unserer CSS-Befehle für bestimmte Zeit nur deaktivieren wollen ohne sie zu löschen, dann können wir sie einfach vorübergehend zu einem Kommentar machen. In unserem Fall könnte das z.B. so aussehen:

#main-menu {
	width: 100%;
	//height: 50px;
	background-color: olive;
	//text-align: center;
	color: white;
	//line-height: 50px;
	text-transform: uppercase;
}

Damit ist die Höhen-Beschränkung auf 50 Pixel, die Zeilenhöhen-Festsetzung auf 50 Pixel und die Zentrierung der Kinder-Elemente für das DIV mit der ID main-menu auskommentiert und damit deaktiviert. Wir können nun wieder unsere ganze Liste sehen:

CSS Drop-Down-Menü 3

So, nun sehen wir also unsere ganze Liste. Als nächstes werden wir uns lernen, wie wir einen Teil der Liste verstecken können, um sie sobald der Besucher der Webseite mit der Maus darüberfährt wieder erscheinen zu lassen.

1.2.2 Die Listen im CSS-Drop-Down-Menü ab der Tiefe 2 verstecken

Als erstes werden wir alle Unter-Listen unserer Navigations-Leiste verstecken. Dazu reicht ein kleiner CSS-Befehl namens “display: none;”:

#main-menu ul li ul {
	display: none;
}

Da wir wollen, dass nicht alle ul-Elemente unsichtbar werden, sondern nur diejenigen ab der zweiten Tiefe-Stufe, die sich innerhalb des main-menu-DIVs befinden, müssen wir das dem Browser auch entsprechend sagen.

Durch das #main-menu bewegen wir uns in das richtige DIV hinein, dann gehen wir in die übergeordnete Liste, in jedes einzelne Listen-Element dieser Liste und dann in jede ul-Liste der zweiten Ebene. Dort wollen wir hin, die soll er nicht anzeigen – deswegen auch das “display: none;”. Unser Ergebnis:

CSS Drop-Down-Menü

So, versteckt sind die Unter-Menü-Punkte schon einmal, aber wie machen wir sie jetzt wieder sichtbar? Da kommt uns nun die CSS-Eigenschaft hover zu Hilfe.

1.2.3 Elemente mit Hilfe von hover wieder sichtbar machen

Die Eigenschaft hover wird dann aktiv, sobald ein Benutzer mit der Maus über das HTML-Element fährt. Alles, was in einem hover-CSS-Block definiert ist, passiert dann. In unserem Fall ein “display: block;”, damit das Unter-Menü wieder angezeigt wird:

#main-menu ul li:hover ul {
	display: block;
}

Hier sagen wir dem Browser folgendes: Wenn ein Benutzer mit der Maus über ein <li>-Element der ersten Ebene fährt, dann mache das was in der geschwungenen Klammer steht mit allen <ul>-Kindern dieses Elements. Was dazu führt, dass du nun ein funktionierendes kleines Klapp-Menü hast – probiere es aus!

1.2.4 Optische Verbesserungen an unserem CSS-Drop-Down-Menü

Aber es sieht noch nicht allzu aufregend aus, und das wollen wir nun ändern. Als erstes werden wir mal die Aufzählungs-Punkte entfernen, wie wir es schon in der letzten Lektion gelernt haben:

#main-menu ul {
	list-style: none;
}

Dann lass uns die Menü-Punkte der ersten Ebene in einer Zeile anzeigen. Als erstes geben wir ihnen mal einen Rahmen, dann sieht man sie besser. Und dann geben wir ihnen die Eigenschaft float: left, dann werden sie nämlich einfach linksbündig angeordnet solange genug Platz ist.

Wenn wir es aber nur dabei belassen, dann sieht das Ergebnis etwas kläglich aus. Deswegen habe ich ein paar weitere Veränderungen vorgenommen. Findest du sie, wenn du den folgenden Code mit deinem eigenen in Eclipse vergleichst?

#main-menu ul {
	list-style: none;
	margin-top: 0px;
	margin-bottom: 0px;
	padding-left: 0px;
	margin-left: 0px;
}

#main-menu ul li {
	position: relative;
	border: 1px solid black;
	float: left;
	padding-left: 20px;
	padding-right: 20px;
	height: 50px;
	text-align: center;
	line-height: 50px;
}

#main-menu ul li ul {
	position: absolute;
	left: 0px;
	background-color: gray;
	display: none;
}

#main-menu ul li ul li {
	white-space: nowrap;
}

Nun zur Erklärung der Veränderungen und warum sie notwendig sind.

  • Im “#main-menu ul li ul”-Block (jeweils die Liste der 2. Tiefe) habe ich die Hintergrund-Farbe auf grau umgestellt. Nicht zwingend notwendig, aber so kann man Unter-Menüs besser von Haupt-Menüs unterscheiden.
  • Im Selektor “#main-menu ul li ul li” (alle Aufzählungs-Elemente der 2. Tiefe) habe ich den Befehl “white-space: nowrap;” hinzugefügt. Da die Listen-Elemente der Kinder-Liste eine größere Breite haben als die Listen-Elemente der Eltern-Liste, versucht der Browser Worte zu trennen damit sich das trotzdem innerhalb der Breite des Eltern-Elements ausgeht. Wenn man das nicht möchte, dann sagt man das dem Browser über den Befehl “white-space: nowrap;”.
  • Im selben Block habe ich den Befehl “position: absolute;” verwendet und auch den Befehl “left: 0px;”. Durch das “absolute” wird das Unter-Menü nicht mehr Teil des Eltern-Blocks und vergrößert ihn u.A. auch nicht mehr wenn das Unter-Menü längere Texte hat als der Haupt-Menü-Punkt.

Der position-Befehl in CSS ist ein sehr mächtiger, deswegen werden wir ihm jetzt ein ganzes, eigenes Kapitel widmen:

2. CSS-Positionierung: static, relative, absolute und fixed

In CSS gibt es im Grunde vier Möglichkeiten, wie ein HTML-Element innerhalb der HTML-Seite positioniert werden kann. Die einfachste nennt sich static:

2.1 CSS-Positionierungen: static

Die einfachste Positionierung in CSS nennt sich “static”. Wenn du schon einmal das Schreib-Programm Word verwendet hast, dann kennst du diese Form der Positionierung sicherlich. Wenn du in Word ein Bild einfügst und es einfach irgendwo in den Fließtext einfügst, dann “fließt” es gewissermaßen mit dem Fließtext mit, als wäre es ein überdimensionales Wort.

Willst du die Abstände zu anderen Elementen im Fließtext festlegen, so benutzt du bei einer static-Positionierung hauptsächlich margin und padding.

Wenn du dem Browser gar nichts darüber sagst, welche Positionierung er für ein HTML-Element annehmen soll, dann wählt er automatisch “static”.

2.2 CSS-Positionierungen: relative

Die Positionierung “relative” funktioniert für sich betrachtet sehr ähnlich wie die “static”-Variante. Auch relative “verschiebt” den Fließtext entsprechend der eigenen Größe.

Aber zusätzlich zu margin und padding kannst du, wenn du die relative-Positionierung verwendest, auch noch den Abstand vom Rahmen des direkten Eltern-Elements über die CSS-Befehle top, right, bottom und left festlegen. Das könnte dann z.B. so aussehen:

#eltern_box {
    width: 300px;
    height: 200px;
}

#kind_box {
    width: 100px;
    height: 100px;

    position: relative;
    top: 20px;
    left: 40px;
}

Der CSS-Befehl “left” beschreibt jeweils den Abstand nach links, der CSS-Befehl “top” dann den Abstand nach oben, usw. – aber Abstand wovon? Von der Umrahmung (border) des Eltern-Elements nach dem Box-Modell, dass wir schon besprochen haben, selbst wenn man diese Umrahmung nicht sieht.

In diesem Fall würde die Kind-Box dann 20 Pixel unterhalb und 40 Pixel rechts von der linken oberen Ecke der Umrahmung des HTML-Elements mit der ID eltern_box gezeichnet werden.

Falls du keine weiteren Positions-Angaben in irgendeine Richtung angibst (weder left, bottom, right noch top), dann wird das HTML-Element einfach dort angezeigt, wo es bei der Positionierung “static” auch sein würde.

2.3 CSS-Positionierungen: absolute

Nun wird es noch interessanter. Die Positionierung “absolute” entfernt das HTML-Element aus dem normalen Aufbau der HTML-Seite. Im Schreib-Programm Word gibt es das auch, wenn du z.B. bei einem Bild “vor den Text” oder “hinter den Text” einstellst. Dann ignoriert der Fließtext das Bild, und du kannst es auf den Pixel genau einstellen, in dem du es einfach mit der Maus herumschiebst. Genau so etwas macht auch “absolute” mit deinem HTML-Element.

Nun kannst du wie bei der Positionierung “relative” mit Hilfe der CSS-Befehle top, right, bottom, left die genaue Position festlegen, in dem du z.B. für einen Abstand von 30px zu links einfach “left: 30px;” hinzufügst.

Allerdings musst du dabei darauf achten dass der Abstand zu links sich womöglich nicht auf das direkte Eltern-Element bezieht. Die Positionierung “absolute” ist nämlich ein wenig eingebildet und respektiert offenbar nur Eltern-Elemente als Autorität, die selbst eine relative/absolute oder fixed-Positionierung aufweisen.

Wenn du also z.B. drei ineinander verschachtelte DIVs auf deiner HTML-Seite hast, mit folgenden Positionierungen:

  • DIV 1
    position: relative

    • DIV 2
      position: static

      • DIV 3
        position: absolute

Dann bezieht sich das DIV 3 wenn du den CSS-Befehl “left: 30px;” verwendest nicht auf die Abmessungen und die Position von DIV 2, weil das “nur” eine static-Positionierung hat. Stattdessen sucht es weiter in der “Ahnen-Hierarchie”, bis es zu einem Eltern-Element kommt, das es respektieren kann. In diesem Fall unser DIV 1 mit der relative-Positionierung.

Und wenn es kein Eltern-Element mit einer respektierlichen Positionierung gibt? Dann wählt der Browser im Zweifelsfall einfach den BODY-Block dafür.

Darum kann es manchmal sein, dass absolute Positionierungen manchmal nicht dort landen, wo man sie erwartet. In diesem Fall muss man dann den richtigen Eltern-Elementen noch “position: relative;” oder eine andere “respektablere” Positionierung zuweisen.

2.4 CSS-Positionierungen: fixed

Die fixed-Positionierung ist die dominanteste und überheblichste unter den Positionierungen. Sie bezieht sich auf das Fenster selbst und bewegt sich auch beim Scrollen nicht mal um einen einzigen Pixel.

Ansonsten funktioniert sie aber recht ähnlich wie die Positionierung “absolute”. Auch sie nimmt das HTML-Element (und seine Kinder) aus dem Fließtext heraus.

Wenn du also z.B. möchtest dass die Menü-Leiste auch beim Scrollen noch sichtbar bleibst, dann gib ihr “position: fixed;”.

3. “Stapelung von HTML-Elementen”: Der z-index

Sobald wir uns in unserer Positionierung über das standardmäßig eingestellte “static” herausbewegen, stehen wir recht rasch vor einem Problem: HTML-Elemente könnten sich überlappen. Zum Beispiel sieht man dann die Menü-Leiste nicht mehr, weil ein “position: absolute”-Element sich genau an der selben Position befindet und darüber angezeigt wird.

Für solche Fälle wurde der z-index entwickelt. Wir haben ja an sich einen flachen und daher nur 2-dimensionalen Bildschirm, deswegen geht es bei allen Positions-Angaben meist nur um Koordinaten in einem x-y-Koordinaten-System. Aber sobald es zu Überlappungen kommt, müssen wir anfangen 3-dimensionaler zu denken. Der z-index ist die einfachste Möglichkeit, dies zu lösen, indem er HTML-Elementen einfach eine Art “Höhe” zuweist. Ein z-index von 10 ist z.B. “höher” als ein z-index von 3, und darum wird das erste der Elemente mit dem z-index 10 über dem mit dem z-index 3 gezeichnet.

Lass uns unseren Source-Code noch ein klein wenig anpassen:

  • Wir fügen unserer HTML-Seite innerhalb des content-Blocks ein Bild hinzu, damit wir gut sehen können, was beim Scrollen passiert
  • Die Positionierung unseres Menüs ändern wir in fixed, damit es beim Scrollen sichtbar bleibt.
  • Dem Menü weisen wir einen z-index von 300 zu, damit es nicht von anderen Elementen verdeckt wird
  • Wir vergrößern unser Inhalts-DIV, damit wir sehen können was beim Scrollen passiert.

Aussehen tut das Ganze dann in meinem Firefox-Browser vor dem Scrollen so:

CSS Positionierung fixed

Wenn man dann herunterscrollt, sieht es so aus. Die obere Leiste bleibt so wie sie ist und schiebt sich über das Bild:

CSS Positionierung fixed 2

Die Änderungen in der index.html sind schnell erklärt, ich habe einfach ein Bild eingefügt:

<div id='content'>
 Inhalt
 <img src='../bild2.jpg'>
</div>

Und unsere style.css:

body {
	margin: 0px;
}

#main-menu {
	position: fixed;
	z-index: 300;
	width: 100%;
	height: 50px;
	background-color: olive;
	color: white;
	text-transform: uppercase;
}

#main-menu ul {
	position: relative;
	left: 50px;
	
	list-style: none;
	margin-top: 0px;
	margin-bottom: 0px;
	padding-left: 0px;
	margin-left: 0px;
}

#main-menu ul li {
	position: relative;
	border: 1px solid black;
	float: left;
	padding-left: 20px;
	padding-right: 20px;
	height: 50px;
	text-align: center;
	line-height: 50px;
}

#main-menu ul li ul {
	position: absolute;
	left: 0px;
	background-color: gray;
	display: none;
}

#main-menu ul li ul li {
	white-space: nowrap;
}

#main-menu ul li:hover ul {
	display: block;
}

#content {
	width: 100%;
	height: 1000px;
	background-color: gray;
	text-align: center;
	padding-top: 20px;
}

Wenn du dir selbst einen Gefallen tun willst, dann probiere anhand unserer Beispielseite noch ein wenig mit den Positionierungen und dem z-index herum. Was passiert z.B. wenn du:

  • den z-index eines Elements auf 0 setzt? Auf eine Minus-Zahl?
  • auf einem fixed-Element margin oder padding verwendest?
  • statt fixed absolute bzw. relative verwendest?
  • bei Positions-Angaben wie top Minuszahlen verwendest?
  • Anderen Elementen absolute oder relative oder fixed zuweist?

4. CSS-Animationen: Schönere Übergänge für unser CSS-Drop-Down-Menü

Unser Drop-Down-Menü bleibt jetzt auch beim Scrollen sichtbar und klappt auf wie es soll. Aber du hast sicher auch schon mal Webseiten gesehen wo das Aufklappen, erscheinen oder Farbe wechseln in diesen schönen Übergängen abgelaufen ist. Das lernen wir jetzt als nächstes 🙂

Der CSS-Befehl den du dafür brauchst nennt sich “transition”, und er besteht grundsätzlich aus 3 Teilen:

  • Welche Art von Übergang (für den Anfang verwenden wir hier “all”, also alle)
  • Wie lange dauert die Animation in Sekunden
  • Ablauf der Animation, z.B. schnell anfangen, verlangsamen und dann schnell aufhören

Das könnte dann z.B. so aussehen:

div {
  transition: all 0.5s ease;
}

In diesem Fall sagen wir dem Browser, dass er für alle DIV-Elemente wenn sie sich verändern (z.B. Farbe wechseln) die Veränderung im Laufe von 2 Sekunden ablaufen lassen soll.

Leider müssen wir nun zu einer etwas traurigen Geschichte kommen. Der transition-Befehl ist nämlich einer derjenigen Befehle, die nur auf manchen Browsern funktionieren. Aus irgendeinem Grund haben sich die Entwickler der verschiedenen Browser nicht einigen können, wie sie den Befehl in ihrem Browser nennen sollen.

Und das führt uns jetzt dazu, dass wir den Befehl für jeden Browser extra hinschreiben müssen. Da sieht man wieder mal, welch dämliche Konsequenzen das haben kann, wenn sich Leute nicht auf einen Tisch setzen können, um gute Lösungen für alle zu finden.

Statt einer einzigen Zeile haben wir dann auf einmal 5 (!):

transition: all 0.5s ease;
/* Firefox 4 */
-moz-transition: all 0.5s ease;
/* Safari and Chrome */
-webkit-transition: all 0.5s ease;
/* Opera */
-o-transition: all 0.5s ease;
/* Internet Explorer 10 */
-ms-transition: all 0.5s ease;

Aber zum Glück ist das nur bei ganz wenigen Befehlen der Fall. Die meisten funktionieren in allen Browsern – mit Ausnahme der ganz neuesten, die entwickelt wurden. Da dauert es manchmal etwas länger, bis alle Browser die unterstützen.

An dieser Stelle sei noch einmal auf die Webseite www.canIuse.com verwiesen, auf der du für alle CSS-Befehle überprüfen kanns,t welche Browser sie bereits unterstützen und welche nicht.

Falls du dich fragst, was diese /* und die */ bedeuten: Das sind in der Programmiersprache CSS Kommentar-Zeichen. Alles, was zwischen einem öffnenden /* und einem schließenden */ steht, betrachtet der Browser als Kommentar, der nur dazu dient, dass sich der Programmierer auskennt um was es sich handelt.

5. Unser fast fertiges CSS-Drop-Down-Menü

Nun habe ich noch ein paar kleine Ab-Änderungen vorgenommen und den transition-Befehl in 5-facher Ausführung auf alle <li>-Elemente die sich im DIV mit der ID “main-menu” befinden angewendet. Das Ergebnis kann sich dann schon sehen lassen:

CSS Drop-Down-Menü 5

Weil sich am Source-Code doch noch einige Dinge verändert haben, hier die aktuelle Version. Verändert habe ich unter Anderem folgendes:

  • Die Hintergrundfarbe der Unter-Menüs ist jetzt “brown”
  • Die Hintergrund-Farbe ändert sich als Übergang zu weiß, sobald man mit der Maus darüber fährt
  • Der Rahmen (border) um die Elemente ist nicht mehr
body {
	margin: 0px;
}

#main-menu {
	position: fixed;
	z-index: 300;
	width: 100%;
	height: 50px;
	background-color: olive;
	color: white;
	text-transform: uppercase;
}

#main-menu ul {
	position: relative;
	left: 50px;
	
	list-style: none;
	margin-top: 0px;
	margin-bottom: 0px;
	padding-left: 0px;
	margin-left: 0px;
}

#main-menu ul li {
	position: relative;
	float: left;
	padding-left: 20px;
	padding-right: 20px;
	height: 50px;
	text-align: center;
	line-height: 50px;
	
	transition: all 0.5s ease;
        /* Firefox 4 */ 
        -moz-transition: all 0.5s ease;
        /* Safari and Chrome */ 
        -webkit-transition: all 0.5s ease;
        /* Opera */ 
        -o-transition: all 0.5s ease;
        /* Internet Explorer 10 */ 
        -ms-transition: all 0.5s ease;
}

#main-menu ul li ul {
	position: absolute;
	left: 0px;
	background-color: brown;
	display: none;
}

#main-menu ul li ul li {
	white-space: nowrap;
	float: none;
}

#main-menu ul li:hover ul {
	display: block;
}

#main-menu ul li:hover {
	background-color: white;
	color: gray;
	cursor: pointer;
}

#content {
	width: 100%;
	height: 1000px;
	background-color: gray;
	text-align: center;
}

6. Der letzte Schliff für unser CSS-Drop-Down-Menü: Die fehlenden Links

Nun haben wir ein Drop-Down-Menü, das mit Hilfe des CSS-Befehls “cursor: pointer;” so aussieht, als würde man darauf klicken können. Aber wirklich klicken kann man da noch nicht, oder zumindest tut sich da nichts.

Das liegt daran, dass unser Drop-Down-Menü ja in Wahrheit nur eine sehr umgestaltete Liste mit Aufzählungspunkten ist. Wenn wir wollen, dass sich bei einem Klick auch ein Link öffnet, dann müssen wir in der Liste statt reinem Text einfach Links einfügen.

Gehe dazu zurück zu deiner .html-Datei und finde die Listen-Elemente, die man jetzt nur zum Schein anklicken kann. Nun wollen wir die Texte zu Links umwandeln. Dazu umgeben wir einfach den zukünftigen Link-Text vorne und hinten mit einem öffnenden <a>-Tag und einem schließenden </a>-Tag, und in den öffnenden <a>-Tag geben wir noch das Attribut href mit dem Pfad den wir ansteuern wollen hinzu,  z.B. so:

<li><a href='https://www.bunterrichten.com'>Home</a></li>

Alternativ können wir auch das <a>-Tag um das Listen-Element herum anlegen, also so:

<a href='https://www.bunterrichten.com'><li>Home</li></a>

Der Unterschied zwischen den beiden Methoden ist der, dass der Besucher der Webseite im ersten Fall direkt auf das Wort “Home” drücken muss, um den Link auszulösen. Im zweiten Fall reicht es, wenn er mit der Maus irgendwo über das Listen-Element fährt. Für unser Drop-Down-Menü eignet sich daher die zweite Variante besser, das ist für den Benutzer einfacher zu bedienen.

Versuch doch mal, allen Drop-Down-Menü-Optionen deiner Webseite einen Link zu verpassen, und probiere aus ob das Ganze auch funktioniert!

Damit sind wir auch schon wieder am Ende mit der heutigen Lektion angelangt.

Vielleicht ist dir aufgefallen, dass wir im Hinblick auf unsere Farbgestaltung doch sehr eingeschränkt sind. Deswegen werden wir uns in der nächsten Lektion gleich mal die ganze Bandbreite der Farbgestaltung vornehmen. Schon gespannt? 🙂

Über bunterrichten

bunterrichten ist ein Gegenkonzept zum sonst üblichen Unter-richten, das auf Anpassung und Unterordnung basiert. Stattdessen geht es darum, Menschen über Stimmigen Kontakt zur Entfaltung zu verhelfen - eben "Menschen helfen aufzublühen".

Niklas Baumgärtler ist Lehrer/Trainer und Werkzeugmacher für Webseiten und Soziale Systeme. Er ist seit Mai 2018 aus Überzeugung selbstständig, und vor allem in der Erwachsenen-Bildung tätig.