Advertisement
  1. Code
  2. Web Development
Code

"Außerhalb der Box" Navigation mit jQuery

by
Difficulty:IntermediateLength:LongLanguages:

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

Nahezu jede Website verwendet die üblichen Navigationskonzepte, die wir alle gewohnt sind. Nach einer Weile kann dies ziemlich langweilig werden, insbesondere für Designer, die von Kreativität leben. Die Nachahmung des OS X-Docks und der Stapel ist zwar nicht neu, aber sicherlich nicht üblich.


Vor einigen Tagen veröffentlichte Jeffrey auf ThemeForest einen potenziellen Wettbewerb "außerhalb der box", um Autoren zu ermutigen, ihre Kreativitätshüte aufzusetzen und verwendbare Vorlagen mit kreativen Designs "außerhalb der box" zu entwerfen. In diesem Tutorial werde ich einige Möglichkeiten behandeln, wie Sie genau das mit der Docking- und Stack-Navigation im OS X-Stil tun können.

Quellen und Credits

Bevor wir anfangen, möchte ich ein paar Leuten einen Gruß aussprechen, die zur Rettung kamen, als sie meinen Hilferuf auf Twitter hörten. Steve hat das Stacks-Skript von Harley von jQuery 1.2.6 auf die aktuelle Version 1.3.2 aktualisiert, und Rey Bango vom jQuery-Team hat mir geholfen, einen Fehler zu beheben. Beide sprangen innerhalb weniger Minuten nach meinem Hilferuf über Twitter zur Aufgabe. Vielen Dank Jungs! *Applaus* :-D

Dock and Stack Preview

Originalquellen

Kurznotizen

Diese Skripte basieren auf jQuery 1.3.2. Die gezeigten Beispiele sind mit allen gängigen Browsern einschließlich IE6 kompatibel und lassen sich leicht sicherstellen, wenn JavaScript deaktiviert oder deaktiviert wird.

jQuery OS X Dock #1 (Horizontal)

Das erste Dock, das wir erstellen, verwendet das oben erwähnte jQuery Fisheye Menu-Plugin. Es ist ziemlich leicht (~7KB mit Abhängigkeiten), aber der Hauptgrund, warum ich dieses verwenden wollte, war, dass es unglaublich flüssig ist, kein Stottern. Demo anzeigen.

jQuery Fisheye Menu Dock

Wie Sie in der Demo sehen können, ist es unglaublich flüssig und reaktionsschnell. Der Nachteil ist, dass Sie keine feste Positionierung verwenden können, wenn die Seite gescrollt werden muss, da sie sonst kaputt geht. Wenn Sie es nicht im Browserfenster reparieren müssen, funktioniert es hervorragend.

Dies ist ein großartiges Beispiel für "außerhalb der box" -Konzepte auf Websites und bietet eine interaktive und unterhaltsame Oberfläche.

Erforderliche Dateien (Ich habe das Fisheye-Plugin und iutil.js in den Demo-Dateien kombiniert).

  • jQuery 1.3.2
  • Schnittstelle: Fisheye Menu Plugin
  • Schnittstelle: iutil.js (Abhängigkeit)

Der HTML

Wir verpacken unsere Bilder und Titel in Links und platzieren sie in einem enthaltenen div. Dann wickeln wir alles in ein anderes div ein, damit es richtig funktioniert.

Beachten Sie, dass ich die Titel in span-Tags platziert habe, damit wir sie formatieren und dem Plugin erlauben können, sie nach Bedarf auszublenden/anzuzeigen.

Das CSS

Mit CSS positionieren wir das Dock an der gewünschten Stelle auf der Seite. Wir können mit diesem Plugin keine feste Positionierung verwenden oder es funktioniert nicht richtig.

Ich habe auch ein kleines zusätzliches CSS im Kopf der Seite unter dem oben enthaltenen CSS platziert. Ich habe es in Noscript-Tags verpackt, falls ein Besucher kein JavaScript aktiviert oder verfügbar hat, ist es dennoch eine verwendbare Navigation. Ich sollte darauf hinweisen, dass dies nicht validiert wird, da das Noscript-Tag im Kopfbereich nicht gültig ist, obwohl es in allen aktuellen Browsern funktioniert. ;-)

Das JavaScript

Wir bringen unsere JavaScript-Dateien ab jQuery 1.3.2 ein. Die Datei fisheye-iutil.min.js ist die Kombination des Fisheye-Plugins und seiner abhängigen Datei iutil.js. Wir erstellen die letzte Datei und setzen unser JavaScript ein, um das Dock darin zu initialisieren.

Jetzt initialisieren wir das Dock, sobald die Seite geladen ist. Sie können verschiedene Plugin-Optionen verwenden, um das Dock an die Positionierung und Funktionalität anzupassen. Sie können die Dokumentation anzeigen, indem Sie die unter Quellen für das Fisheye-Plugin aufgeführte Site besuchen.

Das ist alles dazu! :-D

jQuery jqDock

jQuery OS X Dock #2 (Vertikal)

Das horizontale Dock war einfach und definitiv eine gute Idee für Websites. Sie sind wahrscheinlich der derzeit im Internet am häufigsten verwendete Typ. Probieren wir also etwas anderes aus. Wir könnten ein bisschen mehr "außerhalb der box" bekommen, wenn wir eine vertikale Docknavigation machen würden.

Dieses Dock basiert auf dem jqDock jQuery-Plugin. Es ist ungefähr 10KB groß, also ein paar KB größer als die vorherige Version, aber das ist nicht viel. Der Nachteil dieses Plugins ist, dass es nicht ganz so flüssig ist wie das Fisheye-Plugin-Dock, obwohl es immer noch sehr flüssig und auf jeden Fall verwendbar ist. Dieses Plugin hat auch keine Probleme mit der festen Positionierung. Demo anzeigen.

Der HTML

Wir werden unsere Bilder in eine ungeordnete Liste einfügen und sie in Links einbinden. Wie beim letzten Plugin verpacken wir alles in ein enthaltenes div. Wenn wir das Plugin initialisieren, verwenden wir hier die "ul".

Sie werden feststellen, dass in diesem Dock keine Titel in span-Tags eingeschlossen sind. Stattdessen überprüft dieses Plugin das für jedes Bild festgelegte "Titel" -Tag und erstellt die Titel auf diese Weise (sofern in den Plugin-Optionen aktiviert). Dies macht das Markup etwas einfacher, macht aber auch die Titel etwas weniger anpassbar.

Das CSS

Wir positionieren das Dock auf der linken Seite (kann jede Seite sein) mit fester Positionierung. Wir geben ihm aus ästhetischen Gründen einen kleinen Abstand zwischen sich und dem oberen Rand des Browserfensters, damit die Symbole beim Vergrößern nicht verschwinden.

Zum Stylen der Titel können wir die Klasse ".jqDockLabel" verwenden. Wir müssen auch keine zusätzlichen Stile einfügen, damit es weiterhin mit deaktiviertem JavaScript verwendet werden kann. Es mag nicht sehr hübsch sein, aber es ist funktional.

Das JavaScript

Wir werden die jQuery-Bibliothek genau wie das vorherige Dock sowie das Plugin einspielen.

Wir initialisieren das Dock und legen einige Optionen fest, um es anzupassen. Sie können die Dokumentation zu diesen Einstellungen lesen, indem Sie die Site besuchen, die zu Beginn des Tutorials für jqDock unter Quellen aufgeführt ist. Was ich hier jedoch hervorheben möchte, ist die Daueroption. Dies ist die Zeit für die Vergrößerungsanimation in Millisekunden. Es ist schön, die Dauergeschwindigkeit ändern zu können, aber es scheint ein wenig zu stottern, was ich hasse.

Sie können die Position des Docks und der Beschriftungen sowie die Anfangsgröße der Symbole und einige andere Optionen leicht ändern. Was mir an diesem Plugin nicht gefallen hat, ist, dass es auf die volle Größe des Symbols vergrößert wird. Mit dem vorherigen Plugin können Sie die Größe ändern, auf die es vergrößert wird. Das ist alles dazu!

jQuery OS X Stacks Example

jQuery OS X Stack und Drop Stack

Dies ist wahrscheinlich mein Lieblingsnavigationsstil unter den drei in diesem Tutorial gezeigten. Es ist superleicht (~1KB) und eine wirklich kreative "außerhalb der box" Navigationsmethode für eine Website. Es mag etwas umständlich sein, die Navigation unten rechts oder links im Browserfenster zu haben, aber es wäre sicherlich kreativ und spart viel Platz. Demo anzeigen.

Während ich dies schrieb, stellte ich fest, dass es wahrscheinlich viele Leute gibt, die ihre Navigation am Ende der Seite nicht mögen, also nahm ich mir ein paar zusätzliche Minuten Zeit und fügte den Beispieldateien einen Dropdown-Stapel hinzu. Auf diese Weise springt die Navigation von oben nach unten, sodass sie jetzt oben auf den Seiten verwendet werden kann.
Demo anzeigen.

Der HTML

Der HTML-Code ist genauso einfach wie die beiden Dock-Beispiele. Wir platzieren alles in einem enthaltenen div und platzieren alle unsere Bilder und Titel, die in Links eingeschlossen sind, in einer ungeordneten Liste.

Beachten Sie, dass ich ein Bild vor die ungeordnete Liste gestellt habe. Dies ist das Warenkorbbild, hinter dem die restlichen Symbole gestapelt werden.

Das CSS

Wir positionieren den Hauptcontainer und stellen sicher, dass das Warenkorbbild einen höheren Z-Index als die ungeordnete Liste hat, damit sich alles dahinter stapelt. Beachten Sie auch, dass ich dem Korbbild 35px Polsterung gegeben habe. Dadurch wird verhindert, dass auf die Symbole hinter dem Warenkorb geklickt wird, da das Warenkorbbild kürzer als die Symbole ist. Wenn Sie das Korbsymbol in etwas Größeres ändern, müssen Sie auch die Polsterung ändern.

Die in span-Tags eingeschlossenen Titel werden so angezeigt, dass sie angezeigt werden: Keine, sodass sie beim Laden der Seite ausgeblendet werden.

Das JavaScript

Wir werden das JavaScript in einer eigenen Datei platzieren, da es mehr als ein paar Zeilen umfasst. Wenn auf das Bild außerhalb der ungeordneten Liste (des Korbs) geklickt wird, werden die Listenelemente mithilfe der Umschaltfunktion von jQuery animiert und ihre Position basierend auf dem horizontalen Startpunkt + .75px und dann multipliziert mit 2 festgelegt. Dies ergibt die schöne gekrümmte Feder Aktion der Listenelemente.

Sie können die .75px oder den Multiplikator (2) ändern, um die Krümmung anzupassen.

Wenn der Benutzer dann erneut auf das Warenkorbbild klickt, wird die nächste Funktion ausgeführt, die das, was wir gerade getan haben, umkehrt. Ich habe dann den Listenelementen und ihren Titeln einige zusätzliche Animationen hinzugefügt, um ihnen ein wenig mehr Benutzer-Feedback zu geben, das natürlich leicht entfernt werden kann.

Und da hast du es! Eine einfache und flexible Stack-Navigation im OS X-Stil für Ihre Website. :-D Dieses Skript wird gerade in ein benutzerfreundlicheres Plugin konvertiert. Achten Sie also darauf.

Abschließende Gedanken

Hoffentlich geben Ihnen diese Beispiele einige Ideen, um kreativ zu sein und beim Entwerfen Ihrer nächsten Website oder Vorlage aus der Form zu geraten. Wie Sie sehen, ist jQuery eine leistungsstarke Bibliothek, mit der sich unsere Ideen leicht verwirklichen lassen. Bei einem potenziellen bevorstehenden Wettbewerb, der auf "außerhalb der box"-Designs basiert, können Sie mit einigen Ideen beginnen, die Sie bei ThemeForest einreichen können. Wenn Sie noch keine Dateien eingereicht haben, ist dies sehr einfach und kann auf jeden Fall Ihre Zeit wert sein! :-)

Ich möchte Rey (vom jQuery-Team) und Steve dafür danken, dass sie meinen Hilferuf auf Twitter so schnell beantwortet haben. Dies ist ein hervorragendes Beispiel dafür, wie nützlich Twitter für Designer und Entwickler sein kann. Wenn Sie ThemeForest oder Nettuts noch nicht auf Twitter verfolgen, ist jetzt ein guter Zeitpunkt dafür. Sie sind beide Websites mit einer Menge fantastischer Informationen. Sie können mir auch auf Twitter folgen, wenn Sie möchten.

  • Folgen Sie uns auf Twitter oder abonnieren Sie den NETTUTS RSS-Feed, um weitere tägliche Tipps und Artikel zur Webentwicklung zu erhalten.


Advertisement
Advertisement
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.