Schritt für Schritt zum Toggle-Menü für Handy mit responsive Design

Zuerst erstellen wir eine „normale“ Steuerung, welche im zweiten Schritt in das Design eines „Pulldown-Menüs“ umgewandelt wird und dann mit MENÜ-Button angezeigt, bzw. ausgeblendet werden kann.

klassische Navigation oben immer sichtbar und direkt anklickbar
klassische Navigation oben immer sichtbar und direkt anklickbar

Hier unser HTML-Bereich noch ohne Klassen und IDs, die wir für die Toggle-Steuerung benötigen. Diese werden eingefügt, wenn diese benötigt werden. Hier zum mitbasteln der komplette HTML-Code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Toggle Menü ohne JavaScript (CSS:target)</title>
<style>
* {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}
</style>	
</head>
<body>
<header id="nav-menue">
	<a href="#" id="bereichlogo">HTML-Seminar.de</a>
    <nav id="steuerung" role="navigation">
    	<ul>
           <li><a href="#">Startseite</a></li>
           <li><a href="#">HTML lernen</a></li>
           <li><a href="#">Beispiele</a></li>
           <li><a href="#">Kontakt</a></li>
           <li><a href="#">Impressum</a></li>
        </ul>
    </nav>
    <a class="menue-button menue-button-beschr-close" 
       href="#nav-menue-zu">MENÜ zu</a>
    <a class="menue-button menue-button-beschr-open" 
       href="#nav-menue">MENÜ auf</a>
</header>
<section>
  <h1>Toggle Menü ohne JavaScript (CSS:target)</h1>
  <h2>Steuerung für mobile Geräte</h2>
  <p>Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt 
    Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt 
    Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt 
    Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt 
    Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt 
    Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt 
    Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt 
    Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt 
    Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt 
    Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt 
    Inhalt.</p>
  <p>Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt 
    Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt 
    Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt 
    Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt 
    Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt 
    Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt 
    Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt 
    Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt 
    Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt 
    Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt 
    Inhalt.</p>
</section>	
</body>
</html>

Noch sieht unsere Website für unser responsives Design noch nicht besonders schön aus. Im CSS-Bereich ist bisher nur die Abstände auf 0 gesetzt und Arial als Schriftart ausgewählt.

Aussehen ohne CSS – der komplette HTML-Code
Aussehen ohne CSS – der komplette HTML-Code

Unser erstes Ziel ist es, eine normale Steuerung zu erstellen, wenn genügen Bildschirmbreite vorhanden ist:

das soll der Ergebnis sein für die normale Steuerung
das soll der Ergebnis sein für die normale Steuerung

Damit wir sehen wo wir arbeiten, geben wir unserem <header> eine Hintergrundfarbe in knalligem gelb, unten einen Rahmen und eine Breite von 100% mit. Damit gut sichtbar verwenden wir ein knalliges Gelb – das wird später nicht mehr da sein aber während der Entwicklungsphase ist gut zu sehen, wo man arbeitet.

header {
	background-color: yellow;
	width: 100%;
	border-bottom: 1px solid black;
}
Bereich für header wird festgelegt (und sichtbar gemacht)
Bereich für header wird festgelegt (und sichtbar gemacht)

Das Logo (in unserem Fall der Link mit dem Text HTML-Seminar.de), soll getrennt von der Steuerung dargestellt werden und weder Unterstreichungen noch Abstände bekommen. In CSS sprechen wir den Bereich über die ID #bereichlogo an.

#bereichlogo {
    color: white;
    background-color: limegreen;		
    display: block;
    padding: 0.5em;
    text-decoration: none;
    float: left;	
    width: auto;
}
der Bereich für das Logo wird gesetzt
der Bereich für das Logo wird gesetzt

Wichtig ist, dass der Bereich #bereichlogo als Blockelement dargestellt wird und umflossen werden kann, aber in unserem 1. Design nur den notwendigen Platz vom Textinhalt „HTML-Seminar.de“ einnimmt. Daher bekommt dieser Bereich die CSS-Anweisung width:auto;.

Um später schneller und einfacher das responsive Design aufzubauen, werden hier aus didaktischen Gründen aus dem einen CSS-Bereich gleich 2 CSS-Bereiche erstellt:

#bereichlogo {
    color: white;
    background-color: limegreen;		
    display: block;
    padding: 0.5em;
    text-decoration: none;
    float: left;	
}
#bereichlogo {
    width: auto;
}

Die Punkte im grünen Bereich kommen von den List-Elementen – diese deaktivieren wir im Bereich #steuerung über:

#steuerung li {
    list-style: none;
}
Listenpunkte ohne Aufzählungszeichen anzeigen
Listenpunkte ohne Aufzählungszeichen anzeigen

Damit die Punkte in der Steuerung nebeneinander erscheinen, werden diese gefloatet:

#steuerung li {
    list-style: none;
    float: left;
}
Steuerungspunkte nebeneinander darstellen
Steuerungspunkte nebeneinander darstellen

Und es soll auch nach etwas aussehen und die möglichen Klickbereiche größer werden. Daher werden die Links im Bereich #steuerung als Blockelement mit einer Höhe von 100% (sprich die Höhe vom umgebenden Element <header>) und einem Innenabstand padding von 0.5em (somit Abstand um alle Seiten), definiert.

#steuerung a {
    display: block;
    height: 100%;
    width: 100%;
    padding: 0.5em;
    text-decoration: none;  /* keine Unterstreichung */
    color: white;  /* Schriftfarbe weiß */
    background-color: gray;   /* Hintergrundfarbe grau */
}	
Steuerungspunkte oben nebeneinander mit Design
Steuerungspunkte oben nebeneinander mit Design

In diesem Design benötigen wir noch keine Schaltfläche für das Aufklappmenü. Daher können wir beide Links „Menü auf“ und „Menü zu“ komplett ausblenden. Da wir als Klassenname .menue-button für beide Links vergeben haben, können wir geschickt mit folgender CSS-Anweisung diese ausblenden:

.menue-button {
    display: none;
}	
Steuerungleiste oben ohne Links für Toggle-Menü
Steuerungleiste oben ohne Links für Toggle-Menü

Jetzt kommt noch ein Versäumnis ans Licht. Auf einmal wird der header-Bereich vom nachfolgenden Inhalt umflossen. Das bekommen wir über die Erweiterung im #header von width:100% mit float: left in den Griff.

header {
    background-color: yellow;
    width: 100%;
    float: left;
    border-bottom: 1px solid black;
}
Steuerungsleiste oben nutzt den kompletten Bereich
Steuerungsleiste oben nutzt den kompletten Bereich

Zugunsten des Designs wollen wir die Steuerung auf der rechten Seite ausgerichtet bekommen.

#steuerung {
	float:right;
}
Navigation rechts ausgerichtet
Navigation rechts ausgerichtet

Und damit der Nutzer beim Überfahren der Links ein Feedback bekommt, nutzen wir :hover.

#steuerung a:hover {
	color: black;
	background: orange;
}
ausgewählte Punkte in Steuerung hervorheben
ausgewählte Punkte in Steuerung hervorheben

Wenn jetzt das Gelb stört, kann im Bereich „header“ die Hintergrundfarbe von yellow auf gray gestellt werden.

header {
	background-color: yellow;
	background-color: gray;
klassische Steuerung oben fertig
klassische Steuerung oben fertig

Allerdings ist es später für das responsive Design interessant zu sehen, wann es vom benötigen Platz oben gut ist einen „Breakpoint“ in den Media Queries zu setzen. Dazu später mehr.

Auf der folgenden Seite geht es weiter mit der Steuerung als Menü-Button