Navigazione fuori dagli schemi con jQuery

Quasi tutti i siti web utilizzano i normali concetti di navigazione a cui siamo abituati. Dopo un po 'questo può diventare piuttosto noioso, specialmente per i designer che prosperano con la creatività. Mentre imitando il dock OS X. e gli stack non sono nuovi, non è certamente comune.

Qualche giorno fa, Jeffrey ha pubblicato un potenziale concorso "fuori dagli schemi" su ThemeForest per incoraggiare gli autori a indossare i loro cappelli di creatività ea progettare modelli utilizzabili con design creativi "fuori dagli schemi". In questo tutorial coprirò alcuni modi per farlo con dock stile OS X e navigazione con stack.

Fonti e crediti

Prima di iniziare, voglio dare un grido a un paio di ragazzi che sono venuti in soccorso quando hanno sentito la mia richiesta di aiuto su Twitter. Steve ha aggiornato lo script di stack di Harley utilizzando jQuery 1.2.6 per utilizzare l'attuale versione 1.3.2 e Rey Bango del team di jQuery mi ha aiutato a correggere un bug. Entrambi si sono buttati sull'obiettivo entro un paio di minuti dal mio grido di aiuto via Twitter. Grazie mille ragazzi! * Round di applausi * :-D

Origini originali

• "Aggiunta al nostro desktop Leopard con jQuery" di Harley tramite Net.tutsplus.com
• Interfaccia: menu Fisheye
• jqDock v1.2
• Esempio di modello (Enciclopedia di Internet) di Luka Cvrk

Note rapide

Questi script si basano su jQuery 1.3.2. Gli esempi mostrati sono compatibili con tutti i principali browser, incluso IE6 e sono facili da garantire con una degradazione graduale se JavaScript è disattivato o disabilitato.

jQuery OS X Dock # 1 (orizzontale)

Il primo dock che creeremo utilizza il plug-in jQuery Menu Fisheye menzionato sopra. È piuttosto leggero (~ 7kb con dipendenze), ma il motivo principale per cui volevo usarlo era perché è incredibilmente fluido, senza balbuzie. Visualizza la demo.

Come puoi vedere nella demo, è incredibilmente fluido e reattivo. Lo svantaggio è che non è possibile utilizzare il posizionamento fisso con esso se la pagina deve scorrere mentre si interromperà. Se non ti serve risolto nella finestra del browser, allora funziona alla grande.

Questo è un grande esempio di concetti "fuori dagli schemi" nei siti Web e fornisce un'interfaccia interattiva e divertente.

File richiesti (ho combinato il plugin Fisheye e iutil.js nei file demo).

• jQuery 1.3.2
• Interfaccia: plug-in Menu Fisheye
• Interfaccia: iutil.js (dipendenza)

L'HTML

Comprimeremo le nostre immagini e i titoli nei link e li collocheremo all'interno di un div contenente. Quindi lo avvolgeremo in un altro contenente div affinché funzioni correttamente.

 
 
 Esempio 1 esempio 2 esempio 3 tutti gli esempi video Storia Calendario link RSS RSS2 
 

Si noti che ho inserito i titoli nei tag span in modo da poterli ridimensionare e consentire al plug-in di nasconderli / mostrarli se necessario.

Il CSS

Con CSS posizioneremo il dock dove lo vogliamo sulla pagina. Non possiamo usare il posizionamento fisso con questo plugin o non funzionerà correttamente.

 .dock-container position: relative; inizio: -8px; altezza: 50 px; padding-left: 20px;  a.dock-item display: block; larghezza: 50 px; posizione: assoluta; fondo: 0; allineamento del testo: centro; decorazione del testo: nessuna; colore: # 333; . span item-item display: none; padding-left: 20px;  .dock-item img border: 0; margine: 5px 10px 0px; larghezza: 100%; 

Ho anche inserito un piccolo CSS in più nella parte superiore della pagina sotto il CSS incluso sopra. L'ho spostato nei tag noscript nel caso in cui un visitatore non abbia JavaScript abilitato o disponibile, sarà comunque una navigazione utilizzabile. Devo sottolineare che questo non verrà convalidato perché il tag noscript non è valido nella sezione head, anche se funziona in tutti i browser correnti. ;-)

 #dock top: -32px;  a.dock-item position: relativo; fluttuare: a sinistra; margin-right: 10px;  .dock-item span display: block; 

Il JavaScript

Porteremo i nostri file JavaScript ora a partire da jQuery 1.3.2. Il file fisheye-iutil.min.js è la combinazione del plug-in Fisheye e del suo file iutil.js dipendente. Creeremo l'ultimo file e metteremo il nostro JavaScript necessario per inizializzare il dock in esso.

Ora inizializzeremo il dock una volta caricata la pagina. È possibile utilizzare diverse opzioni di plugin per personalizzare il dock in base alle proprie esigenze di posizionamento e funzionalità. È possibile visualizzare la documentazione visitando il sito elencato nelle fonti per il plug-in Fisheye.

 $ (function () // Dock initialize $ ('# dock'). Fisheye (maxWidth: 30, items: 'a', itemsText: 'span', contenitore: '.dock-container', itemWidth: 50, prossimità: 60, allineamento: 'sinistra', valign: 'bottom', halign: 'center'););

Questo è tutto ciò che c'è da fare! :-D

jQuery OS X Dock # 2 (verticale)

Il dock orizzontale era facile e decisamente un'idea da usare sui siti web. Probabilmente sono il tipo più comune attualmente utilizzato sul Web, quindi proviamo qualcosa di diverso. Potremmo ottenere un po 'di più "fuori dagli schemi" se avessimo effettuato una navigazione verticale del dock.

Questo dock si basa sul plugin jQuock jQuery. Ha una dimensione di circa 10kb, quindi è di qualche kb più grande della versione precedente ma non è molto. Lo svantaggio di questo plug-in è che non è abbastanza agevole come il dock dei plugin Fisheye, sebbene sia ancora molto fluido e certamente utilizzabile. Anche questo plugin non ha problemi con il posizionamento fisso. Visualizza la demo.

L'HTML

Inseriremo le nostre immagini in una lista non ordinata e le inseriremo in collegamenti. Come con l'ultimo plugin, avvolgeremo tutto all'interno di un div contenente. Quando inizializziamo il plug-in, utilizzeremo qui "ul".

Noterai su questo dock che non abbiamo titoli racchiusi tra tag span. Invece, questo plugin guarderà il set di tag "title" per ogni immagine e creerà i titoli in quel modo (se abilitato nelle opzioni del plugin). Questo rende il markup un po 'più semplice ma rende anche i titoli un po' meno personalizzabili.

Il CSS

Posizioniamo il dock sul lato sinistro (può essere su entrambi i lati) utilizzando il posizionamento fisso. Daremo un po 'di spazio tra sé e la parte superiore della finestra del browser per l'estetica e quindi le icone non scompaiono quando vengono ingrandite.

 #dockContainer position: fixed; In alto: 60px; a sinistra: 6px;  #jqDock position: relative; fondo: 48 px;  .jqDockLabel background: # 333; colore: #fff; imbottitura: 3px 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; 

Per dare uno stile ai titoli possiamo usare la classe ".jqDockLabel". Inoltre, non sarà necessario includere altri stili per renderlo ancora utilizzabile con JavaScript disabilitato. Potrebbe non essere molto carina ma funzionale.

Il JavaScript

Inseriremo la libreria jQuery proprio come il dock precedente e il plug-in.

Inizializziamo il dock e impostiamo alcune opzioni per personalizzarlo. Puoi leggere la documentazione su queste impostazioni visitando il sito elencato sotto fonti all'inizio del tutorial per jqDock. Quello che voglio sottolineare qui è l'opzione di durata. Questo è il momento per l'animazione dell'ingrandimento in millisecondi. È bello essere in grado di cambiare la velocità della durata, ma sembra avere un piccolo stuttery, che è qualcosa che odio.

 $ (function () var jqDockOpts = align: 'left', duration: 200, labels: 'tc', dimensione: 48, distance: 85; $ ('# jqDock'). jqDock (jqDockOpts);) ;

È possibile modificare facilmente il posizionamento del dock e delle etichette, nonché la dimensione iniziale delle icone e alcune altre opzioni. Quello che non mi è piaciuto di questo plugin è che ingrandisce l'intera dimensione dell'icona. Il plug-in precedente ti dà la possibilità di cambiare la dimensione a cui ingrandisce. Questo è tutto ciò che c'è da fare!

jQuery OS X Stack e rilascia stack

Questo è probabilmente il mio stile di navigazione preferito tra i tre mostrati in questo tutorial. È super leggero (~ 1kb) ed è un metodo di navigazione davvero creativo "fuori dagli schemi" per un sito web. Potrebbe essere un po 'strano avere la navigazione in basso a destra o a sinistra della finestra del browser, ma sarebbe sicuramente creativo e risparmiare molto spazio. Visualizza la demo.

Mentre scrivevo questo, ho capito che probabilmente ci sono molte persone che non gradiranno la loro navigazione nella parte inferiore della pagina, quindi ho impiegato un paio di minuti in più e ho aggiunto uno stack a discesa ai file di esempio. In questo modo la navigazione salta dall'alto verso il basso in modo che ora possa essere utilizzata nella parte superiore delle pagine.
Visualizza la demo.

L'HTML

L'HTML è semplice quanto i due esempi di dock. Metteremo tutto in un div di contenimento e posizioneremo tutte le nostre immagini e titoli, che sono racchiusi in collegamenti, all'interno di una lista non ordinata.

 
  
 
Apertura
 
tutti gli esempi
 
esempio 3
 
esempio 2
 
Esempio 1
 
 

 .stack position: fixed; fondo: 28px; a destra: 40px;  .stack> img position: relativo; cursore: puntatore; padding-top: 35px; z-index: 2;  .stack ul list-style: none; posizione: assoluta; inizio: 5px; cursore: puntatore; z-index: 1;  .stack ul li position: absolute;  .stack ul li img border: 0;  .stack ul li span display: none;  .stack .openStack li span font-family: "Lucida Grande", Lucida, Verdana, sans-serif; blocco di visualizzazione; altezza: 14px; position: absolute; inizio: 17px; destra: 60px; altezza della linea: 14px; confine: 0; background-color: # 000; imbottitura: 3px 10px; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; color: #fcfcfc; allineamento del testo: centro; text-shadow: # 000 1px 1px 1px; opacità: .85; filtro: alfa (opacità = 85);  / * Correzioni IE * / .stack _position: absolute;  .stack ul _z-index: -1; _top: -15px;  .stack ul li * right: 5px; 

 $ (function () // Stack initialize var openspeed = 300; var closespeed = 300; $ ('. stack> img'). toggle (function () var vertical = 0; var horizontal = 0; var $ el = $ (this); $ el.next (). children (). each (function () $ (this) .animate (top: '-' + vertical + 'px', a sinistra: orizzontale + 'px' , openspeed); vertical = vertical + 55; horizontal = (horizontal + .75) * 2;); $ el.next (). animate (top: '-50px', a sinistra: '10px', openspeed). addClass ('openStack') .find ('li a> img'). animate (width: '50px', marginLeft: '9px', openspeed); $ el.animate (paddingTop: '0'); , function () // reverse above var $ el = $ (this); $ el.next (). removeClass ('openStack'). children ('li'). animate (top: '55px', a sinistra : '-10px', più vicina); $ el.next (). Find ('li a> img'). Animate (width: '79px', marginLeft: '0', closespeed); $ el.animate (paddingTop: '35');); // Impila l'animazione aggiuntiva $ ('. stack li a'). hover (function () $ ("img", this) .animate (width: '56px ', 100); $ ("span", this) .animate (marginRight:' 30px ');, function () $ ("img", this) .an imate (width: '50px', 100); $ ("span", this) .animate (marginRight: '0'); ); );