Share
Omtrent hver nettside bruker de vanlige navigasjonskonseptene vi er vant til. Etter en stund kan dette bli ganske kjedelig, spesielt for designere som trives på kreativitet. Samtidig som etterligner OS X-docken og stabler er ikke nye, det er absolutt ikke vanlig.
For noen dager siden skrev Jeffrey om en potensiell "utenfor boks" -konkurransen på ThemeForest for å oppmuntre forfattere til å sette på sine kreativitetshatter og utforme brukbare maler med "utenfor boksen" kreative design. I denne opplæringen vil jeg dekke noen måter å gjøre akkurat det med OS X stil dokker og stabler navigasjon.
Før vi kommer i gang, vil jeg gi et rop ut til et par gutter som kom til redning da de hørte min ring for hjelp på Twitter. Steve oppdaterte stablingsskriptet av Harley fra å bruke jQuery 1.2.6 for å bruke dagens 1,3.2-utgivelse, og Rey Bango fra jQuery-teamet hjalp meg med å fikse en feil. De hoppet begge til oppgaven innen et par minutter av mitt rop om hjelp via Twitter. Tusen takk gutter! * Applausrunde * :-D
Disse skriptene stole på jQuery 1.3.2. Eksemplene som vises er kompatible med alle de største nettleserne, inkludert IE6, og er enkle å sikre grasiøs nedbrytning hvis JavaScript er slått av eller deaktivert.
Den første dokken vi skal bygge bruker jQuery Fisheye Meny-plugin som er nevnt ovenfor. Det er ganske lett (~ 7kb med avhengigheter), men den viktigste grunnen til at jeg ønsket å bruke denne var fordi den er utrolig jevn, ingen stamming. Se demo.
Som du kan se i demoen, er det utrolig jevnt og responsivt. Ulempen er at du ikke kan bruke fast posisjonering med den hvis siden må rulle som den vil bryte. Hvis du ikke trenger det løst i nettleservinduet, virker det bra.
Dette er et godt eksempel på "utenfor boksen" konseptene på nettsteder og gir et interaktivt og morsomt grensesnitt.
Påkrevde filer (jeg har kombinert Fisheye-plugin og iutil.js i demofilene).
Vi vil pakke inn våre bilder og titler i koblinger og plassere dem i en inneholdende div. Da pakker vi alt sammen i en annen som inneholder div for at den skal fungere skikkelig.
eksempel 1eksempel 2
Legg merke til at jeg har plassert titlene i span-koder, slik at vi kan stile dem så vel som tillate pluginet å gjemme / vise dem etter behov.
Med CSS plasserer vi dokken hvor vi vil ha den på siden. Vi kan ikke bruke fast posisjonering med dette pluginet, eller det fungerer ikke som det skal.
.dock-container posisjon: relativ; topp: -8px; høyde: 50px; polstring-venstre: 20px; a.dock-element display: block; bredde: 50px; posisjon: absolutt; bunn: 0; tekst-align: center; tekst-dekorasjon: ingen; farge: # 333; .dock-item span display: none; polstring-venstre: 20px; .dock-item img border: 0; margin: 5px 10px 0px; bredde: 100%;
Jeg har også lagt litt ekstra CSS i hodet på siden under CSS inkludert ovenfor. Jeg pakket den inn i noscript-koder hvis en besøkende ikke har JavaScript aktivert eller tilgjengelig, vil det fortsatt være en brukbar navigasjon. Jeg bør påpeke at dette ikke vil validere fordi noscript-taggen ikke er gyldig i hovedenheten, selv om den fungerer i alle de nåværende nettleserne. ;-)
#dock top: -32px; a.dock-element posisjon: relativ; flyte: venstre; margin-høyre: 10px; .dock-item span display: block;
Vi tar med våre JavaScript-filer nå, starter med jQuery 1.3.2. Fisheye-iutil.min.js-filen er kombinasjonen av Fisheye-plugin og dens avhengige iutil.js-fil. Vi lager den siste filen og legger JavaScript til for å initialisere dokken i den.
Nå skal vi initialisere dokken når siden laster. Du kan bruke flere plugin-alternativer for å tilpasse dokken som du trenger for posisjonering og funksjonalitet. Du kan se dokumentasjonen ved å besøke nettstedet som er oppført under kilder for Fisheye-plugin.
Accentsconagua
$ (funksjon () // Dock initierer $ ('# dock'). Fisheye (maxWidth: 30, items: 'a', itemsText: 'span', container: '.dock-container', itemWidth: 50, nærhet: 60, justering: 'venstre', valign: 'bunn', halver: 'senter';;); Det er alt der er til det! :-D
Den horisontale kaien var lett og definitivt en fin ide å bruke på nettsteder. De er sannsynligvis den vanligste typen som brukes over nettet, så la oss prøve noe annerledes. Vi kunne få litt mer "utenfor boksen" hvis vi gjorde en vertikal dockningsnavigasjon.
Denne kaien er avhengig av jqDock jQuery-plugin. Det er omtrent 10kb i størrelse, så det er noen få kb større enn den forrige versjonen, men det er ikke mye. Ulempen med denne plugin er at den ikke er så jevn som Fisheye plugin dock, selv om den fortsatt er veldig flytende og sikkert brukbar. Denne plugin har heller ikke problemer med fast posisjonering. Se demo.
Vi legger bildene våre i en uordnet liste og pakk dem inn i koblinger. Som med det siste pluginet, vil vi pakke alt inn i en inneholdende div. Når vi initialiserer pluginet, bruker vi "ul" her.
Du vil legge merke til denne bryggen, vi har ikke titler innpakket i strekkmerker. I stedet vil dette pluginet se på tittelen "tittel" -settet for hvert bilde og opprette titlene på den måten (hvis aktivert i plugin-alternativene). Dette gjør markeringen litt enklere, men det gjør også titlene litt mindre tilpassbare.
Vi plasserer kaien på venstre side (kan være begge sider) ved hjelp av fast posisjonering. Vi gir det litt mellomrom mellom seg selv og toppen av nettleservinduet for estetikk, og ikonene forsvinner ikke når de forstørres.
#dockContainer posisjon: fast; topp: 60px; igjen: 6px; #jqDock posisjon: relative; bunn: 48px; .jqDockLabel bakgrunn: # 333; farge: #fff; polstring: 3px 10px; -webkit-grense-radius: 10px; -moz-grense-radius: 10px;
For å style titlene kan vi bruke klassen ".jqDockLabel". Vi trenger heller ikke å inkludere noen ekstra stiler for at den fortsatt kan brukes med JavaScript deaktivert. Det kan ikke være veldig pen, men det er funksjonelt.
Vi tar med i jQuery-biblioteket akkurat som forrige dock samt plugin.
Vi initialiserer docken og angi noen alternativer for å tilpasse den. Du kan lese dokumentasjonen på disse innstillingene ved å besøke nettstedet som er oppført under kilder i begynnelsen av opplæringen for jqDock. Det jeg vil påpeke her er imidlertid varigheten alternativet. Dette er tiden for forstørrelsesanimasjon i millisekunder. Det er hyggelig å kunne endre varighetshastigheten, men det ser ut til å bli litt stuttery, noe jeg hater.
$ (funksjon () var jqDockOpts = juster: 'venstre', varighet: 200, etiketter: 'tc', størrelse: 48, avstand: 85; $ ('# jqDock'). jqDock (jqDockOpts);) ; Du kan enkelt endre plasseringen av dokken og etikettene, så vel som den første størrelsen på ikonene og noen andre alternativer. Det jeg ikke likte om dette pluginet er at det forstørrer til ikonets fulle størrelse. Den forrige plugin gir deg muligheten til å endre størrelsen den forstørrer til. Det er alt der er til det!
Dette er sannsynligvis min favoritt navigasjonsstil ut av de tre som vises i denne opplæringen. Det er super lett (~ 1kb) og er en virkelig kreativ "utenfor boksen" metode for navigering for et nettsted. Det kan være litt vanskelig å ha navigasjonen nederst til høyre eller venstre i nettleservinduet, men det ville sikkert være kreativt og spare mye plass. Se demo.
Mens jeg skrev dette, skjønte jeg at det er sannsynligvis mange som ikke vil like deres navigering nederst på siden, så jeg tok et par ekstra minutter og la en nedlastingstabel til eksempelfilene. På denne måten sprer navigasjonen fra topp til bunn slik at den nå kan brukes øverst på sidene.
Se demo.
HTML er like enkelt som de to dock-eksemplene. Vi plasserer alt i en inneholdende div og legger alle våre bilder og titler, som er pakket inn i koblinger, innenfor en uordnet liste.
- Aperture
- alle Eksempler
- eksempel 3
- eksempel 2
- eksempel 1
Legg merke til at jeg har lagt et bilde før den uordnede listen. Dette er kurvbildet som resten av ikonene blir stablet bak.
Vi plasserer hovedbeholderen og sørger for at kurvbildet har en høyere z-indeks enn den uordnede listen, slik at alt stabler bak den. Legg merke til at jeg har gitt kurvbildet 35px av polstring. Dette forhindrer at ikonene bak kurven klikkes, siden kurvbildet er kortere enn ikonene. Hvis du bytter kurvikonet til noe høyere, må du også endre polstring.
.Stabel posisjon: fast; bunn: 28px; høyre: 40px; .stack> img posisjon: relative; markør: pointer; polstring: 35px; z-indeks: 2; .stack ul listestil: none; posisjon: absolutt; topp: 5px; markør: pointer; z-indeks: 1; .stack ul li posisjon: absolutt; .stack ul li img border: 0; .stack ul li span display: none; .stack .openStack li span font-family: "Lucida Grande", Lucida, Verdana, sans-serif; display: block; høyde: 14px; stilling: absolutt; topp: 17px; høyre: 60px; linjehøyde: 14px; grense: 0; background-color: # 000; polstring: 3px 10px; border-radius: 10px; -webkit-grense-radius: 10px; -moz-grense-radius: 10px; farge: #fcfcfc; tekst-align: center; tekstskygge: # 000 1px 1px 1px; opacity: .85; filter: alfa (opasitet = 85); / * IE Fixes * / .stack _position: absolute; .stack ul _z-index: -1; _top: -15px; .stack ul li * right: 5px;
Titlene som er pakket inn i strekkmerker, er satt til å vises: ingen, så de blir gjemt når siden lastes.
Vi legger JavaScript i sin egen fil siden det er mer enn et par linjer. Når bildet utenfor den uordnede listen (kurven) klikkes, bruker den jQuery's toggle-funksjonen til å animere listepostene og sette sin posisjon basert på det horisontale utgangspunktet + .75px deretter multiplisert med 2. Dette gir oss den fine buede våren handling av listepostene.
Du kan endre .75px eller multiplikatoren (2) for å tilpasse hvor mye den kurver.
$ (funksjon () // Stack initialiserer var openspeed = 300; var closespeed = 300; $ ('stakk> img'). skift (funksjon () var vertikal = 0; var horisontal = 0; var $ el = $ (dette); $ el.next (). barn (). hver (funksjon () $ (dette) .animate (topp: '-' + vertikal + 'px', venstre: horisontal + 'px' , åpningstast), vertikal = vertikal + 55, horisontal = (horisontal + .75) * 2;); $ el.next (). animate (top: '-50px', venstre: '10px', openspeed). addClass ('openStack') .find ('li a> img'). animate (width: '50px', marginLeft: '9px', openspeed); $ el.animate (paddingTop: '0'); , funksjon () // revers over var $ el = $ (dette); $ el.next (). removeClass ('openStack'). barn ('li'). animate (topp: '55px' : '-10px', closespeed); $ el.next (). Finn ('li a> img'). Animate (width: '79px', marginLeft: '0', closespeed); $ el.animate (paddingTop: '35';;); // Stacks ekstra animasjon $ ('.stack li a'). svinger (funksjon () $ ("img", dette) .animate (width: '56px ', 100); $ ("span", dette) .animate (marginRight:' 30px ');, funksjon () $ ("img", dette). imate (bredde: '50px', 100); $ ("span", dette) .animate (marginRight: '0'); ); ); Da når brukeren klikker kurvbildet igjen kjører den neste funksjonen som reverserer det vi nettopp gjorde. Jeg la til litt ekstra animasjon til listepostene og deres titler for å gi dem litt mer tilbakemeldinger fra brukerne, som selvfølgelig lett kan fjernes..
Og der har du det! En enkel og fleksibel OS X stil stabling navigasjon for nettstedet ditt. :-D Dette skriptet er også i ferd med å konverteres til et enklere å bruke plugin, så hold øye med det.
Forhåpentligvis vil disse eksemplene gi deg ideer til å være kreative og bryte ut av formen når du designer din neste nettside eller mal. Som du kan se, er jQuery et kraftig bibliotek som gjør det enkelt å gjøre våre ideer til virkelighet. Med en potensiell kommende konkurranse basert på "utenfor boksen" -design, kan du kanskje begynne på noen ideer for å sende inn til ThemeForest. Hvis du ikke har sendt inn filer før, er det veldig enkelt og kan definitivt være vel verdt tiden din! :-)
Jeg vil takke Rey (fra jQuery-teamet) og Steve for å svare på min ring for hjelp på Twitter så fort. Dette er et godt eksempel på hvor nyttig Twitter kan være for designere og utviklere. Hvis du ikke følger Theme Forest eller Nettuts på Twitter ennå, er det nå en god tid å gjøre det. De er begge nettsteder med massevis av fantastisk informasjon. Du kan også følge meg på Twitter hvis du vil.
