So erstellen Sie ein Lava-Lampenstil-Navigationsmenü

Vor ein paar Wochen habe ich einen Screencast erstellt, in dem gezeigt wurde, wie ein Navigationsmenü mit drei Ebenen erstellt wird. In einer Antwort-E-Mail forderte einer unserer Leser ein Tutorial zum Erstellen eines Menüs im Stil einer Lava-Lampe auf. Glücklicherweise ist dies eine recht einfache Aufgabe, insbesondere wenn Sie eine JavaScript-Bibliothek verwenden. Wir werden heute einen von Grund auf bauen.

Ich bevorzuge einen Screencast?

Schritt 1 Erstellen Sie die Markierung

Bevor wir diese ordentliche Funktionalität erstellen können, benötigen wir eine Basis, von der aus wir arbeiten können. Erstellen Sie in Ihrem bevorzugten Code-Editor eine ungeordnete Liste für Ihre Navigation, und importieren Sie sowohl jQuery als auch die jQuery-Benutzeroberfläche über Google.

         
 
 
Zuhause
 
Über
 
Blog
 
Mehr über mein Portfolio
 
Kontakt
 
 
    

Beachten Sie, wie wir der Startseite eine ID von "ausgewählt" gegeben haben. Dies ist bei den meisten Websites ziemlich normal. Sie können die aktuelle Seite als Ziel verwenden und das jeweilige Listenelement entsprechend formatieren.

Als Nächstes müssen wir entscheiden, wie die Lava-Lampen-Funktionalität am besten implementiert wird. Um die Wiederverwendbarkeit zu ermöglichen, packen wir dieses kleine Skript in ein Plugin und nennen es wie folgt:

 $ ('# nav'). spasticNav ();

Da wir uns entschieden haben, ein Plugin zu erstellen, erstellen wir eine neue Datei für dieses Skript und verweisen Sie in unserem Markup darauf. Wir nennen es jquery.spasticNav.js.

Schritt 2 Das Plugin starten

Um die Anzahl der globalen Variablen, die wir erstellen müssen, zu reduzieren und um die Möglichkeit zu vermeiden, dass das $ -Symbol mit anderen JavaScript-Bibliotheken kollidiert, packen wir unser Plugin in eine selbstausführende anonyme Funktion.

 (Funktion ($) ) (jQuery);

Nun wird jQuery an unser Plugin übergeben und über das $ -Symbol dargestellt.

Als Nächstes empfiehlt es sich im Allgemeinen, den Benutzern des Plugins so viel Flexibilität wie möglich zu geben. Daher geben wir ihnen die Möglichkeit, ein Objekt-Literal zu übergeben, wenn sie das Plugin aufrufen, um eine Handvoll Einstellungen zu überschreiben. So wie ich es sehe, sollten sie in der Lage sein:

• Legen Sie die Überlappung für unseren kleinen Fleck fest. Dies bezieht sich darauf, wie viel der Blob die Höhe des Navigationsmenüs überschreitet.
• Stellen Sie die Geschwindigkeit ein
• Setzen Sie einen Reset, durch den der Blob zum aktuellen Seitenelement zurückkehrt (vorausgesetzt, der Benutzer klickt niemals auf einen Link).
• Stellen Sie die Farbe des Flecks ein. Dies kann mit CSS erreicht werden, ist aber dennoch eine angenehme Annehmlichkeit.
• Stellen Sie die Beschleunigungsoption ein.

Nun benennen wir unser Plugin und machen es einer Funktion gleich. $ .fn ist einfach ein Alias ​​für jquery.prototype.

 $ .fn.spasticNav = Funktion (Optionen) ;

Da wir wissen, dass wir diese Überschreibungen zulassen, müssen wir sicherstellen, dass wir einen "options" -Parameter akzeptieren.

Schritt 3 Konfigurationsoptionen

Nun, da wir unser Plugin benannt haben, müssen Sie die Konfigurationsoptionen erstellen.

 Optionen = $ .extend (Überlappung: 20, Geschwindigkeit: 500, Zurücksetzen: 1500, Farbe: '# 0b2b61', Erleichterung: 'easeOutExpo', Optionen);

Oben nehmen wir die Variable options, legen einige Standardeigenschaften und -werte fest und erweitern sie dann mit dem, was der Benutzer beim Aufruf des Plugins übergibt. Auf diese Weise setzen die Optionen, die sie übergeben, unsere Standardeinstellungen außer Kraft. Wenn ich zum Beispiel dieses Plugin anrufe, übergebe ich:

 $ ('# nav'). spasticNav (Geschwindigkeit: 2000, Erleichterung: 'easeOutElastic');

Diese beiden Eigenschaften überschreiben die Standardeinstellungen, während die übrigen Optionen gleich bleiben.

Schritt 4 Implementierung der Funktionalität

Jetzt können wir jedes Element durchlaufen, das an dieses Plugin übergeben wurde, und die Lava-Lampen-Funktionalität implementieren. Denken Sie daran, dass wir nicht davon ausgehen können, dass der Benutzer diesem Plugin ein einzelnes Element übergibt. Wenn sie wollten, könnten sie auf eine Klasse verweisen, die sich auf mehrere Elemente bezieht, die diese Funktionalität erhalten sollen. Als solches rufen wir this.each auf, um jedes Element in der umschlossenen Gruppe zu durchlaufen.

 return this.each (function () );

In dieser Funktion erstellen wir einige Variablen. Nicht alle haben sofort Werte, aber da die JavaScript-Engine alle Variablennamen sowieso (hinter den Kulissen) an die Spitze der Funktion anhebt, empfiehlt es sich, sie ganz oben zu deklarieren und sie später zu initialisieren.

 var nav = $ (this), currentPageItem = $ ('# selected', nav), blob, reset;

• nav: "Caches" diese, im jQuery-Objekt eingeschlossen.
• currentPageItem: Enthält das Listenelement mit der ausgewählten ID. Wir übergeben einen zweiten Parameter, um den Kontext für die Suche festzulegen. Auf diese Weise müssen wir nicht den gesamten Dom durchqueren, um dieses Element zu finden.
• Klecks: Wenn kein besseres Wort vorhanden ist, verweist diese Variable auf den Textmarker, der unserer Maus folgt, wenn wir über das Menü fahren.
• zurücksetzen: Dadurch wird ein Verweis auf die Funktion setTimeout gespeichert, die später erstellt wird. Es ist erforderlich, um clearTimeout aufzurufen. Mehr dazu bald…

Nun, da wir unsere Variablen deklariert / initialisiert haben, erstellen wir sozusagen den eigentlichen Blob.

 $ ('') .css (width: currentPageItem.outerWidth (), height: currentPageItem.outerHeight () + options.overlap, links: currentPageItem.position (). left, oben: currentPageItem.position (). top - options.overlap / 2, backgroundColor: options.color). AppendTo (this);

Der Grund, warum wir die CSS-Methode aufrufen, anstatt nur eine Klasse hinzuzufügen, liegt darin, dass diese Werte je nach Listenelement der aktuellen Seite variieren. Daher müssen wir JavaScript verwenden, um deren Werte abzurufen.

• Breite: Rufen Sie die Breite von currentPageItem ab, einschließlich der Ränder und Auffüllung.
• Höhe: Rufen Sie die Höhe von currentPageItem ab, einschließlich der Ränder und Auffüllung. Fügen Sie außerdem die Überlappung hinzu, damit der Blob sich außerhalb des Menüs erstreckt.
• links: Legt die linke Eigenschaft des Blobs gleich der linken Position des aktuellenPageItem fest. (Wir müssen einen Positionierungskontext in unserem CSS festlegen, damit dieser Wert wirksam wird.)
• oben: Legt auch den oberen Wert fest und zentriert den Blob vertikal.
• Hintergrundfarbe: Legt die Hintergrundfarbe fest.

Zum Schluss fügen wir dieses neue Listenelement an diese, oder #nav.

Als Nächstes müssen wir einen Verweis auf #blob speichern. Auf diese Weise müssen wir das DOM nicht jedes Mal durchsuchen, wenn wir darauf zugreifen möchten. Wir haben das erklärt Klecks Variable am oberen Rand der Funktion. Lassen Sie uns es jetzt initialisieren.

 blob = $ ('# blob', nav);

Schritt 5 Das Hover-Ereignis

Wir müssen nun "zuhören", wenn der Benutzer über einem der Listenelemente (mit Ausnahme des Blobs natürlich) in unserem Navigationsmenü liegt. Wenn dies der Fall ist, setzen wir die Eigenschaften width und left des Blobs auf die des aktuell angehaltenen Listenelements.

 $ ('li: not (#blob)', nav) .hover (function () // mit der Maus über clearTimeout (reset); blob.animate (left: $ (this) .position (). left, width: width: $ (this) .width (), duration: options.speed, easing: options.easing, queue: false);, function () // mouse out reset = setTimeout (function () blob.animate.) (width: currentPageItem.outerWidth (), left: currentPageItem.position (). left, options.speed), options.reset););

Um das Skript oben zusammenzufassen ...

• Rufen Sie alle Listenelemente - nicht das # blob - im Navigationsmenü ab, und führen Sie eine Funktion aus, wenn sie mit der Maus darüber gehalten werden.
• Animieren Sie den Blob und setzen Sie die Werte für die linke und die Breite auf den Wert des aufgehängten Listenelements.
• Übergeben Sie ein Objektliteral als zweiten Parameter von animate und stellen Sie die Dauer und die Beschleunigung auf das ein, was wir in unseren Konfigurationsoptionen festgelegt haben. Setzen Sie die Warteschlange auf "false", um den Aufbau von Animationen zu verhindern.
• Rufen Sie nach dem Mausausfahren setTimeOut auf, wodurch der Blob zum aktuellen Seitenelement zurückgeschoben wird. Wenn wir dies nicht tun und der Benutzer keinen Navigationslink anklickt, wird im Menü angezeigt, dass er aktiviert ist
  eine ganz andere Seite. Nach etwa einer Sekunde wird der Blob wieder zu currentPageItem animiert.

Und das ist alles was dazu gehört! Dies ist ein sehr einfaches Plugin. Der nächste Schritt besteht darin, unser Navigationsmenü zu gestalten.

Schritt 6 Gestalten des Menüs

Ohne Styling sollte unser Menü so aussehen:

Lassen Sie uns zunächst die "nav" ul. Öffnen Sie Ihre style.css-Datei und fügen Sie Folgendes hinzu:

 #nav position: relativ; Hintergrund: # 292929; Schwimmer: links; 

Als Nächstes werden wir jedes Listenelement formatieren.

 #nav li float: left; Listenstil: keine; Rand rechts: 1px fest # 4a4a4a; Rand links: 1px durchgehend schwarz; 

Dies verschiebt einfach jedes Listenelement nach links und fügt jeder Seite einen Rahmen hinzu.

Als Nächstes müssen wir die Ankertags in unserem Navigationsmenü formatieren.

 #nav li a color: # e3e3e3; Position: relativ; z-Index: 2; Schwimmer: links; Schriftgröße: 30px; Schriftfamilie: helvetica, arial, serifenlos; Textdekoration: keine; Polsterung: 30px 45px; 

Wir setzen eine Farbe, schweben sie nach links, setzen einige Schriftwerte und eine gute Menge an Füllungen. Beachten Sie die Z-Index-Eigenschaft. Dies ist eine Notwendigkeit und wird in Kürze erklärt. Denken Sie jedoch daran, dass wir, um den Z-Index anzupassen, einen Positionierungskontext setzen müssen, was wir getan haben.

Da wir kein komplett zurückgesetztes Stylesheet implementieren, stellen wir sicher, dass wir die Standardmargen und Füllungen für ul und li auf Null setzen, um potenzielle Kopfschmerzen zu vermeiden.

 ul, li margin: 0; Polsterung: 0; 

Der letzte Schritt besteht darin, den Klecks selbst zu gestalten!

 #blob border-right: 1px solid # 0059ec; Rahmen links: 1px fest # 0059ec; Position: absolut; oben: 0; z-Index: 1; Hintergrund: # 0b2b61; Hintergrund: -moz-linearer Gradient (oben, # 0b2b61, # 1153c0); Hintergrund: -webkit-gradient (linear, links oben, links unten, von (# 0b2b61) bis (# 1153c0)); -moz-border-radius: 4px; -webkit-border-radius: 4px; -moz-box-shadow: 2px 3px 10px # 011331; -webkit-box-shadow: 2px 3px 10px # 011331; 

Wir haben wieder einige schöne Farben für unsere Ränder festgelegt und einige Hintergrundfarben hinzugefügt (einschließlich CSS3-Verläufe / -Ränder / -Schatten für Firefox und Safari / Chrome). Wieder sehen wir diese Z-Index-Eigenschaft. Andernfalls zeigt der Blob den gesamten Text im Navigationsmenü an. Um dem entgegenzuwirken, müssen wir sicher sein, dass die Z-Index-Eigenschaft niedriger ist als die des Listenelements. Wir müssen auch die Position auf absolut setzen, um die oberen und linken Werte mit unserem Plugin anzupassen.

Fazit

Das ist alles dazu! Mit minimalem Aufwand haben wir ein wirklich ordentlich aussehendes Navigationsmenü erstellt. Lassen Sie mich wissen, wenn Sie Fragen haben! Danke fürs Lesen und Zuschauen.