Hi, willkommen zurück.
Ratet mal was?
Wir werden eine andere, und
unsere letzte Navigationsleiste zusammen, in dieser Code-Überprüfung machen.
Dieser ist jedoch ein bisschen anders, nicht nur für
die Art und Weise, wie wir die Dinge einrichten, sondern weil ich mit Ihnen über
die Zugänglichkeit sprechen möchte, wie viele Leute ihre Navigationsleisten machen.
Der neue Weg, den
ich auf diese Weise verwendet habe, besteht darin, Ihre Navigationslinks als Teil von Listen zu erstellen.
Sie können sehen, wir haben es schon ein bisschen anders hier drüben.
Ich habe eine ungeordnete Liste mit einem, zwei, drei, vier Listenelementen, und
einige dieser Listenelemente haben selbst ungeordnete Listen.
Während dies sehr häufig ist,
gibt es einige Usability-Probleme, wenn Sie erkennen, sind das wirklich Listen?
Denn wenn nicht, ist das ein semantisches Tag, das wir verwenden, das wir vielleicht vermeiden möchten.
Aber es ist so üblich, ich will es dir zeigen und dich damit spielen lassen und
deine eigenen Entscheidungen treffen.
Das andere Problem, wenn wir diese Dropdown-Navigationsleiste machen,
hat mit der Zugänglichkeit zu tun, dass Menschen in der Lage sind,
über bestimmte Dinge zu bewegen, die Sie aktivieren möchten.
Ich denke, wir waren alle da, wenn wir auf einer Webseite waren und
wir versuchen, mit dem Mauszeiger über etwas zu bewegen, um auf einen Link zu klicken.
Und es knallt immer wieder weg, weil unsere Hand zu wackelig ist oder
wir müssen gleichzeitig über drei Dinge schweben.
Auch wenn dies eine Technik ist, die ich mit Ihnen teilen möchte und
Ihnen helfen zu verstehen, hoffe ich, dass Sie sicherstellen, dass alle Anwendungen, die Sie tun,
Ihr Bestes tun, um sicherzustellen, dass es so zugänglich wie möglich ist.
Also wieder, lassen Sie uns mit diesem einfachen, langweiligen HTML-Code beginnen und
sehen, ob wir es nicht schaffen, wie etwas aufregender aussehen zu lassen.
Was wir hier jetzt haben, ist eine horizontale Navigationsleiste
, die Dropdown-Elemente haben wird.
Also, wenn ich über Home gehe, gibt es nichts Besonderes zu sehen, aber wenn ich über
Bilder gehe, können Sie sehen, dass ich drei zusätzliche Links habe, die ich versuchen kann, und
dasselbe mit Rezepten, und Kontakt, wieder, ist ganz von selbst.
Also, wie habe ich das gemacht?
Wie habe ich es bekommen, damit 2015, 14 und 13 nicht auftauchen, wenn ich nicht schwebe?
Und das gleiche mit den Rezepten?
Werfen wir einen Blick. In
Ordnung, ich werde die Leiche in der Navigation überspringen,
weil ich denke, du weißt, wie man das alles macht.
Stattdessen lassen Sie uns über die verschiedenen Listen selbst sprechen.
Tut mir leid, listen Sie die Elemente selbst in den Links auf.
Also, was ich getan habe, ist, dass ich hier reingegangen bin, so dass
Sie beide gleichzeitig sehen können.
Und es ist sehr schwach, und ich wünschte, ich hätte jetzt eine andere Farbe gemacht.
Aber ich habe eine Grenze zwischen jeder dieser Optionen.
Nun, es wäre ein bisschen komisch für
mich ausgesehen, eine Grenze hier entlang der Seite zu haben.
Also, was ich tun musste, ist, dass ich gegangen bin und sagte, du weißt was?
Für das letzte Listenelement, das allerletzte, setzen wir keinen Rahmen ein.
Es sind diese kleinen kleinen Anpassungen, die Sie in Ihren Code einfügen können
, um ihn ein wenig professioneller aussehen zu lassen.
Wir wollen auch keine Grenzen für die Unterpunkte, oder?
Weil es nichts gibt.
Da diese blockiert sind, brauchen wir keine Grenzen an der Seite.
Also, ich habe das Gleiche hier gemacht, wo ich gesagt habe, weißt du was?
Ich will hier drüben keine Grenzen benutzen.
Ich hoffe, ziemlich geradlinig.
Jetzt schauen wir uns nochmal an.
Ich habe ein einfaches Styling für meine Navigationslinks gemacht, in Ordnung?
Das Einzige, was ich getan habe, ist, wieder,
ich wollte Ihnen ein Beispiel für die Verwendung von Übergang zeigen.
Der Übergang hier ist, was langsam die Farbe ändert, wenn Sie den Mauszeiger über,
anstatt eine schnelle Änderung.
Sie können also sehen, es ist ein bisschen schrittweiser als plötzlich, in Ordnung?
Das Aktive ist genau wie beim letzten Mal.
Nun, hier ist der interessante Teil.
Wir werden über die Untermenüs reden, okay?
Woher weiß der Browser, wenn etwas ein Untermenü ist?
Nun, es kann sich das DOM ansehen, und es kann nach unten schauen und gehen, oh, ich bin in der Navigation.
Und jetzt bin ich in einer ungeordneten Liste, und hier bin ich in einem Listenelement.
Wenn es einen anderen Listeneintrag unten findet, ist es eine Art Verkettung,
es weiß, oh, oh, ich bin in einem Untermenü.
Genau hier weiß es, dass ich im Navi bin, ich bin in einer Liste,
und ich habe gerade eine ungeordnete Liste gefunden.
Also, wie wir es so eingerichtet haben, dass es am Anfang nicht angezeigt wird, ist, dass ich
die Position auf absolut gesetzt habe, und ich habe die Anzeige auf keine gesetzt.
Es wird also nicht standardmäßig angezeigt. Das
wird nicht passieren.
Ok?
Also, wie bekomme ich es
, damit es plötzlich auftaucht, wenn wir etwas in dieser Linie machen wollen?
Nun, wir wollen herausfinden, wie man es hier ändert, wenn ich den Mauszeiger über ein Listenelement führe
, das eine ungeordnete Liste darunter hat, ändere diese Anzeige von keiner zu blockieren.
Also, diese beiden Codezeilen hier, das ist wirklich Einrichtung.
So dass, wenn ich hierher gehe, standardmäßig die
Anzeige keine ist, aber wenn ich den Mauszeiger zeige, wird die Anzeige Block.
Es ist ein sehr einfacher, sehr kurzer Code, sehr leistungsfähiges Konzept zu verstehen.
Also habe ich Ihnen ein paar verschiedene Möglichkeiten gezeigt, wie Sie Ihre Navigationsleisten stylen können.
Wir haben horizontale, wir haben vertikale, wir haben Drop down.
Ich hoffe wirklich, dass Sie eine auswählen, mit der Sie sich am wohlsten fühlen, oder
eigentlich wirklich am aufgeregtesten, und erstellen Sie
hier in dieser CSS-Klasse eines für Ihr endgültiges Projekt.
Mach dir keine Sorgen, wenn du auf Probleme stößt.
Posten Sie im Diskussionsforum.
Gehen Sie online und suchen Sie nach Antworten.
Aber was ich wirklich hoffe, ist, dass man etwas kreieren kann, auf das man stolz
ist, das sowohl schön als auch zugänglich ist.
Viel Glück.