Share
Wie Sie wissen, gibt es heutzutage eine Vielzahl konkurrierender Javascript-Bibliotheken. Obwohl ich jQuery lieber mag, hat mir die Funktionsweise des Menüs von MooTools schon immer gefallen. In diesem Tutorial werden wir also denselben Effekt wiederherstellen ... aber wir machen es in jQuery!
Beginnen wir mit dem Schreiben des erforderlichen HTML-Codes, um eine einfache vertikale Navigation zu erstellen. Wie Sie vielleicht erraten haben, verwenden wir eine ungeordnete Liste mit dem ID-Namen "Schiebenavigation". Außerdem werden wir einige Links hinzufügen und jeden Listeneintrag angeben der Klassenname "Gleitelement".
Ich werde auch ein Titelelement hinzufügen. Dies ist hilfreich, wenn beispielsweise in WordPress-Blogs Titelelemente in der Navigationsleiste der Seitenleiste enthalten sind (z. B. "Archive"). So würde es ungefähr so aussehen:
Jetzt erstellen wir ein HTML-Dokument, in das wir die gerade geleistete Arbeit einfügen können. Erstellen Sie eine neue HTML-Datei und nennen Sie sie demo.html. Öffnen Sie dann diese Datei mit Ihrem bevorzugten Texteditor und fügen Sie den folgenden Code ein:
Navigationseffekt mit jQuery
Titel der Navigation
- Link 1
- Link 2
- Link 3
- Link 4
- Link 5
Hier sind einige Dinge zu beachten:
Nachdem wir nun unsere HTML-Datei beschriftet haben und funktionieren, wollen wir einige Stile hinzufügen. Denken Sie daran, dass unser HTML-Dokument auf eine CSS-Datei mit dem Namen styles.css verweist. Beginnen wir damit, eine Datei mit dem Namen styles.css zu erstellen und sie in demselben Verzeichnis zu speichern, in dem sich unser HTML-Dokument befindet. Öffnen Sie diese Datei wie im vorherigen Schritt mit Ihrem bevorzugten Texteditor und fügen Sie den folgenden Code ein:
body margin: 0; Polsterung: 0; Hintergrund: # 1d1d1d; Schriftfamilie: "Lucida Grande", Verdana, serifenlos; Schriftgröße: 100%; ul # slide-navigation list-style: none; Schriftgröße: .75em; Marge: 30px 0; ul # Gleitnavigation li.sliding-element h3, ul # Gleitnavigation li.sliding-element a display: block; Breite: 150px; Polsterung: 5px 15px; Marge: 0; Rand unten: 5px; ul # slide-navigation li.sliding-element h3 color: #fff; Hintergrund: # 333; Grenze: 1px fest # 1a1a1a; Schriftgewicht: normal; ul # slide-navigation li.sliding-element a color: # 999; Hintergrund: # 222; Grenze: 1px fest # 1a1a1a; Textdekoration: keine; ul # slide-navigation li.sliding-element a: hover color: # ffff66;
An dieser Stelle sollte Ihre Demo.html-Seite in etwa so aussehen:
Es ist also endlich Zeit, jQuery zu verwenden. Aber bevor wir anfangen können, müssen wir einige Dinge tun:
Dies ist, was Ihre HTML-Datei ist
sollte jetzt aussehen:Navigationseffekt mit jQuery
Jetzt werden wir die Funktion erstellen, die das "schwere" Anheben übernimmt, damit der Schiebeeffekt funktioniert. Diese Funktion benötigt fünf Parameter (navigation_id, pad_out, pad_in, time und multiplier) und verwendet sie wie folgt:
Öffnen Sie also die Datei slide_effect.js und geben Sie folgenden Code ein:
Funktionsfolie (navigation_id, pad_out, pad_in, time, multiplier) // erstellt die Zielpfade var list_elements = navigation_id + "li.sliding-element"; var link_elements = list_elements + "a"; // initiiert den für die gleitende Animation verwendeten Timer var timer = 0; // erstellt die Folienanimation für alle Listenelemente $ (list_elements) .each (Funktion (i) // margin left = - ([Breite des Elements] + [vertikale Gesamtauffüllung des Elements]) $ (this) .css ( "margin-left", "- 180px"); // aktualisiert timer timer = (timer * multiplier + time); $ (this) .animate (marginLeft: "0", timer); $ (this) .animate (marginLeft: "15px", Timer); $ (this) .animate (marginLeft: "0", Timer);); // erstellt den Hover-Slide-Effekt für alle Link-Elemente $ (link_elements) .each (function (i) $ (this) .hover (function () $ (this) .animate (paddingLeft: pad_out, 150) ;, function () $ (this) .animate (paddingLeft: pad_in, 150);););
Um das Skript auszulösen, müssen wir nur die Funktion aufrufen, wenn die Seite geladen ist. Es gibt zwei Stellen, an denen der folgende Code-Code platziert werden kann. Es kann entweder in die Datei slide_effect.js geschrieben werden (ich habe diese Option für dieses Lernprogramm ausgewählt) oder mit einem HTML-Code innerhalb des HTML-Codes aufgerufen
Von Bedrich Rios
Beachten Sie, dass ich das Bild im Element "navigation-block" hinzugefügt und ihm eine ID namens "hide" gegeben habe. Ich habe auch ein Überschriftenelement und Untertitel hinzugefügt. Jetzt fügen wir unserer styles.css-Datei ein wenig zusätzliches CSS hinzu:
h2 color: # 999; Rand unten: 0; Rand links: 13px; Hintergrund: URL (Navigation.jpg) keine Wiederholung; Höhe: 40px; h2 span display: none; p color: # ffff66; Rand oben: .5em; Schriftgröße: .75em; Polsterung links: 15px; # navigation-block position: relativ; oben: 200px; links: 200px; #hide position: absolut; oben: 30px; links: -190px;
Also zuerst in der
Beachten Sie auch, dass das Element "navigation-block" jetzt eine relative Position hat, sodass wir das Bild "ausblenden" nach links verschieben können. Dadurch werden die Registerkarten darunter angezeigt.
Um unseren Tabs ein wenig Finish zu geben, habe ich ein dezentes Hintergrundbild hinzugefügt, das wie eine Schattierung aussieht:
ul # gleiten-navigation li.sliding-element h3 color: #fff; background: # 333 url (heading_bg.jpg) repeat-y; Schriftgewicht: normal;
Und wir sind fertig!
Endeffekt anzeigen
Laden Sie das HTML / Images / JS herunter
Accentsconagua