Steuerung über MENÜ-Button ohne JavaScript

Im Folgenden wollen wir unsere bestehenden CSS-Anweisungen aus dem letzten Kapitel erweitern, damit die bisherige Steuerung als Dropdown-Menü angezeigt wird, wenn man den MENÜ-Button nutzt (auch auf dem Handy – bzw. primär für das Handy und Tablet).

Steuerung für Handy und Co
Steuerung für Handy und Co

Wichtig ist bei der Vorgehensweise, dass die CSS-Anweisungen nur erweitert werden! Warum wird klar, wenn die Aktionen zum Umschalten von beiden Designs aktiviert werden (was erst zum Schluss gemacht werden kann).

Wir machen am Ende der CSS-Anweisungen nun den neuen Bereich auf und lassen den Menü-Button anzeigen:

/* CSS erweitern um MENÜ-Button und entsprechende Steuerung */
.menue-button {
	display: block;
}
Unsere 2 Links für das Toggle-Menü wieder einblenden
Unsere 2 Links für das Toggle-Menü wieder einblenden

Jetzt sitzt diese noch als Schrift gleich rechts neben unserem Logobereich. Also geben wir ihm die entsprechende Platzierung über position: absolute; und right:0; und top:0; mit. Weiterhin noch entsprechende Design-Anweisungen:

.menue-button {
	background-color: darkblue;
	display: block;
	position: absolute;
	right: 0;
	top: 0;
	padding: 0.5em;
	color: white;
	cursor: pointer;
	text-decoration: none;
}
Button für Toggle-Menü designen
Button für Toggle-Menü designen

Wir sehen nun 2 Dinge:

  • aus unseren 2 Links scheint einer geworden zu sein und praktischerweise „Menü auf“
  • der letzte Punkt in der Steuerung „Impressum“ ist überdeckt vom neuen Menü-Button

Das überdecken ist kein Problem, da wir eh wollen, dass die Menüpunkte unterhalb des Buttons „MENÜ auf“ angezeigt werden. Also müssen diese nach unten wandern. Die einfachste Variante ist, dass der Bereich „#bereichlogo“ die gesamte Breite beansprucht. Also geben wir ihm diesen:

#bereichlogo {
	width: 100%;
}
die Steuerungspunkte unterhalb vom MENÜ-Button
die Steuerungspunkte unterhalb vom MENÜ-Button

Die einzelnen Menüpunkte sollen jeweils in einer Zeile auftauchen, damit dann gut auf dem Handy antippbar.

Also erweitern wir die CSS-Anweisung damit, dass die einzelnen Listenpunkte eine Breite von 100% bekommen:

#steuerung li {
	width: 100%;
}	
für jeden Steuerungspunkt eine Zeile
für jeden Steuerungspunkt eine Zeile

Fährt man nun mit der Maus darüber, sieht man durch das bereits zugewiesene CSS-Anweisung :hover, dass die Breite noch nicht passt. Sprich das Element, das die Steuerungspunkte umschließt, muss noch die gesamte Breite bekommen.

#steuerung {
	float: left;
	width: 100%;
}

Hier „überschreiben“ wir die bisherige Anweisung für die #steuerung, die wir weiter oben auf float: right; gesetzt haben. Diese weiter oben wird aber so belassen, da dies für die klassische Steuerung wichtig ist.

für jeden Steuerungspunkt eine Zeile und links ausgerichtet
für jeden Steuerungspunkt eine Zeile und links ausgerichtet

Gehen wir jetzt mit der Maus auf einen Steuerungspunkt, dann sehen wir, dass die gesamte Breite genutzt wird.

Wir wollen noch zum Abgrenzen eine graue Linie darunter, sprich folgende CSS-Anweisung wird erweitert.

#steuerung li {
	width: 100%;
	border-bottom: 2px solid silver;
}
zur Abgrenzung graue Trennlinie unter jeden Steuerungspunkt
zur Abgrenzung graue Trennlinie unter jeden Steuerungspunkt

Und eigentlich sollen die einzelnen Steuerungspunkte erst angezeigt werden, wenn jemand auf dem MENÜ-Button klickt – also müssen die Punkte erst einmal ausgeblendet werden. Die CSS-Anweisung für den Bereich #steuerung wird entsprechend erweitert:

#steuerung {
	float: left;
	width: 100%;
	display: none;
}	
Steuerung ausblenden
Steuerung ausblenden

Damit man als Nutzer auch sieht, dass man etwas bei der Schaltfläche „MENÜ auf“ machen kann, erweitern wir um die :hover-Anweisung.

.menue-button:hover {
	color: black;
	background: orange;
}
MENÜ-Schaltfläche reagiert auf Mausberührung
MENÜ-Schaltfläche reagiert auf Mausberührung

MENÜ-Button anklickbar

Jetzt kommen wir zur eigentlich Magie. Über die CSS-Anweisung :target kommt nun die Magie der Aktion rein. Warum nicht :hover? Hover funktioniert auf Handy und Tablet nicht!

Klickt, bzw. tippt der Besucher die Schaltfläche #nav-menue mit dem Finger an, soll der Bereich #steuerung aufklappen (sprich sichtbar werden).

#nav-menue:target #steuerung {
	display: block;
}
MENÜ-Schaltfläche funktioniert – die Steuerung klappt auf
MENÜ-Schaltfläche funktioniert – die Steuerung klappt auf

Jetzt fehlt uns noch, dass die Schaltfläche „MENÜ auf“ verschwindet und „MENÜ zu“ erscheint.

#nav-menue:target .menue-button-beschr-open {
	display: none ; 
}	
MENÜ-Schaltfläche funktioniert – die Steuerung klappt auch wieder zu
MENÜ-Schaltfläche funktioniert – die Steuerung klappt auch wieder zu

Und schon passt das Ganze.

Im folgenden Kapitel automatisieren wir nun die Darstellung. Je nach Bildschirmgröße (besser Bildschirmbreite) wird die klassische Steuerung bzw. das Toggle-Menü angezeigt.