Codieren Sie ein Dropdown-Navigationsmenü für das Web Magazine Style (JavaScript)

Die Entwicklung des Frontends ist zu einer sehr beliebten Nische geworden. Mit der Erweiterung von jQuery beginnen immer mehr Webdesigner fantastische Animationen und Seiteneffekte zu erstellen. Die Möglichkeiten sind unbegrenzt!

In diesem Lernprogramm erstellen wir ein Dropdown-Navigationsmenü im Stil eines Magazins. Dies wird mit einigen ausgefallenen CSS3-Techniken erstellt, um in standardkonformen Browsern zu funktionieren. Selbst wenn Sie mit jQuery wackelig sind, sollten Sie in der Lage sein, mit diesem bisschen Code Schritt zu halten und möglicherweise etwas Neues zu lernen. Schauen Sie sich das Live-Demo-Skript in meinem Beispiel an.

Versuch es

Live-Demo ansehen - Quelle herunterladen

Strukturierung unserer Seiten-HTML

Wir sollten mit dem Erstellen des grundlegenden Seitenlayouts beginnen. Ich habe dies in HTML mit einer ungeordneten Liste für Menü-Links gemacht. Sowohl die CSS-Stile als auch die jQuery-Bibliothek werden extern ausgeschlossen, wodurch Platz gespart wird. Unten ist die Überschrift zu unserem HTML-Code hinzugefügt.

     DesignShack Sexy Magazin-Dropdown-Menü

Die jQuery-Bibliothek v1.6.2 wird von Web-Entwicklern auf den Servern von Google gehostet. Dies kann oft die Last auf Ihren eigenen Servern verringern. Unterschiede sind besonders auffällig, wenn Sie täglich zehn oder hunderttausende Besucher bearbeiten. Ich habe auch meinen Doctype auf HTML5 gesetzt, nicht, dass es sich auf unser Skript auswirkt.

Wenn Sie im Code etwas nach unten gehen, werfen wir einen Blick auf den inneren Körperinhalt. Nachfolgend finden Sie eine Kopie / Einfügen von allem, was sich im Body-Tag befindet. Ich habe den endgültigen jQuery-Code entfernt, da wir uns das in einem späteren Abschnitt ansehen werden.

   <h1><img src="//lesptitesaffairesdemayl.be/img/images_1/code-a-web-magazine-style-dropdown-navigation-menu_2.jpg"></h1>    <ul> <li>Startseite</li> <li>Über die Mag <ul> <li>Unternehmen</li> <li>Autoren</li> <li>Schreiben Sie für uns</li> <li>Werbung</li> <li>In Kontakt kommen</li> </ul> </li> <li>Werbegeschenke <ul> <li>PSD</li> <li>AI-Vektoren</li> <li>Muster</li> <li>Icons</li> </ul> </li> <li>Tutorials <ul> <li>HTML5</li> <li>CSS3</li> <li>jQuery</li> <li>PHP MySQL</li> <li>Ruby on Rails</li> </ul> </li> <li>Web-Tools <ul> <li>Performance</li> <li>Browsertest</li> <li>CMS-Plugins</li> <li>Spickzettel</li> </ul> </li> <li>Originale <ul> <li>Website design</li> <li>Handy, Mobiltelefon</li> <li>Benutzeroberfläche</li> <li>Freelancer</li> <li>Inspiration</li> </ul> </li> </ul>

Damit sollte unsere HTML-Hauptstruktur abgeschlossen sein. Alle verschachtelten Listen verwenden ul-Elemente, die sich innerhalb eines übergeordneten Listenelements befinden. Nicht zu schwierig, wenn Sie grundlegende Kenntnisse in Webdesign und Codierung haben. Gehen wir also weiter in die CSS-Stile.

Mit CSS gestalten

Ich werde jedes Segment der kleinen style.css-Datei mit dem Democode aufschlüsseln. Wir beginnen mit einem Gruppenblock, der die Ränder / Füllungen für das gesamte Dokument zurücksetzt. Eine einfache Seite zum Zurücksetzen der Seite.

 * {Marge: 0; Polsterung: 0; } body {font-family: Arial, Tahoma, serifenlos; Schriftgröße: 11px; Farbe: # 232323; } / * @group structure * / #head {background: # e1ecf6; Höhe: 100px; Polsterauflage: 15px; Rahmen unten: 1px fest # d5dce8; } .wrap {width: 800px; Marge: 0 auto; }

Der Kopfinhalt enthält eine kleine Logo-Grafik, die ich in Photoshop erstellt habe. Ich habe .wrap als Klasse verwendet, damit wir dieselben Stile mit unserem Nav-Menü wiederverwenden können. Dieser Wrapper erstellt eine 800px-Inhaltsdatei und zentriert sie auf der Seite.

Die nächste Gruppe ist etwas größer und bietet Stile für das Hauptnavigationsmenü und seine Listenelemente. Beachten Sie das #nav Selector befindet sich in unserem ursprünglichen ungeordneten Listenelement, sodass wir später alle sub-ul-Elemente auswählen können.

 / * @gruppen-Kernnavigationsmenü * / #nav {margin: 0; Polsterung: 0; Listenstil: keine; Rahmen links: 1px fest # d5dce8; Rahmen rechts: 1px fest # d5dce8; Rahmen unten: 1px fest # d5dce8; Rand unten links Radius: 4px; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; Rahmen unten rechts: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; Höhe: 50px; Polsterung links: 15px; Polsterung rechts: 15px; Hintergrund: # edf3f7; } #nav li {float: left; Bildschirmsperre; Hintergrund: keine; Position: relativ; z-Index: 999; Marge: 0 1px; } #nav li a {display: block; Polsterung: 0; Schriftgewicht: 700; Zeilenhöhe: 50px; Textdekoration: keine; Farbe: # 818ba3; Zoom: 1; Rand links: 1px durchsichtig transparent; Rand rechts: 1px durchsichtig transparent; Polsterung: 0px 12px; } #nav li a: hover, #nav li a.hov {Hintergrundfarbe: #fff; Rahmen links: 1px fest # d5dce8; Rahmen rechts: 1px fest # d5dce8; Farbe: # 576482; }

Auf der Wurzel UL habe ich drei feste Rahmen hinzugefügt: links, rechts und unten. Der obere Rand erstreckt sich über die gesamte Website und wird im Kopfbereich hinzugefügt. Ich habe zusätzlich die unteren und rechten Ecken abgerundet. Diese Technik wurde in CSS3 mit -moz, -webkit und den Standardeigenschaften für den Grenzradius ausgeführt.

Die Listenelemente werden mit einem z-index von 999 über allen anderen Elementen erscheinen. Auf diese Weise würden wir das ursprüngliche li auf unser Subnav schweben lassen und das Popup verlieren. Stattdessen dehnt sich das li-Element aus, um die volle Höhe unseres neuen verschiebbaren Menüs einzunehmen und oben zu bleiben, wenn wir mit der Maus über Links fahren. Ebenfalls Position: relativ; wird hinzugefügt, um die absolute Positionierung in der inneren Liste korrekt zu verwenden.

Die Ankerlinks sind an sich nicht besonders interessant. Sie werden mit einem weißen Hintergrund im Schwebeflug mit zwei zusätzlichen Rändern links und rechts hervorgehoben. Im letzten Hover-Selector habe ich eine weitere Klasse hinzugefügt .hov von jQuery verwendet werden. Wenn Sie den Mauszeiger über die Links des Untermenüs bewegen, bleibt der ursprüngliche Navigationslink im Schwebeflug! Ziemlich ordentlich.

Unter-Navigationsmenü-Stile

Dieser letzte CSS-Code wird unsere Untermenü-Links formatieren. Wir verwenden die absolute Positionierung, um unser Sub-ul-Element direkt zum oberen Rand des Containers zu bewegen. Auch ein toller Schatteneffekt mit einigen neuen CSS3-Eigenschaften.

 / * @group subnav * / #nav ul {position: absolut; links: 1px; Anzeige: keine; Marge: 0; Polsterung: 0; Listenstil: keine; -moz-box-shadow: 0 1px 3px rgba (0,0,0,0,2); -o-box-shadow: 0 1px 3px rgba (0,0,0,0,2); Box-Schatten: 0 1px 3px rgba (0,0,0,0,2); -webkit-box-shadow: 0 1px 3px rgba (0,0,0,0,2); Polsterung unten: 3px; } #nav ul li {width: 180px; Schwimmer: links; Border-Top: 1px fest #fff; Text ausrichten: links; } #nav ul li: hover {border-left: 0px solid transparent; Rand rechts: 0px fest transparent; }

Die einzelnen Eigenschaften, die ich verwendet habe, und ihre unterstützenden Browser können etwas verwirrend werden. Nachfolgend finden Sie eine kleine Übersetzungshilfe.

-Moz-Box-Schatten - Firefox / Mozilla Engine
-o-box-shadow - Opera
-webkit-box-shadow - Standard-WebKit-Browser, Google Chrome oder Safari
box-shadow - Die meisten anderen, einschließlich Microsoft Internet Explorer

Jedes Sub-Nav-Listenelement ist 180px breit. Dies definiert die maximale Größe, die unser Menü erscheinen soll. Wenn Sie den Code portieren, sollten Sie dies ändern, um die Größen in Ihrer eigenen Vorlage zu berücksichtigen.

 #nav ul a {display: block; Höhe: 20px; Zeilenhöhe: 20px; Polsterung: 8px 5px; Farbe: # 666; Rand unten: 1px durchsichtig transparent; Text-Transformation: Großbuchstaben; Farbe: # 797979; Schriftgewicht: normal; } #nav ul a: hover {Textdekoration: keine; Randfarbe rechts: transparent; Rahmenfarbe links: transparent; Hintergrund: transparent; Farbe: # 4e4e4e; } * html #nav ul {margin: 0 0 0 -2px; }

Jeder Untermenü-Anker ist auf eine Höhe und Linienhöhe von 20 Pixel eingestellt. Dadurch wird der Menütext in jedem Menüblock vertikal zentriert. Beim Hover-Effekt habe ich die Grenzen verdeckt, die von den übergeordneten Navigationslinks übernommen werden. Alles ziemlich einfach mit CSS-Styles und jetzt das letzte Stück von JavaScript, um alles zusammenzusetzen.

jQuery Untermenü ein- / ausblenden

Direkt nach dem Finale .wickeln div Unser Inhaltsbereich endet. Genau hier habe ich ein neues Skripttag hinzugefügt und den gesamten jQuery-Code eingefügt. Das macht die Bearbeitung viel einfacher und unser Code ist sowieso ziemlich klein.

 $ (document) .ready (function () {$ ('# nav li'). hover (function () {$ ('ul', this) .slideDown (200); $ (this) .children ('a: first '). addClass ("hov");}, function () {$ (' ul ', this) .slideUp (100); $ (this) .children (' a: first '). removeClass ("hov") }}};});

Starten Sie das Skript, indem Sie prüfen, ob das Seitendokument vollständig geladen wurde. Wir möchten unsere erste Funktion auslösen, nachdem der Benutzer über ein Listenelement im Stammverzeichnis #nav ul geführt hat. Der erste Funktionscode besteht aus zwei Zeilen.

Es zielt auf unser inneres ul-Element ab und fügt einen Slide-Down-Effekt hinzu, der in 200 Millisekunden abgeschlossen wird. Zweitens müssen wir das hinzufügen .hov Klasse auf den aktuell ausgewählten Anker-Link. Dadurch bleibt der schwebende Effekt im Hauptlink erhalten, auch wenn Sie über die Navigationsnavigation navigieren. Die zweite Funktion ist unser Callback-Parameter für die .schweben() Methode, die bei Maus aus geschieht.

Dies umfasst auch zwei einfache Codezeilen. Diese machen eigentlich nur das, was wir im ersten Bereich gemacht haben. Die innere ul muss in einer schnelleren Animation (100 Millisekunden lang) nach oben rutschen, und wir entfernen auch die Schwebeklasse.

Live-Demo ansehen - Quelle herunterladen

Fazit

Ich habe das Menü ziemlich einfach gelassen, sodass andere Designer die Vorlage an ihre eigene Website anpassen können. Es ist ziemlich beeindruckend, was mit nur ein paar Zeilen in jQuery möglich ist! Wenn Sie etwas Ähnliches auf Ihrer eigenen Website implementiert haben, teilen Sie uns dies bitte mit. Vergessen Sie nicht, den Demo-Quellcode herunterzuladen und mit ihm zu spielen.