Share
Nästan varje hemsida använder de vanliga navigeringskoncept som vi alla brukar använda. Efter ett tag kan det bli ganska tråkigt, speciellt för designers som trivs på kreativitet. Medan efterliknar OS X-dockan och stackar är inte nya, det är verkligen inte vanligt.
För några dagar sedan skrev Jeffrey om en potentiell "utanför lådan" -tävlingen på ThemeForest för att uppmuntra författarna att lägga på sina kreativitetshattar och utforma användbara mallar med "utanför lådan" kreativa mönster. I denna handledning kommer jag att täcka några sätt att göra just det med OS X stil dockor och staplar navigering.
Innan vi börjar, vill jag skrika ut till ett par killar som kom till räddning när de hörde mitt samtal om hjälp på Twitter. Steve uppdaterade stacks scriptet av Harley från att använda jQuery 1.2.6 för att använda den nuvarande 1.3.2-utgåvan och Rey Bango från jQuery-teamet hjälpte mig att fixa en bugg. De hoppade båda till uppgiften inom några minuter av mitt rop om hjälp via Twitter. Tack så många killar! *Omgång applåder* :-D
Dessa skript är beroende av jQuery 1.3.2. De visade exemplen är kompatibla med alla större webbläsare, inklusive IE6, och är lätta att säkerställa graciös försämring om JavaScript är avstängt eller inaktiverat.
Den första dockan vi bygger använder jQuery Fisheye Meny-plugin som nämns ovan. Det är ganska lätt (~ 7kb med beroenden) men huvudorsaken till att jag ville använda den här var att den är otroligt smidig, ingen stammar. Visa demo.
Som du kan se i demo är det otroligt smidigt och lyhörd. Nackdelen är att du inte kan använda fast positionering med den om sidan behöver bläddra eftersom den kommer att bryta. Om du inte behöver det fixat i webbläsarfönstret fungerar det bra.
Detta är ett bra exempel på begrepp "utanför boxen" på webbplatser och ger ett interaktivt och roligt gränssnitt.
Obligatoriska filer (jag har kombinerat Fisheye-plugin och iutil.js i demofilerna).
Vi sätter in våra bilder och titlar i länkar och placerar dem i en innehållande div. Då sätter vi allt i en annan innehållande div för att den ska fungera korrekt.
exempel 1exempel 2
Lägg märke till att jag har placerat titlarna i spårstaggar så att vi kan stile dem och låta plugin gömma / visa dem efter behov.
Med CSS placerar vi dockan där vi vill ha den på sidan. Vi kan inte använda fast positionering med det här pluginet eller det fungerar inte korrekt.
.dockningsbehållare position: relativ; topp: -8px; höjd: 50px; stoppning-vänster: 20px; a.dock-item display: block; bredd: 50px; position: absolut; botten: 0; text-align: center; text-dekoration: ingen; färg: # 333; .dock-item span display: none; stoppning-vänster: 20px; .dock-item img border: 0; marginal: 5px 10px 0px; bredd: 100%;
Jag har också lagt en liten extra CSS i huvudet på sidan nedan CSS som ingår ovan. Jag paketerade den i noscript-taggar om en besökare inte har JavaScript aktiverat eller tillgängligt, blir det fortfarande en användbar navigering. Jag bör påpeka att detta inte kommer att validera eftersom noscript-taggen inte är giltig i huvuddelen, även om den fungerar i alla aktuella webbläsare. ;-)
#dock top: -32px; a.dock-item position: relative; flyta till vänster; marginal-höger: 10px; .dock-item span display: block;
Vi tar in våra JavaScript-filer nu och börjar med jQuery 1.3.2. Fisheye-iutil.min.js-filen är kombinationen av Fisheye-plugin och dess beroende iutil.js-fil. Vi skapar den sista filen och ställer in vår JavaScript för att initiera dockan i den.
Nu initialiserar vi dockan när sidan laddas. Du kan använda flera pluginalternativ för att anpassa dockan som du behöver för positionering och funktionalitet. Du kan se dokumentationen genom att besöka webbplatsen som anges under källor för Fisheye-plugin.
Accentsconagua
$ (funktion () // Dock initierar $ ('# dock'). Fisheye (maxWidth: 30, items: 'a', itemsText: 'span', container: '.dock-container', itemWidth: 50, närhet: 60, inriktning: 'vänster', valign: 'bottom', halign: 'center');); Det är allt det finns! :-D
Den horisontella bryggan var lätt och definitivt en snygg idé att använda på webbplatser. De är förmodligen den vanligaste typen som används över nätet, så låt oss försöka något annorlunda. Vi kunde få lite mer "utanför lådan" om vi gjorde en vertikal dockningsnavigering.
Den här dockan är beroende av jqDock jQuery-plugin. Det är ungefär 10kb i storlek, så det är några kb större än den tidigare versionen men det är inte mycket. Nackdelen med denna plugin är att den inte är så jämn som Fisheye-plug-dockan, även om den fortfarande är väldigt flytande och verkligen användbar. Det här plugin har inte problem med fast positionering. Visa demo.
Vi lägger våra bilder i en orörd lista och lägger dem i länkar. Som med det sista pluginet sätter vi allt i en innehållande div. När vi initierar plugin använder vi "ul" här.
Du kommer att märka på denna docka, vi har inte titlar som är inslagna i spårstaggar. Istället kommer det här pluginet att titta på "titel" -taggen för varje bild och skapa titlarna på det sättet (om det är aktiverat i pluginalternativen). Detta gör markeringen lite enklare men det gör titlarna lite mindre anpassningsbara.
Vi placerar dockan på vänster sida (kan vara båda sidor) med fast positionering. Vi ger det lite utrymme mellan sig själv och toppen av webbläsarfönstret för estetik och så försvinner inte ikonerna när de förstoras.
#dockContainer position: fixed; topp: 60px; vänster: 6px; #jqDock position: relative; botten: 48px; .jqDockLabel bakgrund: # 333; färg: #fff; vaddering: 3px 10px; -webkit-gräns-radie: 10px; -moz-gränsen-radien: 10px;
För att utforma titlarna kan vi använda klassen ".jqDockLabel". Vi behöver inte inkludera några extra stilar för att den fortfarande kan användas med JavaScript inaktiverat. Det kan inte vara väldigt söt men det är funktionellt.
Vi tar med i jQuery-biblioteket precis som tidigare dock samt plugin.
Vi initierar dockan och ställer in några alternativ för att anpassa den. Du kan läsa dokumentationen om dessa inställningar genom att besöka webbplatsen som anges under källor i början av handledningen för jqDock. Vad jag vill påpeka här är dock varaktigheten. Det här är tiden för förstoringsanimering i millisekunder. Det är trevligt att kunna ändra varaktighetshastigheten men det verkar bli lite stuttery, vilket är något jag hatar.
$ (funktion () var jqDockOpts = justera: 'vänster', varaktighet: 200, etiketter: 'tc', storlek: 48, avstånd: 85; $ ('# jqDock'). jqDock (jqDockOpts);) ; Du kan enkelt ändra positioneringen av dockan och etiketterna, liksom ikonernas ursprungliga storlek och några andra alternativ. Vad jag inte tyckte om det här pluginet är att det förstorar till ikonens fulla storlek. Den tidigare plugin ger dig möjligheten att ändra storleken den förstorar till. Det är allt som finns där!
Detta är förmodligen min favoritnavigationsstil utav de tre som visas i denna handledning. Den är super lätt (~ 1kb) och är en väldigt kreativ "utanför boxen" -metoden för navigering för en webbplats. Det kan vara lite besvärligt att navigera längst ned till höger eller vänster i webbläsarfönstret men det skulle säkert vara kreativt och spara mycket utrymme. Visa demo.
Under det att jag skrev det så insåg jag att det förmodligen finns många som inte gillar deras navigering längst ner på sidan så jag tog ett par extra minuter och lade till en drop-down stack till exempelfilerna. På så sätt sprider navigeringen från topp till botten så att den nu kan användas högst upp på sidorna.
Visa demo.
HTML är lika enkelt som de två dockningsexemplen. Vi placerar allt i en innehållande div och placerar alla våra bilder och titlar, som är inslagna i länkar, inom en orörd lista.
- Öppning
- alla exempel
- exempel 3
- exempel 2
- exempel 1
Observera att jag har lagt en bild före den oordnade listan. Det här är korgbilden som resten av ikonerna ska staplas bakom.
Vi placerar huvudbehållaren och ser till att korgbilden har ett högre z-index än den oordnade listan så allt stacker bakom det. Observera också att jag har gett korgbilden 35px av vaddering. Detta förhindrar att ikonerna bakom korgen klickas eftersom korgbilden är kortare än ikonerna. Om du byter korgikonen till något längre måste du också ändra vadderingen.
.stack position: fixed; botten: 28px; höger: 40px; .stack> img position: relative; markör: pekare; padding-top: 35px; z-index: 2; .ackack ul listestil: none; position: absolut; topp: 5px; markör: pekare; z-index: 1; .ackack 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; display: block; höjd: 14px; position: absolute; topp: 17px; höger: 60 bildpunkter; linjehöjd: 14px; gräns: 0; background-color: # 000; vaddering: 3px 10px; gränsstråle: 10px; -webkit-gräns-radie: 10px; -moz-gränsen-radien: 10px; färg: #fcfcfc; text-align: center; textskugga: # 000 1px 1px 1px; opacitet: .85; filter: alfa (opacitet = 85); / * IE-korrigeringar * / .stack _position: absolute; .ackack ul _z-index: -1; _top: -15px; .ackack ul li * höger: 5px;
Titlarna som är inslagna i spårstaggar är inställda att visa: inga så att de kommer att döljas när sidan laddas.
Vi placerar JavaScript i sin egen fil eftersom det är mer än ett par rader. När bilden utanför den oordnade listan (korg) klickas, använder den jQuerys växlingsfunktion för att animera listobjekten och ställa in sin position baserat på den horisontella utgångspunkten + .75px och multipliceras med 2. Detta ger oss den snygga krökta fjädern åtgärd av listobjekten.
Du kan ändra .75px eller multiplikatorn (2) för att anpassa hur mycket den kurverar.
$ (funktion () // Stack initiera var openspeed = 300; var closespeed = 300; $ ('.stack> img'). växla (funktion () var vertikal = 0; var horisontal = 0; var $ el = $ (detta); $ el.next (). barn (). varje (funktion () $ (detta) .animate (top: '-' + vertical + 'px', vänster: horisontellt + 'px' , vertikal = vertikal + 55, horisontal = (horisontal + .75) * 2;); $ el.next (). animera (top: '-50px', vänster: '10px', öppningshastighet). addClass ('openStack') .find ('li a> img'). animera (width: '50px', marginLeft: '9px', öppningshastighet); $ el.animate (paddingTop: '0'); , funktion () // omvänd över var $ el = $ (detta); $ el.next (). removeClass ('openStack'). barn ('li'). animate (top: '55px' : '-10px', closespeed); $ el.next (). Hitta ('li a> img'). Animera (bredd: '79px', marginLeft: '0', closespeed); $ el.animate (paddingTop: '35';;); // Stacks extra animation $ ('. stack li a'). svävar (funktion () $ ("img" ', 100); $ ("span", detta) .animate (marginRight:' 30px ');, funktion () $ ("img" imate (bredd: '50px', 100); $ ("span", detta) .animate (marginRight: '0'); ); ); Då när användaren klickar på korgbilden igen kör den nästa funktion som vänder om vad vi just gjorde. Sedan lade jag till lite extra animering till listobjekten och deras titlar för att ge dem lite mer användaråterkoppling, vilket givetvis lätt kan tas bort.
Och där har du det! En enkel och flexibel OS X stil stack navigering för din webbplats. :-D Detta skript är också i färd med att konverteras till ett enklare att använda plugin så håll ett öga på det.
Förhoppningsvis kommer dessa exempel att ge dig några idéer att vara kreativa och bryta ut ur formen när du utformar din nästa webbplats eller mall. Som du kan se är jQuery ett kraftfullt bibliotek som gör det enkelt att göra våra idéer till en verklighet. Med en potentiell kommande tävling baserad på "outside the box" -designen kan du komma igång med några idéer för att skicka in till ThemeForest. Om du inte har skickat in filer innan är det väldigt enkelt och kan definitivt vara värt din tid! :-)
Jag vill tacka Rey (från jQuery-teamet) och Steve för att svara på mitt samtal om hjälp på Twitter så snabbt. Detta är ett utmärkt exempel på hur användbar Twitter kan vara för designers och utvecklare. Om du inte följer Theme Forest eller Nettuts på Twitter än, är det nu dags att göra det. De är båda webbplatser med massor av fantastisk information. Du kan också följa mig på Twitter om du vill.
