Advertisement
  1. Code
  2. HTML & CSS

Wie erstellt man ein Dropdown-Navigationsmenü mit HTML5, CSS3 und JQuery?

by
Read Time:16 minsLanguages:

German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)

In diesem Tutorial sehen wir uns an, was wir mit HTML5 und CSS3 erreichen können, wenn es um die Grundnahrungsmittel aktueller Websites geht: das bescheidene Dropdown-Navigationsmenü. Wir werden auch jQuery verwenden, um die Effekte zu verarbeiten und den letzten Schliff für uns zu geben.

HTML5 bringt ein dediziertes <nav>-Element in die Spezifikation, das als Container für alle wichtigen Navigationsstrukturen verwendet werden soll, z. B. die Hauptmenüs für die vertikale oder horizontale Site-Navigation oder ein Inhaltsverzeichnis innerhalb der Seite. IE unterstützt dieses neue Element leider noch nicht, aber es gibt eine einfache Lösung, die wir verwenden können, von der Sie sicher alle wissen.

Mit CSS3 können wir auf die Verwendung mehrerer Hintergrundbilder und möglicherweise eines oder zweier zusätzlicher Verpackungscontainer verzichten und uns(fast) ausschließlich auf einige der neuen Stileigenschaften wie beispielsweise abgerundete Ecken und Schlagschatten verlassen. die für unterstützende Browser verfügbar sind. Auch hier unterstützen nicht alle Browser (Husten, IE!) Diese neuen Regeln, aber wir können sehr einfach Fallback-Lösungen für die Browser bereitstellen, die unsere Stile nicht verarbeiten können.

Envato Market bietet Ihnen übrigens eine große Auswahl an stilvollen CSS-Menüs zur Auswahl, darunter PickArt, eine einfache, saubere und elegante Lösung, die für nur 4 US-Dollar einsatzbereit und installierbar ist.

PickArt on Envato MarketPickArt on Envato MarketPickArt on Envato Market
PickArt auf dem Envato Market

Sie können auch einen der erfahrenen Dienstleister von Envato Studio ausprobieren. Zum Beispiel wird Lukasz Czerwinski innerhalb von sieben Tagen ein ganz neues jQuery-Plugin nach Ihren Vorgaben für 115 US-Dollar mit einer 100% igen Zufriedenheitsbewertung erstellen. Zu seinen Angeboten gehören Dropdown-Menüs, integrierte Mediengalerien mit Ihren sozialen Diensten, Schieberegler und vieles mehr.

Wenn Sie nicht finden können, was Sie brauchen, oder wenn Sie es lieber selbst tun möchten, lesen Sie weiter, um herauszufinden, wie.


Schritt 1. Erste Schritte

Wir benötigen eine Kopie der neuesten Version von jQuery, Version 1.4.2 zum Zeitpunkt des Schreibens, sowie eine Kopie der aktuellen Version(1.1) der hervorragenden Modernizr-Bibliothek, mit der wir unterstützende Browser ansprechen mit dem CSS3 verwenden wir.

Erstellen Sie einen Projektordner für die Dateien, die wir irgendwo auf Ihrem Computer erstellen, und nennen Sie ihn nav. Erstellen Sie in diesem Ordner drei neue Ordner; einer heißt js, einer heißt css und einer heißt fallback. Stellen Sie sicher, dass Kopien von jQuery und Modernizr im Ordner js gespeichert sind.


Schritt 2. Die zugrunde liegende Seite

Beginnen Sie die Codierung, indem Sie die folgende Seite in Ihrem bevorzugten Code-Editor erstellen:

Speichern Sie dies als nav.html im nav-Ordner. Wir beginnen mit dem minimalen HTML5-Doctype, mit dem wir den Dokumenttyp in einem Viertel des von uns verwendeten Codes angeben können. Wir geben auch die Standardsprache und die Zeichenkodierung an. Obwohl das Dokument ohne diese beiden Dinge weiterhin validiert wird, empfiehlt es sich, sie einzuschließen, und die Seite löst Validierungswarnungen aus, wenn die Standardsprache nicht angegeben ist. Anschließend verknüpfen wir ein Stylesheet (wir erstellen es als Nächstes) und verwenden einen bedingten Kommentar, der auf den IE abzielt, um bei Bedarf das hervorragende html5.js-Skript von Remy Sharp zu laden.

Im Hauptteil der Seite haben wir das <nav>-Element als Container für eine herkömmliche Liste von Links, und wir haben auch ein Untermenü für ein gutes Maß geworfen. Das Element erstellt auf magische Weise kein Navigationsmenü für uns und enthält keine neuen Menüelemente oder ähnliches. Daher ist eine ungeordnete Liste immer noch eine geeignete Wahl. Das <nav>-Element ist nur ein semantischer Container für unser Menü, der seine Funktion innerhalb des Dokuments beschreibt, um das generische <div>-Element zu ersetzen, das nichts inhärent über seinen Zweck auf der Seite angibt.

Am Ende des Textes verlinken wir auf unsere Skriptdateien jQuery und Modernizr. Wir werden jQuery etwas später verwenden, wenn wir das Verhalten für das Menü hinzufügen, aber Modernizr wird es sofort tun, die Funktionen des verwendeten Browsers erkennen und dem HTML-Element eine Reihe von Klassennamen hinzufügen Wir können unser CSS3 so hinzufügen, dass es nur auf Browser angewendet wird, die sie verwenden können. Wir haben auch den Klassennamen no-js zum <body> der Seite hinzugefügt. Wir werden es später entfernen, wenn JavaScript aktiviert ist, damit wir damit auch Stile hinzufügen können, die nur angewendet werden sollten, wenn JavaScript deaktiviert ist.


Schritt 3. Einige grundlegende Stilelemente  

Fügen wir nun einige grundlegende Stile hinzu. Erstellen Sie das folgende Stylesheet:


Schritt 4. CSS3

Als nächstes können wir unser CSS3 hinzufügen:

Mit den Klassen, die Modernizr dem <html>-Element hinzugefügt hat, können wir die gewünschten CSS3-Stile einfach und sicher hinzufügen. Wir verwenden den border-radius stil, um dem <nav>-Element abgerundete Ecken zu geben. Wir müssen Mozilla- und Webkit-Stildeklarationen mit Präfix sowie die Standardstile mit border-radius für Browser, die sie unterstützen, wie Opera, angeben. Wir müssen dies mit den meisten unserer CSS3-Stile tun.

Neben der Eckenrundung des <nav> geben wir ihm auch einen Farbverlauf und einen Schlagschatten. Die Verlaufsstile sind ziemlich komplex und unterscheiden sich für Mozilla- und Webkit-basierte Browser, die derzeit die einzigen Browser sind, die sie implementieren. Beide Browser verwenden die Eigenschaft background-image. In Firefox verwenden wir -moz-linear-gradient, um einen linearen Gradienten hinzuzufügen. Es sind Werte erforderlich, die dem Startpunkt des Verlaufs(0%), dem Punkt, an dem die erste Farbe in die zweite Farbe (22 Pixel) übergeht, dem Winkel der Verlaufsachse (90 Grad) und der ersten Farbe (#999) entsprechen. und die zweite Farbe (#222).

Wir können den gleichen Verlauf in Safari oder Chrome mit -webkit-gradient erhalten, und die Syntax unterscheidet sich geringfügig. Wir geben an, dass es sich um einen linear Verlauf handeln soll, und geben dann zwei Punkte an, die dem Browser mitteilen, wo der Verlauf beginnen und enden soll. Die Werte im Beispiel entsprechen den Werten für links, oben und rechts von 0% und 70% für den unteren Bereich, wodurch wir den gleichen Stil wie in Firefox erhalten. Zuletzt geben wir die Farben des Verlaufs an.

Wenn wir den Schlagschatten anwenden, kombinieren wir ihn mit der Modernizr-Klasse für RGBA sowie mit Boxshadow, damit unser Schatten transparent ist. Die Eigenschaften für Mozilla und Webkit sind identisch, und wir stellen auch die eigentliche box-shadow Eigenschaft zur Unterstützung von Browsern bereit. Die Werte, die wir für diese Regel angeben, sind der linke Versatz (2 Pixel), der obere Versatz (2 Pixel), das Ausmaß der Unschärfe (2 Pixel) und zuletzt die Farbe des Schattens(0,0,0). In der Farbe verwenden wir RGBA, wodurch wir die Deckkraft auf 75%(0,75) einstellen können.

Ein weiterer interessanter Stil, den wir verwenden, ist die transform, um Text um 180 Grad zu drehen. Wenn wir das Skript gleich schreiben, werden Sie feststellen, dass wir allen Listenelementen, die ein Untermenü enthalten, eine Untermenüanzeige in Form eines Caret-Zeichens hinzufügen. Dieser Stil dreht das Zeichen so, dass es nach unten zeigt bedeutet, dass wir bei der Unterstützung von Browsern nicht einmal ein Bild für diese Funktion verwenden müssen.

Die verbleibenden Regeln legen unterschiedliche Verläufe, abgerundete Kanten, Deckkraft mit RGBA und Schlagschatten für andere Elemente im Menü <nav> fest, z. B. schöne abgerundete Ecken unten und einen Schlagschatten im Untermenü, und invertieren den Verlauf für einen attraktiven Schwebezustand . Jetzt sollte unser Navigationsmenü in einem unterstützenden Browser so aussehen:

In unterstützenden Browsern können wir unsere Elemente ohne Verwendung eines einzelnen Bildes ziemlich heiß aussehen lassen, was bedeutet, dass unsere Seiten mit weitaus weniger HTTP-Anforderungen viel schneller geladen werden. Allerdings unterstützen nicht alle Browser das CSS3-Styling, insbesondere jede IE-Version. Daher müssen wir unsere Fallback-Stile noch definieren. Fügen Sie dem Stylesheet den folgenden Code hinzu:

Modernizr fügt auch Klassennamen hinzu, die anzeigen, welche CSS3-Funktionen dem Browser nicht zur Verfügung stehen, sodass wir problemlos alternative Regeln bereitstellen können, die bildbasierte Fallbacks verwenden, bei denen Funktionen nicht unterstützt werden, sowie Stile, die wir möglicherweise benötigen mit den Bildern.

Sie werden feststellen, dass wir auch hier Selektoren verwenden, die auf unsere no-js-Klasse abzielen. Dies liegt daran, dass Modernizr bei deaktiviertem JavaScript nicht ausgeführt wird und die benötigten Klassennamen nicht zum Dokument hinzufügt. Daher werden unsere Nicht-CSS3-Fallbacks auch zu unseren Nicht-JS-Fallbacks.


Schritt 5. Hinzufügen des Skripts

Fügen wir nun ein Skript hinzu. Als erstes müssen wir die Klasse no-js aus dem Hauptteil der Seite entfernen, wenn JavaScript nicht deaktiviert ist. Wir möchten dies so schnell wie möglich beim Rendern der Seite tun, um ein Flackern beim Ändern der Stile zu vermeiden. Fügen Sie direkt nach dem öffnenden Body-Tag den folgenden Code hinzu:

Alles, was wir tun, ist, das <body>-Element anhand des Tag-Namens abzurufen und seine className-Eigenschaft auf eine leere Zeichenfolge zu setzen. Normalerweise würden wir jQuery verwenden, um dies für uns zu tun. Da jQuery jedoch bei Ausführung dieses Skripts nicht geladen wurde, können wir es nicht verwenden. Wir könnten jQuery natürlich vorher laden, aber dann würden wir einen massiven Leistungseinbruch hinnehmen. Unser Skript besteht nur aus 2 Codezeilen, sodass es keine nennenswerte Verzögerung verursacht. Da es ausgeführt wird, bevor der Browser das Markup für das <nav>-Element überhaupt verarbeitet hat, wird kein nicht gestylter Inhalt angezeigt.

Nachdem die Klasse aus dem Hauptteil entfernt wurde, funktionieren unsere CSS-Untermenüs nicht mehr, sodass wir dieses Verhalten wieder in jQuery einfügen und gleichzeitig ein wenig verbessern können. Fügen Sie am Ende des Dokuments direkt nach der Skriptreferenz für Modernizr den folgenden Code hinzu:

Das Skript ist relativ einfach; Wir verpacken unseren Code in einen Abschluss und übergeben das jQuery-Objekt mit sicherem Namensabstand an das Dollarzeichen, nur für den Fall, dass eine andere Bibliothek verwendet wird, wenn der Code in Produktion geht. Anschließend wird ein Verweis auf das <nav>-Element zwischengespeichert, damit wir darauf verweisen können, ohne ihn wiederholt aus dem Dokument auszuwählen. Wir verarbeiten dann jedes Listenelement innerhalb des Menüs.

Für jedes übereinstimmende Element prüfen wir, ob es verschachtelte <ul>-Elemente enthält, und fügen dem Listenelement ein neues <span>-Element hinzu. Dies wird zu unserem Untermenüindikator. Wenn ein Untermenü gefunden wird, fügen wir dem Listenelement, das das Menü enthält, auch die Ereignishelfer mouseenter() und mouseleave() hinzu. Diese Helfer zeigen und verbergen das Untermenü nur, indem sie es nach unten oder oben schieben. Beachten Sie die Verwendung der stop()-Methode, mit der verhindert wird, dass Animationen zum Öffnen und Schließen in die Warteschlange gestellt werden, wenn der Mauszeiger wiederholt auf die Ziellistenelemente bewegt wird.

An diesem Punkt sollten wir in Bezug auf die meisten Situationen an einem recht schönen Ort sein; In jedem Browser, der HTML5 unterstützt, sollte unser Menü relativ ähnlich aussehen, unabhängig davon, ob CSS3 unterstützt wird oder nicht und ob die Skripterstellung aktiviert ist oder nicht. IE stellt uns jedoch vor ein Problem; Wenn JS aktiviert ist, lässt das Skript htmlshiv.js den IE das <nav>-Element verstehen und unsere Nicht-CSS3-Stile werden aufgegriffen und implementiert - alles sehr gut und gut (wir haben immer noch einige Probleme mit IE7, wie unter anderem mit unserem Auto -clearing :after Regeln nicht verstanden oder angewendet wurden, aber wir werden gleich darauf zurückkommen).

Die Probleme beginnen jedoch, wenn der IE mit deaktiviertem Skript verwendet wird. In dieser Situation wird das Skript html5shiv.js nicht ausgeführt und der IE versteht das Element <nav> nicht. Keiner unserer Selektoren, die nav enthalten, wird implementiert! Es ist jedoch nicht das Ende der Welt. Wir können ein alternatives Stylesheet bereitstellen, das nur verwendet wird, wenn der Browser JS deaktiviert hat und IE ist. Fügen Sie direkt nach dem Skript, das die no-js-Klasse aus dem <body>-Element entfernt, Folgendes hinzu:

Eine einfache Lösung. Wir müssen jetzt das neue Stylesheet erstellen. Fügen Sie einem neuen Dokument in Ihrem Code-Editor die folgenden Regeln hinzu:

Speichern Sie dies im CSS-Ordner als ie.css. Wie Sie sehen, zielen wir in diesem Stylesheet überhaupt nicht auf das <nav>-Element ab. Einige der Stile, die wir zuvor dem <nav>-Element gegeben haben, wurden stattdessen dem <ul>-Element hinzugefügt, und es gibt einige neue Stile, die speziell für dieses Szenario aufgenommen werden müssen. Im Wesentlichen erzeugt das Stylesheet jedoch den gleichen Effekt wie zuvor, sodass IE8 mit deaktiviertem JS weiterhin wie folgt aussehen sollte:

Wir mussten für dieses Szenario noch ein paar Bilder verwenden, da wir nicht mehr über das <nav>-Element verfügen, an dem die Hintergrundwiederholung für den Hauptverlauf hängen bleibt. Das sind also alle modernen Browser mit aktiviertem und deaktiviertem JS, die wie erwartet funktionieren - wenn möglich mit CS3 und wo nicht mit Image-Fallbacks.

IE7 wird auch bei aktiviertem Scripting weiterhin Probleme für uns verursachen. Wir können dies jedoch leicht genug beheben, indem wir einen anderen bedingten Kommentar verwenden, der speziell auf IE7 abzielt, und ein neues Stylesheet nur für IE7 bereitstellen, mit dem die Layoutprobleme behoben werden. so etwas ist alles was wir brauchen:

Speichern Sie dies im css-Ordner als ie7.css und fügen Sie dem <head> der Seite einen neuen bedingten Kommentar hinzu:

Na, bitte; Ein Navigationsmenü mit den neuesten Elementen und Stilen mit Fallbacks und Korrekturen für ältere Browser.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.