CSS Code-Challenge: Responsives Menü

Wie funktioniert diese Challenge?

1. Diese Coding-Challenge besteht aus 10 verschiedenen Aufgaben.
2. Jede Aufgabe wird einzeln gelöst und in den untenstehenden Code-Editor eingegeben.

Probleme? Wenn du eine Aufgabe nicht lösen kannst, klicke auf die jeweilige Code-Lösung unter der Aufgabe. Den Code dieser fertigen Lösung kannst du dann kopieren und in den Code-Editor einfügen.

Aber bitte nicht schummeln. Versuche zunächst die Aufgaben selbständig zu lösen 😉

Starten wir mit der ersten Aufgabe:

1. Body mit Schriftart

Selektiere den body und setze die Schriftart auf: Arial, Helvetica, sans-serif;

[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]

body {
  font-family: Arial, Helvetica, sans-serif;
}

[/lp_spoiler]

2. Klasse menu stylen

Selektiere die Klasse menu, setze die Hintergrundfarbe auf #333333; und verwende die Eigenschaft: overflow: hidden;

[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]

.menu {
  background-color: #333333;
  overflow: hidden;
}

[/lp_spoiler]

3. Link stylen

Style das Link-Element, mit dem Selektor .menu a und folgenden Werten:

  float: left;
  display: block;
  color: #FFF;
  text-align: center;
  padding: 10px 15px;
  text-decoration: none;

[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]

.menu a {
  float: left;
  display: block;
  color: #FFF;
  text-align: center;
  padding: 10px 15px;
  text-decoration: none;
}

[/lp_spoiler]

4. Hover-State vom Link stylen

Style das Link-Element, mit dem Selektor a:hover und folgenden Werten:

  background-color: #A5D2FF;
  color: black;

[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]

a:hover {
  background-color: #A5D2FF;
  color: black;
}

[/lp_spoiler]

5. Button verstecken

Verstecke den Button mit dem Selektor .menu a.btn

[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]

.menu .btn {
  display: none;
}

[/lp_spoiler]

6. Media-Query für Viewport bis 600px

Erstelle einen Media-Query für den maximalen-Viewport von 600px;

[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]

@media screen and (max-width: 600px) {

}

[/lp_spoiler]

7. Zeige den Menu-Button im Responsive Modus

Verwende im Media-Query folgenden Selektor .menu a.btn mit den Werten:

float: right;
display: block;

[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]

@media screen and (max-width: 600px) {
  .menu a.btn {
    float: right;
    display: block;
  }
}

[/lp_spoiler]

8. Responsive Menu-Links verstecken

Verwende im Media-Query folgenden Selektor .menu a mit den Werten:

display: none;

[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]

@media screen and (max-width: 600px) {

  .menu a {
    display: none;
  }
}

[/lp_spoiler]

9. Responsives Menu stylen

Style das menu im Media-Query mit folgenden Selektor: .menu.responsive und folgendem Wert:

position: relative;

[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]

  .menu.responsive {
    position: relative;
  }

[/lp_spoiler]

10. Responsive Menu-Links stylen

Style die menu-Links im Media-Query mit folgenden Selektor: .menu.responsive a und folgendem Wert:

    float: none;
    display: block;
    text-align: left;

[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]

  .menu.responsive a {
    float: none;
    display: block;
    text-align: left;
  }

[/lp_spoiler]

Komplettlösung:
[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]

body {
  font-family: Arial, Helvetica, sans-serif;
}

.menu {
  background-color: #333333;
  overflow: hidden;
}

.menu a {
  float: left;
  display: block;
  color: #FFF;
  text-align: center;
  padding: 10px 15px;
  text-decoration: none;
}

a:hover {
  background-color: #A5D2FF;
  color: black;
}

.menu .btn {
  display: none;
}

@media screen and (max-width: 600px) {
  .menu a.btn {
    float: right;
    display: block;
  }

  .menu a {
    display: none;
  }

  .menu.responsive {
    position: relative;
  }

  .menu.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

[/lp_spoiler]