Share
Vrijwel elke website gebruikt de gebruikelijke navigatieconcepten die we allemaal gewend zijn. Na een tijdje kan dit behoorlijk saai worden, vooral voor ontwerpers die gedijen op creativiteit. Terwijl het OS X-dock nabootsen en stacks is niet nieuw, het is zeker niet gebruikelijk.
Een paar dagen geleden berichtte Jeffrey over een potentiële "outside the box" -wedstrijd op ThemeForest om auteurs aan te moedigen hun creativiteitshoeden op te zetten en bruikbare sjablonen te ontwerpen met "outside the box" creatieve ontwerpen. In deze tutorial zal ik een aantal manieren bespreken om dat te doen met OS X-stijl docks en stapelsnavigatie.
Voordat we beginnen, wil ik een paar jongens die te hulp kwamen roepen toen ze mijn oproep om hulp op Twitter hoorden. Steve heeft het stackscript van Harley bijgewerkt met behulp van jQuery 1.2.6 om de huidige 1.3.2-release te gebruiken en Rey Bango van het jQuery-team hielp me een probleem op te lossen. Ze sprongen allebei binnen enkele minuten na mijn roep om hulp via Twitter. Bedankt jongens! * Ronde van applaus * :-D
Deze scripts vertrouwen op jQuery 1.3.2. De getoonde voorbeelden zijn compatibel met alle grote browsers, inclusief IE6, en zijn gemakkelijk te zorgen voor sierlijke vernedering als JavaScript is uitgeschakeld of uitgeschakeld.
Het eerste dock dat we zullen bouwen maakt gebruik van de plug-in jQuery Fisheye Menu die hierboven is genoemd. Het is vrij lichtgewicht (~ 7kb met afhankelijkheden) maar de belangrijkste reden dat ik dit wilde gebruiken was omdat het ongelooflijk soepel is, niet stottert. Demo bekijken.
Zoals je in de demo kunt zien, is het ongelooflijk soepel en responsief. Het nadeel is dat je er geen vaste positionering mee kunt gebruiken als de pagina moet scrollen omdat deze zal breken. Als je het niet nodig hebt opgelost in het browservenster dan werkt het geweldig.
Dit is een geweldig voorbeeld van 'outside the box'-concepten in websites en biedt een interactieve en leuke interface.
Vereiste bestanden (ik heb de Fisheye-plug-in en iutil.js in de demo-bestanden gecombineerd).
We plaatsen onze afbeeldingen en titels in links en plaatsen deze in een bevattende div. Dan zullen we alles in een andere bevattende div verpakt om ervoor te zorgen dat het goed functioneert.
Voorbeeld 1voorbeeld 2
Merk op dat ik de titels in span-tags heb geplaatst, zodat we ze kunnen opmaken en de plug-in in staat stellen ze te verbergen / tonen waar nodig.
Met CSS plaatsen we het dok waar we het op de pagina willen hebben. We kunnen vaste positionering niet gebruiken met deze plug-in of deze zal niet goed functioneren.
.dock-container positie: relatief; top: -8px; hoogte: 50px; padding-links: 20px; a.dock-item display: block; breedte: 50px; positie: absoluut; onderkant: 0; text-align: center; tekstdecoratie: geen; kleur: # 333; .dock-item span display: none; padding-links: 20px; .dock-item img border: 0; marge: 5px 10px 0px; breedte: 100%;
Ik heb ook een beetje extra CSS geplaatst in de kop van de pagina onder de CSS hierboven opgenomen. Ik heb het in tags van het noscript ingepakt voor het geval een bezoeker geen JavaScript heeft ingeschakeld of niet beschikbaar is, maar het blijft een bruikbare navigatie. Ik wil erop wijzen dat dit niet zal worden gevalideerd omdat de tag noscript niet geldig is in de headsectie, ook al werkt het in alle huidige browsers. ;-)
#dock top: -32px; a.dock-item position: relative; zweven: links; margin-right: 10px; .dock-item span display: block;
We zullen onze JavaScript-bestanden nu invoeren, beginnend met jQuery 1.3.2. Het bestand fisheye-iutil.min.js is de combinatie van de Fisheye-plug-in en het bijbehorende iutil.js-bestand. We zullen het laatste bestand maken en ons JavaScript nodig hebben om het dock erin te initialiseren.
Nu initialiseren we het dock zodra de pagina wordt geladen. U kunt verschillende plugin-opties gebruiken om het dock aan te passen zoals u nodig heeft voor positionering en functionaliteit. U kunt de documentatie bekijken door de site te bezoeken die wordt vermeld onder bronnen voor de Fisheye-plug-in.
Accentsconagua
$ (function () // Dock initialize $ ('# dock'). Fisheye (maxWidth: 30, items: 'a', itemsText: 'span', container: '.dock-container', itemWidth: 50, nabijheid: 60, uitlijning: 'left', valign: 'bottom', halign: 'center');); Dat is alles wat er is! :-D
Het horizontale dok was eenvoudig en zeker een goed idee om te gebruiken op websites. Ze zijn waarschijnlijk het meest gebruikte type op internet, dus laten we iets anders proberen. We zouden wat meer "outside the box" kunnen krijgen als we een verticale doknavigatie zouden uitvoeren.
Dit dock is afhankelijk van de plug-in jqDock jQuery. Het is ongeveer 10 kb groot, dus het is een paar kb groter dan de vorige versie, maar dat is niet veel. Het nadeel van deze plug-in is dat hij niet zo soepel is als het Fisheye plug-in dock, hoewel hij nog steeds erg vloeiend en zeker bruikbaar is. Deze plug-in heeft ook geen problemen met vaste positionering. Demo bekijken.
We plaatsen onze afbeeldingen in een ongeordende lijst en verpakken ze in koppelingen. Net als bij de laatste plug-in, verpakken we alles binnen een bevattende div. Wanneer we de plug-in initialiseren, gebruiken we de "ul" hier.
U zult merken dat we op dit dok geen titels hebben die zijn omwikkeld met span-tags. In plaats daarvan zal deze plug-in kijken naar de "title" -tagenset voor elke afbeelding en de titels op die manier creëren (indien ingeschakeld in de plug-inopties). Dit maakt de markup een beetje eenvoudiger, maar het maakt de titels ook iets minder aanpasbaar.
We plaatsen het dock aan de linkerkant (kan aan elke kant zijn) met behulp van vaste positionering. We geven het een beetje ruimte tussen zichzelf en de bovenkant van het browservenster voor esthetiek en dus verdwijnen de pictogrammen niet wanneer vergroot.
#dockContainer positie: vast; top: 60px; links: 6px; #jqDock positie: relatief; onderaan: 48px; .jqDockLabel background: # 333; kleur: #fff; opvulling: 3px 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px;
Om de titels te stylen, kunnen we de klasse ".jqDockLabel" gebruiken. We zullen ook geen extra stijlen toevoegen om nog steeds bruikbaar te zijn met JavaScript uitgeschakeld. Het is misschien niet heel mooi, maar het is functioneel.
We brengen de jQuery-bibliotheek binnen, net als het vorige dok en de plug-in.
We initialiseren het dock en stellen enkele opties in om het aan te passen. U kunt de documentatie over deze instellingen lezen door de site te bezoeken die wordt vermeld onder bronnen aan het begin van de zelfstudie voor jqDock. Wat ik hier echter wil benadrukken is de duuroptie. Dit is de tijd voor vergrotingsanimatie in milliseconden. Het is leuk om de duur van de snelheid te kunnen veranderen, maar het lijkt een beetje stotterig te worden, iets waar ik een hekel aan heb.
$ (function () var jqDockOpts = align: 'left', duur: 200, labels: 'tc', grootte: 48, afstand: 85; $ ('# jqDock'). jqDock (jqDockOpts);) ; U kunt eenvoudig de positionering van het dock en de labels wijzigen, evenals de initiële grootte van de pictogrammen en een paar andere opties. Wat ik niet leuk vond aan deze plug-in, is dat deze vergroot wordt tot het volledige pictogram. De vorige plug-in geeft je de mogelijkheid om de grootte waarnaar het vergroot te veranderen. Dat is alles wat er is!
Dit is waarschijnlijk mijn favoriete navigatiestijl van de drie die in deze zelfstudie worden getoond. Het is superlicht (~ 1 kb) en is een echt creatieve "outside the box" navigatiemethode voor een website. Het kan een beetje vreemd zijn als de navigatie rechtsonder of links van het browservenster staat, maar het zou zeker creatief zijn en veel ruimte besparen. Demo bekijken.
Terwijl ik dit schreef, realiseerde ik me dat er waarschijnlijk veel mensen zijn die hun navigatie onderaan de pagina niet leuk zullen vinden, dus nam ik een paar extra minuten en voegde ik een vervolgkeuzestapel toe aan de voorbeeldbestanden. Op deze manier springt de navigatie van boven naar beneden, zodat deze nu bovenaan de pagina's kan worden gebruikt.
Demo bekijken.
De HTML is net zo eenvoudig als de twee dock-voorbeelden. We plaatsen alles in een bevattende div en plaatsen al onze afbeeldingen en titels, die in links zijn ingepakt, in een ongeordende lijst.
- Opening
- alle Voorbeelden
- voorbeeld 3
- voorbeeld 2
- Voorbeeld 1
Merk op dat ik een afbeelding heb geplaatst voor de ongeordende lijst. Dit is het mandje waar de rest van de pictogrammen achter worden gestapeld.
We plaatsen de hoofdcontainer en zorgen ervoor dat de basket-afbeelding een hogere Z-index heeft dan de ongeordende lijst, zodat alles erachter schuift. Merk ook op dat ik de basket image 35px van padding heb gegeven. Hiermee wordt voorkomen dat op de pictogrammen achter de mand wordt geklikt omdat de afbeelding in het mandje korter is dan de pictogrammen. Als u het mandje verandert in iets groters dan moet u ook de opvulling wijzigen.
.stapel positie: vast; onderaan: 28px; rechts: 40px; .stack> img position: relative; cursor: pointer; padding-top: 35px; z-index: 2; .stack ul lijststijl: geen; positie: absoluut; top: 5px; cursor: pointer; 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; display: block; hoogte: 14 px; positie: absoluut; top: 17px; rechts: 60px; regelhoogte: 14 px; rand: 0; background-color: # 000; opvulling: 3px 10px; grensradius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; kleur: #fcfcfc; text-align: center; text-shadow: # 000 1px 1px 1px; dekking: .85; filter: alpha (opacity = 85); / * IE Fixes * / .stack _position: absoluut; .stack ul _z-index: -1; _top: -15px; .stack ul li * right: 5px;
De titels die zijn ingepakt in span-tags worden ingesteld om weer te geven: geen, zodat ze worden verborgen wanneer de pagina wordt geladen.
We plaatsen het JavaScript in een eigen bestand omdat het meer dan een paar regels is. Wanneer op de afbeelding buiten de ongeordende lijst (het mandje) wordt geklikt, gebruikt deze de toggle-functie van jQuery om de lijstitems te animeren en hun positie in te stellen op basis van het horizontale startpunt + .75px, vermenigvuldigd met 2. Dit geeft ons de mooie gebogen lente actie van de lijstitems.
Je zou de .75px of de multiplier (2) kunnen veranderen om aan te passen hoeveel het kromt.
$ (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', left: horizontal + 'px' , openspeed); vertical = vertical + 55; horizontal = (horizontal + .75) * 2;); $ el.next (). anim (top: '-50px', links: '10px', openspeed). addClass ('openStack') .find ('li a> img'). anim (width: '50px', marginLeft: '9px', openspeed); $ el.animate (paddingTop: '0'); , function () // omgekeerd boven var $ el = $ (this); $ el.next (). removeClass ('openStack'). children ('li'). anim (top: '55px', links) : '-10px', closespeed); $ el.next (). Find ('li a> img'). Anim (width: '79px', marginLeft: '0', closespeed); $ el.animate (paddingTop: '35');); // Stackt extra animatie $ ('. 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'); ); ); Wanneer de gebruiker opnieuw op de basketafbeelding klikt, wordt de volgende functie uitgevoerd, die de bewerking die we net hebben uitgevoerd, omkeert. Vervolgens heb ik wat extra animaties toegevoegd aan de lijstitems en hun titels om ze wat meer feedback van gebruikers te geven, wat natuurlijk gemakkelijk kan worden verwijderd.
En daar heb je het! Een eenvoudige en flexibele OS X-stijl stapelnavigatie voor uw website. :-D Dit script is ook in de maak om te worden omgezet in een gemakkelijker te gebruiken plug-in, dus houd daar rekening mee.
Hopelijk geven deze voorbeelden u enkele ideeën om creatief te zijn en uit de mal te raken bij het ontwerpen van uw volgende website of sjabloon. Zoals u kunt zien, is jQuery een krachtige bibliotheek die het gemakkelijk maakt om onze ideeën te realiseren. Met een mogelijke aankomende competitie op basis van 'outside the box'-ontwerpen, kun je aan de slag gaan met enkele ideeën om aan ThemeForest te onderwerpen. Als je nog geen bestanden hebt ingediend, is het heel eenvoudig en kan het zeker de moeite waard zijn! :-)
Ik wil Rey (van het jQuery-team) en Steve bedanken voor het zo snel beantwoorden van mijn oproep voor hulp op Twitter. Dit is een goed voorbeeld van hoe nuttig Twitter kan zijn voor ontwerpers en ontwikkelaars. Als je Theme Forest of Nettuts nog niet volgt op Twitter, is dit het juiste moment om dat te doen. Het zijn beide websites met een hoop fantastische informatie. Je kunt me ook volgen op Twitter als je dat wilt.
