Erklärung

Aufgabe

Wir wollen so eine coole Menüleiste wie die oben bauen.

HTML

Im Bereich nav legen wir eine ungeordnete Liste an. Die Listenpunkte enthalten anchor-tags zu anderen Seiten. Eines der a-Elemente erhält die id="aktuelleSeite".
Mit css stylen wir jetzt nav, ul, li und a.

Ansprechen mit CSS

Da wir nicht jede ul oder a auf der gesamten Seite verändern wollen, müssen wir spezifizieren, dass nur solche im Bereich nav verändert werden:

nav a {
color: black;
text-decoration: none;
}

Pseudoklassen

Jedes Element kann mit einer Pseudklasse zusammen selektiert werden. Nicht alle Pseudoklassen machen bei allen Elementen Sinn, doch zb die :hover Pseudoklasse muss nicht nur mit Links, sondern kann mit jedem Element verwendet werden über dem die Maus hovern kann. Dennoch werden wir das typische a:hover verwenden.

Stylen mit CSS

nav

Mit position:sticky und top:0px bleibt der Navigationsbereich auch beim Scrollen immer oben kleben.

ul

Stylen wir wie wir wollen. Mit Padding oben und unten können wir die Größe verändern.

li

Mit display:inline; bringen wir alle li in eine Zeile, und mit list-style-type:none; entfernen wir die Bullet-Points.

a

padding: 4px 8px 4px 8px; Sorgt für mehr Leerraum um den Text, wodurch der Link zu einem schönen Knopf wird.

Das a mit der id="aktuelleSeite" und ein a über dem gehovert wird bekommt eine andere Hintergrundfarbe:

nav a:hover, a#aktuelleSeite {
  background-color: #ff8d00;
}