C1: Hauptmenü / Navigation gestalten

Vorwort

In diesem Beitrag gestalten wir das Hauptmenü / Navigation optisch  gefälliger. Das Thema bietet sich förmlich zum Ausprobieren an – allerdings auch zum Verzweifeln. Ich bin mir nicht sicher, ob keinerlei Kenntnisse hier für ein stressfreies Ausprobieren  nicht eher von Vorteil sind.

Außerdem werde ich noch einige nützliche Features von Google Chrome zum Codeuntersuchen vorstellen.

Es sind keine Programmierkenntnisse notwendig. Als Browser mit „Element-Untersuchen“ benutze ich Google Chrome. Als Codeeditor kommt Brackets zum Einsatz.

Das Modifizierungsergebnis für das Hauptmenü / NavigationAbb.1: Modifiziertes, neugestaltetes Hauptmenü / Navigation. Das ist das Ziel. Das Hauptmenü ist durch seinen Hintergrund (1) optisch abgesetzt. Links, über die man mit dem Cursor rüber schwebt (engl. hover), verändern ihre Textfarbe (2) und ihre Hintergrundfarbe (2) als Hovereffekt.

Die Themeausgangslage für das Hauptmenü / Navigaton für einen späteren Vergleich.Abb.2: Die Ausgangslage als Vergleich. Von „da aus“ wird der Code modifiziert.

Teil 1 – Gesamtes Hauptmenü / Navigation untersuchen

Untersuchen der Codestelle für das gesamte Hauptmenü / Navigation über den Codeinspektor.

1. Drücken Sie in Google Chrome die rechte Maustaste im Bereich  Hauptmenü / Navigation und wählen Sie ‚Untersuchen‘.

CSS - Befehl, um das Hauptmenü / Navigation optisch hervorzuheben.

Hinweis:

In ‚SH – Manier‘ (3) vermuten wir, dass das ‚Hauptmenü / Navigation‘ irgendetwas mit der Klasse ‚main-navigation‘ zu tun haben könnte.
Der ‚a-Tag-Befehl‘ hat was mit Links zu tun.
Hier könnten wir also richtig sein.

Den Befehl für die Hintergrundfarbe haben wir schon kennengelernt.

2. Fügen Sie an entsprechende Stelle den Befehl folgenden Befehl ein:
background-color: rgba(255,255,225,0.5);

Das Codesnippet werden wir in unsere aus den vorherigen Beiträgen bekannte style.css des Childthemes kopieren und speichern.

Hinweis:

Das Ergebnis (4) sieht man sofort in der Liveansicht.

Speicherort der 'style.css' des Childthemes.

3. Öffnen Sie die ‚style.css‘ des Childthemes mit einem geeigneten Codeeditor (z.B. Brackets).

Der Codeteil wird in diese 'style.css' kopiert.

4. Fügen Sie das Codesnippet in die style.css des Childthemes ein und speichern.

Damit wäre der erste Teil erfolgreich erledigt.

Teil 2 – Hauptmenü / Navigation genauer untersuchen

Genaueres Codeuntersuchen über Features im Inspektor.

5. Drücken Sie die rechte Maustaste im Hauptmenü / Navigation und anschließend auf ‚Untersuchen‘.

6. Drücken Sie auf ‚:hov‘, um Hoverzustände zu simulieren und an die entsprechende Stelle im Quellcode zu gelangen.

Überprüfung über den Inspektor, ob die Codestelle die Gewollte ist.

7. Erzwingen Sie über Häckenaktivierung den Hoverstatus. Der Quellcode wird an der entsprechenden Stelle angezeigt.

8. Fügen Sie gewünschte Codezeilen hinzu
zum Beispiel: background-color: darkred;
und beobachten in der Liveansicht das Verhalten. Vergleichen Sie das Ergebnis mit unerem Ziel aus Abb.1!

Egal was Sie machen, es wird nie so aussehen wie in Abb.1!

Das Problem muss also anders gelöst werden!

Kurzexkursion: Realisierung Hauptmenü / Navigation mit CSS und HTML

Links werden über das ‚a-Tag‘ in html realisiert. Nun besteht das Hauptmenü / Navigation aus Links. Aber zusätzlich werden hier diese Links in Listen realisiert. Das Tag dafür ist an der Bezeichnung ‚li‘ zu identifizieren.

Wir suchen also eine Stelle die an ‚li‘ und ‚hover‘ zu erkennen ist!

Teil 2 – Zweiter Versuch!

Codestelle war falsch! Neuer Versuch.

Gehen Sie zurück und führen die Schritte 5. – 7. aus!

Zurück zur genaueren Codeuntersuchung.

9. Drücken Sie auf style.css:xyz (hier und wahrscheinlich auch bei Ihnen 831).

Hinweis:

Wir sind dann schon in der richtigen Klasse ‚.main-navigation‘. Auch das Stichwort ‚hover‘ ist schon da.

Nach Tipp fehlt aber noch unser ‚li‘.

Ein CSS-Befehl zur Live-Kontrolle wird verwendet.

10. Fügen Sie einen kontrollierbaren Befehl – z.B. color :red; – ein und testen das Liveverhalten.

Hinweis:

Irgendwie ist das noch nicht die richtige Stelle. Nach dem vorherigen Hinweis erscheint das auch nachvollziehbar.

Eine neue, die Richtige, Codemodifizierungstelle wird identifiziert.

11. Drücken Sie die rechte Maustaste – dieses Mal über dem aktiven Link – und wählen Sie ‚Untersuchen‘.

12. Nun taucht „unser li“ auf. Drücken Sie style.css:xyz (hier und wahrscheinlich bei Ihnen 3016).

Testen der Codemodifizierung im Inspektor mit Anzeige des Ergebnis in der Liveansicht.

13. Hier nun sind wir an der richtigen Stelle. Für das gezeigte Verhalten in der Liveansicht sind folgende Codezeilen zu modifizieren bzw. zu ergänzen:

color: white;

background-color: darkred;

Kopieren Sie den gesamten bei 13 umrandeten Code in den Zwischenspeicher.

Öffnen der 'style.css' des Childthemes.

14. Öffnen Sie die ‚style.css‘ des Childthemes mit einem geeigneten Codeeditor (z.B. Brackets)

Untersuchen der Codestelle für das gesamte Hauptmenü / Navigation über den Codeinspektor.

15. Fügen Sie den gesamten Quellcode ein und rücken ggf. den Code ein.

Speichern Sie die Datei.

Hinweis: Die Veränderungen sind nun dauerhafte umgesetzt.

Hinweis: Die ‚@media – Anweisung‘ steht im CSS-Code und „umgibt“ u.a. auch unseren modifizierten Code. Der Einfachheit halber habe ich den direkt angegeben und nicht gezeigt, wie man sich den zusammen sucht.

Bei ‚@media – Anweisungen‘ handelt es sich um sogenannte Media Queries.

 

 

 

 

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.