Share
För några veckor sedan skapade jag en skärmdump som visade hur man byggde en navigeringsmeny på tre nivåer. I ett svarmeddelande begärde en av våra läsare en handledning om hur man byggde en lava-lampa-stilmeny. Lyckligtvis är det en ganska enkel uppgift, särskilt när du använder ett JavaScript-bibliotek. Vi ska bygga en från början idag.
Innan vi kan skapa denna snygga funktionalitet behöver vi en bas för att fungera från. I din favorit kodredigerare skapar du en oorderad lista för din navigering och importerar både jQuery och jQuery UI, via Google.
SpasticNav Plugin
- Hem
- Handla om
- blogg
- Mer om min portfölj
- Kontakta
Notera hur vi gav ett id med "valda" till hemsidan. Detta är ganska standard på de flesta webbplatser; Det tillåter användning för att rikta in den aktuella sidan och stämma in den specifika listan i enlighet med detta.
Därefter måste vi bestämma hur vi bäst ska genomföra lava-lampans funktionalitet. För att möjliggöra återanvändning paketerar vi det här lilla skriptet i ett plugin och kallar det som:
$ (# Nav) spasticNav ().
Eftersom vi har bestämt oss för att bygga ett plugin, låt oss gå vidare och skapa en ny fil för det scriptet och hänvisa det till i vår mark-up. Vi kallar det jquery.spasticNav.js.
För att minska antalet globala variabler som vi måste skapa, samt ta bort eventuella möjligheter för $-symbolen som kolliderar med andra JavaScript-biblioteken, låt oss pakka in vårt plugin i en självkörande anonym funktion.
(funktion ($) ) (jQuery);
Nu kommer jQuery att skickas till vårt plugin, och kommer att representeras via $ symbolen.
Därefter är det i allmänhet en bra metod att ge användarna av plugin så mycket flexibilitet som möjligt. Som sådan ger vi dem möjlighet att gå in i en objekt-bokstavlig när de kallar plugin för att åsidosätta en handfull inställningar. Som jag ser det, borde de kunna:
Nu heter vi vårt plugin och gör det lika med en funktion. $ .fn är helt enkelt ett alias för jquery.prototype.
$ .fn.spasticNav = funktion (alternativ) ;
Att veta att vi ska tillåta dessa överstyrningar måste vi se till att vi accepterar en "alternativ" -parameter.
Nu när vi har namngett vårt plugin, är nästa steg att skapa konfigurationsalternativen.
alternativ = $ .extend (överlapp: 20, hastighet: 500, återställ: 1500, färg: '# 0b2b61', lättnad: 'easeOutExpo', alternativ);
Ovan tar vi alternativvariabeln, ställer in vissa standardegenskaper och värden och förlänger det med vad som helst (om något) användaren skickar in när de kallar plugin. På så sätt överväger de alternativ de övergår våra standardinställningar. Om jag till exempel, när jag kallar det här pluginet, passerar jag:
Accentsconagua
$ ('# nav'). spasticNav (hastighet: 2000, lättnad: 'easeOutElastic'); Dessa två egenskaper kommer att åsidosätta standardinställningarna, medan resten av alternativen kommer att förbli densamma.
Nu är vi redo att cykla genom varje element som skickades till det här pluginet och implementera lava-lampans funktionalitet. Kom ihåg att vi inte kan anta att användaren kommer att skicka ett enskilt element till det här pluginet. De kan, om de ville ha, hänvisa till en klass, som refererar till flera objekt som ska få denna funktion. Som sådan kommer vi att ringa this.each för att iterera över varje objekt i den förpackade uppsättningen.
returnera this.each (funktion () );
Inom denna funktion skapar vi några variabler. Inte alla kommer omedelbart att ha värden, men eftersom JavaScript-motorn höjer alla variabla namn till toppen av funktionen ändå (bakom kulisserna) är det i allmänhet en bra metod att deklarera dem överst och sedan initiera dem senare.
var nav = $ (detta), currentPageItem = $ ('# selected', nav), blob, återställ; Nu när vi har deklarerat / initierat våra variabler, låt oss skapa den faktiska bloben, så att säga.
$ ('') .css (width: currentPageItem.outerWidth (), höjd: currentPageItem.outerHeight () + options.overlap, left: currentPageItem.position (). left, top: currentPageItem.position (). top - options.overlap / 2, backgroundColor: options.color). AppendTo (this); Anledningen till att vi ringer CSS-metoden, istället för att helt enkelt lägga till en klass, beror på att dessa värden varierar beroende på aktuell sidans listobjekt. Som sådan måste vi använda JavaScript för att hämta de värdena.
Slutligen lägger vi till det här nya listobjektet till detta, eller #nav.
Därefter måste vi lagra en referens till #blob. På så sätt behöver vi inte söka i DOM varje gång vi vill komma åt det. Vi förklarade klick variabel högst upp i funktionen. Nu, låt oss initiera det.
blob = $ ('# blob', nav); Vi måste nu "lyssna" för när användaren hänger över ett av listobjekten (med undantag för blob förstås) i vår navigationsmeny. När de gör det, ställer vi in blobens bredd och vänstra egenskaper lika med den för det aktuella svävade listobjektet.
$ ('li: not (#blob)', nav) .hover (funktion () // mouse over clearTimeout (återställ); blob.animate (vänster: $ (detta) .position (). vänster, bredd: $ (this) .width (), duration: options.speed, easing: options.easing, kö: false);, funktion () // mouse out reset = setTimeout (funktion () blob.animate (bredd: currentPageItem.outerWidth (), vänster: currentPageItem.position (). left, options.speed), options.reset);); För att sammanfatta skriptet ovan ...
Och det är allt det finns! Det här är en super enkel plugin. Nästa steg är att ställa in vår navigationsmeny.
Utan styling borde vår meny likna detta:
Låt oss först ställa in "nav" ul. Öppna din style.css-fil och lägg till:
#nav position: relative; bakgrund: # 292929; flyta till vänster;
Därefter ska vi ställa in varje listobjekt.
#nav li float: left; listestil: none; gränsen-höger: 1px fast # 4a4a4a; gräns vänster: 1px solid svart;
Detta flyter helt enkelt varje listobjekt till vänster och lägger till en gräns på varje sida.
När vi går vidare måste vi anka taggarna inom vår navigationsmeny.
#nav li a color: # e3e3e3; position: relativ; z-index: 2; flyta till vänster; typsnittstorlek: 30px; font-family: helvetica, arial, sans-serif; text-dekoration: ingen; vaddering: 30px 45px;
Vi ställer in en färg, flyter dem till vänster, ställer in några teckensnittsvärden och en hälsosam mängd vadderingar. Notera z-indexegenskapen. Detta är en nödvändighet, och kommer att förklaras inom kort. Kom dock ihåg att vi måste ställa in en positioneringskontext som vi har gjort för att kunna justera z-indexet.
Eftersom vi inte implementerar ett fullständigt stilark, låt oss se till att vi nollställer alla standardmarginaler och vadderingar på vår ul och li, för att spara några eventuella huvudvärk.
ul, li marginal: 0; vaddering: 0;
Det sista steget är att ställa blob själv!
#blob border-right: 1px solid # 0059ec; gränsen till vänster: 1px solid # 0059ec; position: absolut; topp: 0; z-index: 1; bakgrund: # 0b2b61; bakgrund: -moz-linjär gradient (topp, # 0b2b61, # 1153c0); bakgrund: -webkit-gradient (linjär, vänster topp, vänster botten, från (# 0b2b61) till (# 1153c0)); -moz-gränsen-radien: 4px; -webkit-gräns-radie: 4px; -moz-box-skugga: 2px 3px 10px # 011331; -webkit-box-skugga: 2px 3px 10px # 011331;
Återigen ställer vi några vackra färger för våra gränser och lägger till några bakgrundsfärger (inklusive CSS3-gradienter / gränser / skuggor för Firefox och Safari / Chrome). Återigen ser vi z-indexegenskapen. Utan detta kommer blob att visa framförallt texten i navigationsmenyn. För att motverka detta måste vi vara säkra på att z-indexegenskapen är lägre än listobjektets! Vi måste också ställa läget till absolut för att justera dess övre och vänstra värde med vårt plugin.
Det är allt det finns! Med minimal ansträngning har vi skapat en riktigt snygg navigationsmeny från början. Låt mig veta om du har några frågor! Tack för att du läste och tittade på.
