Hoe een Lava-Lamp Style navigatiemenu te bouwen

Een paar weken geleden maakte ik een screencast die demonstreerde hoe een navigatienetwerk met drie niveaus moest worden gebouwd. In een reactie-e-mail vroeg een van onze lezers om een ​​tutorial over het bouwen van een lavalamp-stijlicoom. Gelukkig is het een vrij eenvoudige taak, vooral als je een JavaScript-bibliotheek gebruikt. We zullen er vandaag een vanaf nul opbouwen.

Liever een Screencast?

Stap 1 Maak de mark-up

Voordat we deze handige functionaliteit kunnen maken, hebben we een basis nodig om vanaf te werken. Maak in je favoriete coderedacteur een ongeordende lijst voor je navigatie en importeer zowel jQuery als jQuery UI, via Google.

         
 
 
Huis
 
Wat betreft
 
blog
 
Meer over mijn portfolio
 
Contact
 
 
    

Merk op hoe we een ID van "geselecteerd" hebben gegeven aan de startpagina. Dit is vrij standaard in de meeste websites; het staat gebruik toe om de huidige pagina te targeten, en stijl dat bepaalde lijstitem dienovereenkomstig.

Vervolgens moeten we beslissen hoe we de lavalamp-functionaliteit het best kunnen implementeren. Om hergebruik mogelijk te maken, verpakken we dit kleine script in een plug-in en noemen we het als:

 $ ( '# Nav') spasticNav (.);

Omdat we besloten hebben om een ​​plug-in te bouwen, gaan we door met het maken van een nieuw bestand voor dat script en verwijzen we dit naar onze mark-up. We noemen het jquery.spasticNav.js.

Stap 2 De plug-in starten

Om het aantal globale variabelen dat we moeten maken te verminderen en om alle mogelijkheden van het $ -symbool, dat botst met andere JavaScript-bibliotheken, te verwijderen, voegen we onze plug-in toe aan een zelfuitvoerende anonieme functie.

 (functie ($) ) (jQuery);

Nu zal jQuery worden doorgegeven aan onze plug-in en worden weergegeven via het $ -symbool.

Vervolgens is het over het algemeen een goede gewoonte om de gebruikers van de plug-in zoveel mogelijk flexibiliteit te bieden. Als zodanig geven we ze de mogelijkheid om een ​​object-letterlijk door te geven wanneer ze de plug-in bellen om een ​​handvol instellingen op te heffen. Zoals ik het zie, moeten ze in staat zijn om:

• Stel de hoeveelheid overlapping in voor onze kleine klodder. Dit verwijst naar hoeveel de blob de hoogte van het navigatiemenu zal overschrijden.
• Stel de snelheid in
• Stel een reset in, waardoor de blob terugkeert naar het huidige pagina-item (ervan uitgaande dat de gebruiker nooit op een link klikt)
• Stel de kleur van de blob in. Dit kan worden bereikt met CSS, maar het is toch een prettig gemak.
• Stel de versnellingsoptie in.

Nu noemen we onze plug-in en maken deze gelijk aan een functie. $ .fn is gewoon een alias voor jquery.prototype.

 $ .fn.spasticNav = functie (opties) ;

Omdat we weten dat we deze overschrijvingen toestaan, moeten we ervoor zorgen dat we een parameter 'options' accepteren.

Stap 3 Configuratie-opties

Nu we onze plug-in hebben genoemd, is de volgende stap het maken van de configuratie-opties.

 options = $ .extend (overlap: 20, speed: 500, reset: 1500, color: '# 0b2b61', easing: 'easeOutExpo', opties);

Hierboven nemen we de variabelen van opties, stellen we enkele standaardeigenschappen en -waarden in en breiden we deze uit met wat (zo niet) de gebruiker doorgeeft wanneer hij de plug-in belt. Op die manier overschrijven de opties die ze doorgeven onze standaardinstellingen. Als ik bijvoorbeeld deze plug-in doorloop, geef ik het volgende door:

 $ ('# nav'). spasticNav (speed: 2000, easing: 'easeOutElastic');

Die twee eigenschappen zullen de standaardinstellingen overschrijven, terwijl de rest van de opties hetzelfde blijven.

Stap 4 Implementatie van de functionaliteit

Nu zijn we klaar om elk element te doorlopen dat aan deze plug-in is doorgegeven en om de lavalamp-functionaliteit te implementeren. Vergeet niet dat we niet kunnen aannemen dat de gebruiker een enkel element aan deze plug-in zal doorgeven. Ze zouden, als ze zouden willen, kunnen verwijzen naar een klasse, die verwijst naar meerdere items die deze functionaliteit zouden moeten ontvangen. Daarom noemen we this.each om elk item in de ingepakte set te herhalen.

 return this.each (function () );

Binnen deze functie maken we enkele variabelen. Niet alle zullen onmiddellijk waarden hebben, maar omdat de JavaScript-engine sowieso alle variabelenamen naar de top van de functie zal tillen (achter de schermen), is het over het algemeen een beste methode om ze bovenaan te declareren en ze later te initialiseren..

 var nav = $ (this), currentPageItem = $ ('# selected', nav), blob, reset;

• nav: "Caches" deze, ingepakt in het jQuery-object.
• currentPageItem: Bevat het lijstitem met een ID van geselecteerd. We geven een tweede parameter door om de context in te stellen waarnaar moet worden gezocht. Op die manier hoeven we niet de hele dom door te lopen om dit element te vinden.
• blob: Bij gebrek aan een beter woord, zal deze variabele verwijzen naar de markeerstift, die onze muis zal volgen als we over het menu zweven.
• reset: Hiermee wordt een verwijzing opgeslagen naar de functie setTimeout die later wordt gemaakt. Het is nodig om clearTimeout te bellen. Meer hierover binnenkort ...

Nu we onze variabelen hebben verklaard / geïnitialiseerd, laten we de werkelijke blob maken, om zo te zeggen.

 $ ('') .css (width: currentPageItem.outerWidth (), height: currentPageItem.outerHeight () + options.overlap, links: currentPageItem.position (). left, top: currentPageItem.position (). top - options.overlap / 2, backgroundColor: options.color). AppendTo (this);

De reden waarom we de CSS-methode aanroepen, in plaats van gewoon een klasse toe te voegen, is omdat deze waarden variëren afhankelijk van het lijstitem van de huidige pagina. Daarom moeten we JavaScript gebruiken om die waarden op te halen.

• breedte: Verkrijg de breedte van currentPageItem, inclusief eventuele randen en opvulling.
• hoogte: Verkrijg de hoogte van currentPageItem, inclusief eventuele randen en opvulling. Voeg ook de hoeveelheid overlap toe om de blob buiten het menu te laten verschijnen.
• links: Stelt de linker eigenschap in van de blob gelijk aan de linkerpositie van de currentPageItem. (We moeten een positioneringscontext in onze CSS instellen om deze waarde van kracht te laten worden.)
• top: Stelt ook de bovenste waarde in en centreert de blob verticaal.
• Achtergrond kleur: Stelt de achtergrondkleur in.

Ten slotte voegen we dit nieuwe lijstitem toe aan deze, of #nav.

Vervolgens moeten we een verwijzing naar #blob opslaan. Op die manier hoeven we niet elke keer dat we er toegang toe willen hebben de DOM te doorzoeken. We hebben de bobbel variabele bovenaan de functie. Laten we het nu initialiseren.

 blob = $ ('# blob', nav);

Stap 5 Het Hover-evenement

We moeten nu "luisteren" wanneer de gebruiker boven een van de lijstitems zweeft (met uitzondering van de blob natuurlijk) in ons navigatiemenu. Wanneer dit het geval is, stellen we de eigenschappen width en left van de blob gelijk aan die van het huidige zwevende lijstitem.

 $ ('li: not (#blob)', nav) .hover (function () // mouse over clearTimeout (reset); blob.animate (left: $ (this) .position (). left, width: $ (this) .width (), duration: options.speed, easing: options.easing, queue: false);, function () // mouse out reset = setTimeout (function () blob.animate (width: currentPageItem.outerWidth (), left: currentPageItem.position (). left, options.speed), options.reset););

Om het bovenstaande script samen te vatten ...

• Haal alle lijstitems - niet het #blob - binnen het navigatiemenu en voer een functie uit als ze worden verplaatst.
• Animeer de blob en stel de linker- en breedtewaarden in die gelijk zijn aan die van het zwevende lijstitem.
• Geef een object letterlijk door als de tweede parameter van animeren en stel de duur en versmogelijkheid in die gelijk zijn aan wat we in onze configuratieopties hebben ingesteld. Wachtrij op false instellen om animatie te voorkomen.
• Wanneer ze uit mikken, roept u setTimeOut aan, waardoor de blob weer naar het huidige pagina-item wordt geduwd. Als we dit niet hebben gedaan en de gebruiker niet op een navigatielink heeft geklikt, zou het menu laten zien dat ze aan stonden
  een andere pagina volledig. Dit zal na een seconde of zo de blob opnieuw animeren naar currentPageItem.

En dat is alles wat er is! Dit is een supereenvoudige plug-in. De volgende stap is het stylen van ons navigatiemenu.

Stap 6 Het menu stylen

Zonder enige styling, zou ons menu er ongeveer zo uit moeten zien:

Laten we eerst de "nav" ul. Open uw style.css bestand en voeg toe:

 #nav positie: relatief; achtergrond: # 292929; zweven: links; 

Vervolgens stylen we elk lijstitem.

 #nav li float: left; lijststijl: geen; border-right: 1px solid # 4a4a4a; border-links: 1px effen zwart; 

Hierdoor zweeft eenvoudig elk lijstitem naar links en wordt een rand aan elke kant toegevoegd.

Als we verder gaan, moeten we de ankertags stijlen in ons navigatiemenu.

 #nav li a color: # e3e3e3; positie: relatief; z-index: 2; zweven: links; lettertypegrootte: 30px; font-family: helvetica, arial, sans-serif; tekstdecoratie: geen; opvulling: 30px 45px; 

We stellen een kleur in, duwen ze naar links, stellen een aantal lettertype-waarden in en een gezonde hoeveelheid opvulling. Let op de eigenschap z-index. Dit is een noodzaak en zal binnenkort worden uitgelegd. Bedenk echter dat we, om de z-index aan te passen, een positioneringscontext moeten instellen, wat we hebben gedaan.

Omdat we geen volledige reset-stylesheet implementeren, zorgen we ervoor dat we de standaardmarges en opvulling op onze ul en li op nul zetten, alleen maar om potentiële hoofdpijn te voorkomen.

 ul, li margin: 0; opvulling: 0; 

De laatste stap is om de blob zelf te stylen!

 #blob border-right: 1px solid # 0059ec; border-left: 1px solid # 0059ec; positie: absoluut; boven: 0; z-index: 1; achtergrond: # 0b2b61; achtergrond: -moz-lineaire gradiënt (boven, # 0b2b61, # 1153c0); achtergrond: -webkit-gradiënt (lineair, linkerbovenkant, linksonder, van (# 0b2b61), tot (# 1153c0)); -moz-border-radius: 4px; -webkit-border-radius: 4px; -moz-doos-schaduw: 2px 3px 10px # 011331; -webkit-doos-schaduw: 2px 3px 10px # 011331; 

Nogmaals, we stellen een aantal mooie kleuren in voor onze grenzen en voegen wat achtergrondkleuren toe (inclusief CSS3-verlopen / randen / schaduwen voor Firefox en Safari / Chrome). Nogmaals, we zien dat z-index eigendom. Zonder dit zal de klodder boven alle tekst in het navigatiemenu worden weergegeven. Om dit tegen te gaan, moeten we er zeker van zijn dat zijn z-index eigenschap LAGER is dan het lijstitem! We moeten ook de positie instellen op absoluut om de boven- en linkerwaarden aan te passen met onze plug-in.

Conclusie

Dat is alles wat er is! Met minimale inspanning hebben we een heel netjes uitziend navigatiemenu gecreëerd. Laat het me weten als je nog vragen hebt! Bedankt voor het lezen en kijken.