Share
Aproape fiecare site web utilizează conceptele de navigație obișnuite cu care suntem obișnuiți. După un timp, acest lucru poate deveni destul de plictisitor, mai ales pentru designerii care se bucură de creativitate. In timp ce imitând stația de andocare OS X iar stivele nu sunt noi, cu siguranță nu sunt comune.
Cu câteva zile în urmă, Jeffrey a postat despre un potențial concurs "în afara căsuței" de pe ThemeForest pentru a încuraja autorii să își pună pe pălăriile de creativitate și să modeleze șabloane utilizabile cu design creativ "în afara căsuței". În acest tutorial voi acoperi câteva moduri de a face exact acest lucru cu stațiile de andocare OS X și stive de navigație.
Înainte de a începe, vreau să strig câteva tipi care au venit la salvare când au auzit chemarea mea de a vă ajuta pe Twitter. Steve a actualizat scriptul de stive de Harley de la utilizarea jQuery 1.2.6 pentru a folosi versiunea curentă 1.3.2 și Rey Bango de la echipa jQuery mi-a ajutat să reparăm o eroare. Amândoi au sarit la sarcină în câteva minute de strigătul meu pentru ajutor prin Twitter. Mulțumesc tinerilor! *Ropot de aplauze* :-D
Aceste scripturi se bazează pe jQuery 1.3.2. Exemplele afișate sunt compatibile cu toate browserele majore, inclusiv IE6 și sunt ușor de asigurat degradarea grațioasă dacă JavaScript este dezactivat sau dezactivat.
Primul dock pe care îl vom construi utilizează pluginul jQuery Fisheye Menu menționat mai sus. Este destul de ușoară (~ 7kb cu dependențe), dar principalul motiv pentru care am vrut să îl folosesc era că este incredibil de neted, fără stuttering. Vizualizați demonstrația.
După cum puteți vedea în demo, este incredibil de netedă și receptivă. Dezavantajul este că nu puteți utiliza poziționarea fixă cu aceasta dacă pagina trebuie să se deruleze pe măsură ce se va rupe. Dacă nu aveți nevoie să fie fixat în fereastra browserului, atunci funcționează excelent.
Acesta este un exemplu excelent de concepte "în afara căsuței" în site-uri web și oferă o interfață interactivă și distractivă.
Fișierele necesare (Am combinat pluginul Fisheye și iutil.js în fișierele demo).
Ne vom împacheta imaginile și titlurile în link-uri și le vom plasa într-un div conținând. Atunci vom înfășura totul într-un alt cont pentru a funcționa corect.
Exemplul 1Exemplul 2
Observați că am plasat titlurile în etichete pentru a le permite să le eticheteze, precum și să permită pluginului să le ascundă / să le arate după cum este necesar.
Cu CSS vom poziționa stația de andocare în locul în care o vrem pe pagină. Nu putem folosi poziționarea fixă cu acest plugin sau nu va funcționa corect.
.doc-container poziție: relativă; top: -8px; înălțime: 50px; padding-left: 20px; a.dock-item display: bloc; lățime: 50px; poziția: absolută; fund: 0; text-align: centru; text-decoration: nici unul; culoare: # 333; .doc - item item display: none; padding-left: 20px; .doc-element img frontieră: 0; margine: 5px 10px 0px; lățime: 100%;
De asemenea, am plasat un mic CSS suplimentar în capul paginii sub CSS-ul inclus mai sus. Am înfășurat-o în etichetele noscript în cazul în care un vizitator nu are JavaScript activat sau disponibil, va fi totuși o navigație utilă. Ar trebui să subliniez că acest lucru nu va fi validat deoarece tag-ul noscript nu este valabil în secțiunea cap, chiar dacă funcționează în toate browserele curente. ;-)
#dock top: -32px; a.dock-item poziție: relativă; plutește la stânga; margin-dreapta: 10px; Spațiul de afișare-element display: bloc;
Vom aduce fișierele noastre JavaScript începând cu jQuery 1.3.2. Fișierul fisheye-iutil.min.js este combinația dintre pluginul Fisheye și fișierul iutil.js dependent. Vom crea ultimul fișier și vom pune JavaScript-ul necesar pentru a inițializa docul în el.
Acum vom inițializa stația de andocare după încărcarea paginii. Puteți utiliza mai multe opțiuni de plugin pentru a personaliza stația de andocare așa cum aveți nevoie pentru poziționare și funcționalitate. Puteți vizualiza documentația accesând site-ul listat în surse pentru pluginul Fisheye.
$ Fisier (maxWidth: 30, elemente: 'a', itemsText: 'span', container: '.dock-container', itemWidth: 50, proximitate: 60, aliniere: "stânga", valign: "fund", halign: "centru"););
Cam despre asta e! :-D
Docul orizontal a fost ușor și, cu siguranță, o idee curată de utilizat pe site-uri web. Acestea sunt probabil cel mai des întâlnit tip de pe web în prezent, așa că să încercăm ceva diferit. Am putea obține un pic mai mult "în afara casetei" dacă am făcut o navigare verticală a docului.
Acest doc se bazează pe pluginul jQDock jQuery. Este de aproximativ 10kb în dimensiune, deci este cu câteva kb mai mare decât versiunea anterioară, dar asta nu este prea mult. Dezavantajul acestui plug-in este acela că nu este la fel de netedă ca și portul Fisheye plugin, deși este încă foarte fluid și cu siguranță utilizabil. Acest plugin, de asemenea, nu are probleme cu poziționare fixă. Vizualizați demonstrația.
Ne vom pune imaginile într-o listă neordonată și le vom înfășura în link-uri. Ca și în ultimul plugin, vom înfășura totul într-un div care conține. Când inițializăm pluginul, vom folosi "ul" aici.
Veți observa pe acest doc nu avem titluri înfășurate în etichete de span. În schimb, acest plugin va privi setul de etichete "titlu" setat pentru fiecare imagine și va crea titlurile astfel (dacă este activat în opțiunile pluginului). Acest lucru face marcajul un pic mai simplu, dar face ca titlurile să fie și mai puțin personalizabile.
Poziționăm docul pe partea stângă (poate fi laterală) folosind poziționarea fixă. Îi vom oferi un spațiu mic între el și fereastra de browser pentru estetică și astfel icoanele nu vor dispărea atunci când sunt lărgite.
#dockContainer position: fixed; top: 60px; stânga: 6px; #jqDock poziție: relativă; jos: 48px; .jqDockLabel background: # 333; culoare: #fff; padding: 3px 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px;
Pentru a modela titlurile, putem folosi clasa ".jqDockLabel". De asemenea, nu va trebui să includem alte stiluri pentru ca acesta să poată fi utilizabil în continuare cu dezactivarea JavaScript. Este posibil să nu fie foarte drăguță, dar este funcțională.
Vom aduce biblioteca jQuery la fel ca docul precedent, precum și pluginul.
Initializăm docul și setăm câteva opțiuni pentru a-l personaliza. Puteți citi documentația privind aceste setări accesând site-ul listat la sursele de la începutul tutorialului pentru jqDock. Ceea ce vreau să subliniez aici este însă opțiunea de durată. Acesta este timpul pentru animația de mărire în milisecunde. Este frumos să poți schimba viteza de durată, dar se pare că e puțin stutter, ceea ce urăsc.
$ (funcția () var jqDockOpts = alinia: 'stânga', durata: 200, etichetele: 'tc', mărimea: 48, distanța: 85 $ jqDock (jqDockOpts) ;
Puteți schimba cu ușurință poziționarea docului și etichetelor, precum și dimensiunea inițială a icoanelor și câteva alte opțiuni. Ceea ce nu mi-a plăcut în legătură cu acest plugin este faptul că se mărește la dimensiunea completă a pictogramei. Pluginul anterior vă oferă posibilitatea de a schimba dimensiunea pe care o mărește. Cam despre asta e!
Acesta este probabil stilul meu de navigare preferat din cele trei afișate în acest tutorial. Este foarte ușoară (~ 1kb) și este o metodă de navigare cu adevărat "în afara căsuței" pentru un site web. Ar putea fi un pic ciudat având navigația din partea dreaptă sau din stânga a ferestrei browserului, dar ar fi cu siguranță creativă și va salva o mulțime de spațiu. Vizualizați demonstrația.
În timp ce scriu acest lucru, mi-am dat seama că sunt probabil mulți oameni care nu vor plăcea navigarea lor în partea de jos a paginii, așa că am luat câteva minute în plus și am adăugat o stivă drop-down la exemplele de fișiere. În acest fel, navigația izvorăște de sus în jos, pentru a putea fi folosită în partea de sus a paginilor.
Vizualizați demonstrația.
HTML-ul este la fel de simplu ca și cele două exemple de docuri. Vom plasa totul într-o div și vom plasa toate imaginile și titlurile noastre, care sunt împachetate în legături, într-o listă neordonată.
- Deschidere
- toate exemplele
- Exemplul 3
- Exemplul 2
- Exemplul 1
Observați că am plasat o imagine înainte de lista neordonată. Aceasta este imaginea coșului pe care restul icoanelor vor fi stivuite în spate.
Vom plasa containerul principal și vom asigura că imaginea coșului are un z index mai mare decât lista neordonată, astfel încât totul se află în spatele acestuia. De asemenea, observați că le-am dat imaginea coșului de 35px de umplutură. Acest lucru împiedică apăsarea pictogramelor din spatele coșului, deoarece imaginea coșului este mai scurtă decât pictogramele. Dacă schimbați pictograma coșului la ceva mai înalt, atunci va trebui să schimbați și padding-ul.
.stivă poziție: fixă; fund: 28px; dreapta: 40px; .stack> img poziție: relativă; cursor: pointer; padding-top: 35px; z-index: 2; .stack ul list-style: none; poziția: absolută; top: 5px; cursor: pointer; z-index: 1; .stack ul li poziție: absolută; .stack ul li img graniță: 0; .stack ul li span afișare: nici una; .stack .openStack li span font-family: "Lucida Grande", Lucida, Verdana, sans-serif; display: block; înălțime: 14px; Poziția: absolută; top: 17px; dreapta: 60 px; linia-înălțime: 14px; frontieră: 0; background-color: # 000; padding: 3px 10px; raza de graniță: 10 pixeli; -webkit-border-radius: 10px; -moz-border-radius: 10px; culoare: #fcfcfc; text-align: centru; text-shadow: # 000 1px 1px 1px; opacitate: .85; filtru: alfa (opacitate = 85); / * IE Fixe * / .stack _position: absolut; .stack ul _z-index: -1; _top: -15px; .stack ul li * dreapta: 5px;
Titlurile înfășurate în etichetele Span sunt setate să afișeze: none, astfel încât acestea vor fi ascunse când pagina se încarcă.
Vom plasa JavaScript în fișierul propriu, deoarece este mai mult de două linii. Când se face clic pe imaginea din afara listei neordonate (coșul), se folosește funcția de comutare a jQuery pentru a anima elementele listei și a se stabili poziția pe baza punctului de pornire orizontal + .75px apoi înmulțit cu 2. Acest lucru ne oferă un izvor curbat frumos acțiunea elementelor din listă.
Puteți modifica .75px sau multiplicatorul (2) pentru a personaliza cât de mult se curbează.
Accentsconagua
$ (funcția () // Stack inițializa var openspeed = 300; var closespeed = 300; $ ('. stack> img'). (top: '-' + vertical + 'px', stanga: orizontal + 'px' (top: '-50px', stânga: '10px', openspeed); verticală = vertical + 55; orizontală = (orizontală + .75) * 2; (width: '50px', marginLeft: '9px', openspeed); $ el.animate (paddingTop: '0'); , functie () // inversa peste var $ el = $ (aceasta); $ el.next () removeClass ('openStack') copii ('li') animate (top: '55px' : '-10px', closespeed); $ el.next () găsiți ('a a> img'). (paddingTop: '35');); // Stive de animație suplimentară $ ('. stack li a') hover (function () $ ("img" ', 100), $ ("span", acest lucru) .animate (marginRight:' 30px ');, funcția () $ ("img" imate (lățime: '50px', 100); $ ("span", acest lucru) .animate (marginRight: '0'); ); ); Atunci când utilizatorul face clic din nou pe imaginea coșului, rulează următoarea funcție care inversează ceea ce am făcut. Apoi am adăugat o animație suplimentară elementelor din listă și titlurilor acestora pentru a le oferi un feedback mai mic utilizatorilor, care, desigur, poate fi ușor eliminat.
Și acolo aveți! O navigare simplă și flexibilă în stilul OS X pentru site-ul dvs. Web. :-D Acest script este, de asemenea, în curs de a fi convertit într-un plugin mai ușor de utilizat astfel încât să păstreze un ochi pentru asta.
Sperăm că aceste exemple vă vor oferi câteva idei de a fi creativi și de a ieși din mucegai atunci când vă proiectați următorul website sau șablon. După cum puteți vedea, jQuery este o bibliotecă puternică care face ca ideile noastre să devină mai ușor de realizat. Cu o potențială competiție viitoare bazată pe design-uri "în afara căsuței", ați putea începe să faceți niște idei pentru a le trimite la ThemeForest. Dacă nu ați trimis fișiere înainte, este foarte ușor și poate fi cu siguranță merită timpul! :-)
Vreau să-i mulțumesc lui Rey (de la echipa jQuery) și lui Steve că mi-a răspuns repede apelul pentru ajutor pe Twitter. Acesta este un prim exemplu al modului în care Twitter poate fi util pentru designeri și dezvoltatori. Dacă nu urmați Theme Forest sau Nettuts pe Twitter încă, acum este un moment bun pentru a face acest lucru. Sunt ambele site-uri cu o mulțime de informații fantastice. De asemenea, puteți să mă urmați pe Twitter dacă doriți.
