Outside the Box Navigation mit jQuery

Nahezu jede Website verwendet die üblichen Navigationskonzepte, die wir alle kennen. Nach einer Weile kann dies ziemlich langweilig werden, vor allem für Designer, die Kreativität lieben. Während das OS X-Dock nachahmen und Stacks sind nicht neu, sicherlich nicht üblich.

Vor ein paar Tagen hat Jeffrey über einen potenziellen Wettbewerb "Außerhalb des Kastens" bei ThemeForest gepostet, um Autoren zu ermutigen, ihre kreativen Hüte anzulegen und brauchbare Vorlagen mit kreativen Designs "außerhalb des Kastens" zu entwerfen. In diesem Tutorial werde ich ein paar Möglichkeiten aufzeigen, wie man dies mit OS X-Docks und Stapelnavigation macht.

Quellen und Gutschriften

Bevor wir anfangen, möchte ich ein paar Jungs rufen, die gerettet wurden, als sie meinen Hilferuf auf Twitter hörten. Steve hat das Stackskript von Harley überarbeitet, indem er jQuery 1.2.6 für die Verwendung der aktuellen Version 1.3.2 verwendet. Rey Bango vom jQuery-Team hat mir dabei geholfen, einen Fehler zu beheben. Sie sprangen beide innerhalb weniger Minuten nach meinem Hilferuf über Twitter an die Aufgabe. Vielen Dank Jungs! *Eine Runde Applaus* :-D

Originalquellen

• "Hinzufügen zu unserem Leopard-Desktop mit jQuery" von Harley über Net.tutsplus.com
• Schnittstelle: Fischauge-Menü
• jqDock v1.2
• Beispielvorlage (Internet-Enzyklopädie) von Luka Cvrk

Schnelle Notizen

Diese Skripts basieren auf jQuery 1.3.2. Die gezeigten Beispiele sind mit allen gängigen Browsern, einschließlich IE6, kompatibel und können leicht sichergestellt werden, dass die JavaScript-Funktion 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 diesen verwenden wollte, war, dass er unglaublich glatt ist und kein Stottern. Demo anzeigen.

Wie Sie in der Demo sehen können, ist es unglaublich flüssig und reaktionsschnell. Der Nachteil ist, dass Sie keine fixe Positionierung verwenden können, wenn die Seite einen Bildlauf durchführen muss, da sie beschädigt wird. Wenn Sie es nicht innerhalb des Browserfensters reparieren müssen, funktioniert es hervorragend.

Dies ist ein hervorragendes Beispiel für "Outside the Box" -Konzepte in Websites und bietet eine interaktive und unterhaltsame Benutzeroberfläche.

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

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

Das HTML

Wir packen unsere Bilder und Titel in Links und platzieren sie in einem umfassenden div. Dann packen wir alles in ein anderes, das div enthält, damit es richtig funktioniert.

 
 
 Beispiel 1 Beispiel 2 Beispiel 3 Alle Beispiele Video Geschichte Kalender Links RSS RSS2 
 

Beachten Sie, dass ich die Titel in span-Tags gesetzt habe, damit wir sie stylen können und das Plugin sie nach Bedarf ausblenden oder anzeigen lassen kann.

Das CSS

Mit CSS positionieren wir das Dock dort, wo wir es auf der Seite haben möchten. Wir können keine feste Positionierung mit diesem Plugin verwenden oder es funktioniert nicht richtig.

 .Dock-Container Position: relativ; oben: -8px; Höhe: 50px; Polsterung links: 20px;  a.dock-item display: block; Breite: 50px; Position: absolut; unten: 0; Text ausrichten: Mitte; Textdekoration: keine; Farbe: # 333;  .dock-item span display: none; Polsterung links: 20px;  .dock-item img border: 0; Marge: 5px 10px 0px; Breite: 100%; 

Ich habe auch ein wenig extra CSS im Kopf der Seite unter dem CSS eingefügt. Ich habe es in noscript-Tags eingepackt, falls ein Besucher kein JavaScript aktiviert oder verfügbar hat, es bleibt jedoch eine verwendbare Navigation. Ich sollte darauf hinweisen, dass dies nicht überprüft werden kann, da das noscript-Tag im head-Abschnitt nicht gültig ist, obwohl es in allen aktuellen Browsern funktioniert. ;-)

 #dock top: -32px;  a.dock-item position: relativ; Schwimmer: links; Rand rechts: 10px;  .dock-item span display: block; 

Das JavaScript

Wir bringen jetzt unsere JavaScript-Dateien ein, beginnend mit jQuery 1.3.2. 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 fügen unser JavaScript ein, um das Dock zu initialisieren.

Jetzt initialisieren wir das Dock, sobald die Seite geladen wird. Sie können verschiedene Plugin-Optionen verwenden, um das Dock an die Position und Funktionalität anzupassen. Sie können die Dokumentation auf der Website anzeigen, die unter Quellen für das Fisheye-Plugin aufgeführt ist.

 $ (function () // Dock initialisiert $ ('# dock').) Fischauge (maxWidth: 30, Elemente: 'a', itemsText: 'span', container: '.dock-container', itemWidth: 50, Nähe: 60, Ausrichtung: 'links', Wertigkeit: 'unten', Halign: 'Mitte'););

Das ist alles dazu! :-D

jQuery OS X Dock # 2 (vertikal)

Das horizontale Dock war einfach und definitiv eine nette Idee für Websites. Sie sind wahrscheinlich der gebräuchlichste Typ, der derzeit im Web verwendet wird. Versuchen wir also etwas anderes. Wir könnten etwas mehr "außerhalb der Box" bekommen, wenn wir eine vertikale Docknavigation machen würden.

Dieses Dock basiert auf dem jquery-Plugin von jqDock. Es ist ungefähr 10 kb groß, also ein paar kb größer als die Vorgängerversion, aber das ist nicht viel. Der Nachteil dieses Plugins ist, dass es nicht ganz so glatt ist wie das Fisheye Plugin-Dock, obwohl es immer noch sehr flüssig und durchaus brauchbar ist. Dieses Plugin hat auch keine Probleme mit der festen Positionierung. Demo anzeigen.

Das HTML

Wir setzen unsere Bilder in eine ungeordnete Liste und binden sie in Links ein. Wie beim letzten Plugin werden wir alles innerhalb eines enthaltenden div einschließen. Wenn wir das Plugin initialisieren, verwenden wir hier das "ul".

In diesem Dock werden Sie feststellen, dass wir keine Titel in Span-Tags haben. Stattdessen wird in diesem Plugin das "title" -Tag für jedes Bild angezeigt und die Titel auf diese Weise erstellt (sofern in den Plugin-Optionen aktiviert). Dies macht das Markup etwas einfacher, aber es macht auch die Titel etwas weniger anpassbar.

Das CSS

Wir positionieren das Dock auf der linken Seite (kann beidseitig sein) und fixieren. Wir geben ihm ein wenig Platz zwischen sich und dem oberen Rand des Browser-Fensters, um die Ästhetik zu verbessern, sodass die Symbole beim Vergrößern nicht verschwinden.

 #dockContainer position: fixed; oben: 60px; links: 6px;  #jqDock position: relativ; unten: 48px;  .jqDockLabel background: # 333; Farbe: #fff; Polsterung: 3px 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; 

Um die Titel zu gestalten, können wir die Klasse ".jqDockLabel" verwenden. Wir müssen auch keine zusätzlichen Stile hinzufügen, damit JavaScript auch bei deaktiviertem JavaScript verwendet werden kann. Es ist vielleicht nicht sehr hübsch, aber es ist funktional.

Das JavaScript

Wir werden die jQuery-Bibliothek genauso wie das vorherige Dock sowie das Plugin mitbringen.

Wir initialisieren das Dock und stellen einige Optionen zum Anpassen ein. Sie können die Dokumentation zu diesen Einstellungen lesen, indem Sie die Website besuchen, die zu Beginn des Tutorials für jqDock unter quellen aufgeführt ist. Ich möchte hier jedoch auf die Option Dauer hinweisen. 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 bisschen zu stottern, was ich hasse.

 $ (function () var jqDockOpts = align: 'left', Dauer: 200, Labels: 'tc', Größe: 48, Abstand: 85; $ ('# jqDock'). jqDock (jqDockOpts);) ;

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. Das vorherige Plugin gibt Ihnen die Möglichkeit, die Größe, auf die es vergrößert wird, zu ändern. Das ist alles dazu!

jQuery OS X Stack und Drop Stack

Dies ist wahrscheinlich mein Lieblingsnavigationsstil aus den drei in diesem Tutorial gezeigten. Es ist superleicht (~ 1kb) und ist eine wirklich kreative "Outside the Box" -Methode der Navigation für eine Website. Es ist vielleicht etwas umständlich, die Navigation unten rechts oder links im Browserfenster zu haben, aber es wäre sicherlich kreativ und würde viel Platz sparen. Demo anzeigen.

Während ich dies schrieb, wurde mir klar, dass es wahrscheinlich viele Leute gibt, die ihre Navigation am unteren Rand der Seite nicht mögen. Deshalb habe ich mir ein paar Minuten mehr Zeit genommen und den Beispieldateien einen Dropdown-Stapel hinzugefügt. Auf diese Weise springt die Navigation von oben nach unten heraus, sodass sie jetzt oben auf den Seiten verwendet werden kann.
Demo anzeigen.

Das HTML

Der HTML-Code ist genauso einfach wie die beiden Dock-Beispiele. Wir setzen alles in ein umfassendes Div und alle unsere Bilder und Titel, die in Links eingeschlossen sind, in eine ungeordnete Liste.

 
  
 
Öffnung
 
Alle Beispiele
 
Beispiel 3
 
Beispiel 2
 
Beispiel 1
 
 

 .Stapel Position: fest; unten: 28px; rechts: 40px;  .stack> img position: relativ; Cursor: Zeiger; Polsterauflage: 35px; z-Index: 2;  .stack ul list-style: none; Position: absolut; oben: 5px; Cursor: Zeiger; z-Index: 1;  .stack ul li position: absolut;  .stack ul li img border: 0;  .stack ul li span display: keine;  .stack .openStack li span Schriftfamilie: "Lucida Grande", Lucida, Verdana, serifenlos; Bildschirmsperre; Höhe: 14px; Position: absolut; oben: 17px; rechts: 60px; Zeilenhöhe: 14px; Grenze: 0; Hintergrundfarbe: # 000; Polsterung: 3px 10px; Grenzradius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; Farbe: #fcfcfc; Text ausrichten: Mitte; Text-Schatten: # 000 1px 1px 1px; Deckkraft: .85; Filter: Alpha (Opazität = 85);  / * IE Fixes * / .stack _position: absolut;  .stack ul _z-index: -1; _top: -15px;  .stack ul li * right: 5px; 

 $ (function () // Stack initialisieren var openspeed = 300; var closespeed = 300; $ ('. stack> img'). toggle (function () var vertikal = 0; var horizontal = 0; var $ el =.) $ (this); $ el.next (). children (). each (Funktion () $ (this) .animate (top: '-' + vertical + 'px', links: horizontal + 'px' , openspeed); vertikal = vertikal + 55; horizontal = (horizontal + .75) * 2;; $ el.next (). animieren (top: '-50px', links: '10px', openspeed). addClass ('openStack') .find ('li a> img'). animate (width: '50px', marginLeft: '9px', openspeed); $ el.animate (paddingTop: '0'); , function () // umgekehrt oben var $ el = $ (this); $ el.next (). removeClass ('openStack'). children ('li'). animate (top: '55px', left : '-10px', closespeed); $ el.next (). Find ('li a> img'). Animate (width: '79px', marginLeft: '0', closespeed); $ el.animate (paddingTop: '35');); // Stacks zusätzliche Animation $ ('. stack li a'). hover (Funktion () $ ("img", this) .animate (width: '56px ', 100); $ ("span", this) .animate (marginRight:' 30px ');, function () $ ("img", this) .an imate (width: '50px', 100); $ ("span", this) .animate (marginRight: '0'); ); );