Dec
Dropdownmeny i CSS med jQuery
Kategorier: (X)HTML CSS JavascriptHär kommer ytterligare en artikel i det outtömliga ämnet menyer. Javascriptramverk har blivit väldigt populära på senare tid och ett av de mest populära heter jQuery. Därför tar denna artikel upp hur man bygger en snygg dropdownmeny i HTML och CSS samt några få rader jQuery.
Här finns en exempelsida med menyn.
Själva HTML och CSS-koden borde inte skapa några större frågetecken, det mesta har tagits upp i de tidigare artiklarna 'Meny med dropdown i CSS och javascript' samt 'Veckans CSS-meny 3'.
Hur ser då javascriptkoden ut? Vi börjar med att skapa en funktion som ska köras när sidan har laddats färdigt. Vi skapar även en variabel som innehåller alla UL-element med CSS-klassen "subMenu".
function initMenu() {
var subMenus = $(".subMenu");
}I jQuery använder man "$()" för att hänvisa till jQuery-scopet, det vill säga jQuerys "omfång". Om du har tänkt att utföra något på en variabel utan jQuery, t.ex. använda en DOM-metod, räcker det med att skriva:
subMenus.nodeName
Men om du vill utföra en jQueryfunktion på variabeln behöver du skriva på detta sättet:
$(subMenus).remove()
Funktionen $(".subMenu") hämtar alla element med CSS-klassen "subMenu" och lägger dem i en variabel.
Nästa kodsnutt lägger till bilder på det sista listelementet i varje subMenu för att få snygga, rundade hörn på dropdownen (egentligen ska allt stå på en rad men det utrymmet finns tyvärr inte på sidan):
$(subMenus).find("li:last-child").append(' <img src="bottomLeftCorner.gif"
class="bottomLeft" alt="" width="10" height="10"
/><img src="bottomRightCorner.gif"
class="bottomRight" alt="" width="10" height="10"
/>');Koden ovan tar först fram alla subMenus, letar sedan med "find" upp alla li som är sista elementet under ul:en för att slutligen, på dessa, lägga in HTML-koden sist i li-elementet (efter a-elementet med andra ord). Punkterna mellan varje funktion är det som kopplar ihop dem.
Den nästa sista kodbiten ser ut så här:
$(subMenus).parent().hover(function() {
$(this).find(".subMenu").show("fast");
},
function() {
$(this).find(".subMenu").hide("fast");
});Det den gör är att binda två funktioner till jQuerys hoverfunktion. Hover tar två argument, det första är vad som ska hända när man för musen över elementet, och det andra vad som ska hända när man för musen bort från elementet. Koden ovan säger helt enkelt att när användaren för musen över parentnoden till varje subMenu (vilket blir li:n i huvudmenyn) ska den aktuella submenyn visas snabbt. Det andra argumentet är ungefär likadant fast säger nu till att gömma den aktuella submenyn.
Genom att byta ut "show" och "hide" till olika visningsfunktioner kan man få animeringen att ändra stil. Prova t.ex. att ändra "show" till "fadeIn".
Sist av allt lägger vi in en rad som säger att när dokumentet (sidan) har laddats klart ska initieringsfunktionen för menyn köras:
jQuery(initMenu);
Här hittar du den färdiga jQuery dropdownmenyn.
TYCKTE DU OM ARTIKELN?
