12
Mar

Meny med dropdown i CSS och javascript

Veckans meny har inte återkommit varje vecka av den enkla anledningen att jag insåg att det skulle vara för ofta. Därför kommer det nu att dröja något längre mellan menyerna, men de kommer att vara ett återkommande tema. I den här artikeln ska vi avancera ytterligare ett steg och skapa en meny med dropdown. Vi använder HTML för innehållet, CSS för utseende och javascript för funktion.

Kom ihåg att i dessa exempel lägger jag all kod i samma fil, HTML, CSS och javascript, för att man enkelt ska få en översikt. I vanliga fall bör dessa delar naturligtvis separeras i egna filer.

Tidigare artiklar i ämnet finner du här:
Veckans CSS-meny 1 - en simpel statisk meny i CSS.
Veckans CSS-meny 2 - en något mer avancerad variant som ändrar bakgrund när man för musen över något av menyvalen.
Veckans CSS-meny 3 - en expanderande meny gjord enbart i HTML och CSS.

Innan vi ger oss in i koden vill jag påpeka att man bör först göra en version som fungerar för de som kör utan javascript. Om du stänger av javascript och kikar på den färdiga exempelsidan kommer du endast att se de två horisontella, översta valen. Tanken är att dessa två länkar ska leda till undersidor som sedan har statiska menyer med undermenyvalen. När detta fungerar är det dags att lägga på javascriptet så att de som surfar med javascript påslaget kan komma åt dessa "genvägar".

Vi börjar med en tämligen enkel HTML som är en osorterad lista där varje list-element innehåller ett ord och ytterligare en lista:

<ul id="nav">

   <li>

      <a href="recept.html">Recept</a>

      <ul class="subMenu">

         <li><a href="planka.html">Plankstek</a></li>

         <li><a href="Pannkaka.html">Pannkaka</a></li>

         <li><a href="Spaghetti.html">Spaghetti Bolognese</a></li>

         <li><a href="Tournedous.html">Tournedous</a></li>

      </ul>

   </li>

   <li>

      <a href="ingredienser.html">Ingredienser</a>

      <ul class="subMenu">

         <li><a href="pasta.html">Pasta</a></li>

         <li><a href="Ris.html">Ris</a></li>

         <li><a href="Potatis.html">Potatis</a></li>

         <li><a href="Ost.html">Ost</a></li>

      </ul>

   </li>

</ul>

I det färdiga exemplet innehåller varje länk ett rel-attribut med värdet "nofollow" för att förhindra sökmotorer att följa länkarna (eftersom det inte finns något bakom dem), dessa ska du såklart ta bort om du tänker använda koden själv.

CSS:en är inte särskilt märkvärdig den heller. Två saker värda att nämna är att undermenyerna positioneras absolut för att kunna hamna ovanpå eventuellt innehåll som ligger under menyn, och att undermenyerna göms med display:none eftersom de inte ska synas om en besökare har javascript avslaget. Vem vill ha konstant nerfällda undermenyer?

Det är när vi kommer ner till javascriptet som det intressanta börjar. I början skapas funktionen "initMenu" som initierar hela menyn. Det första funktionen gör är att testa så att besökarens webbläsare klarar av de DOM-funktioner som vi använder oss av i scriptet och så att en ul-meny med id "nav" finns i koden. Om den inte gör det returneras "false" från funktionen och scriptet gör ingenting:

function initMenu() {

   if(!document.getElementById) return false;

   if(!document.getElementsByTagName) return false;

   if(!document.getElementById("nav")) return false;

Nästa steg är att hitta och göra en lista med alla länkar i menyn. Detta gör vi först genom att skapa en variabel som pekar på menyn, sedan söker vi upp alla länkar och stoppar dom i en array (lista).

var nav = document.getElementById("nav");

var menuLinks = nav.getElementsByTagName("a");

Efter detta kommer vi till själva huvudloopen i funktionen. Det är en enkel for-loop som går igenom varje menylänk.

for(j=0;j<menuLinks.length;j++)

Denna for-loop kollar sedan varje länk så att den ul som länken ligger i inte är av klassen "submenu".

 if(menuLinks[j].parentNode.parentNode.className != 'subMenu')

Om så är fallet börjar den med att avbryta eventuella klick på länken.

menuLinks[j].onclick = function() {

   return false;

}

Detta görs eftersom de länkarna är "rubrikerna" i huvudmenyn. Dessa länkar måste dock finnas i koden för de som kör utan javascript.

De två nästa delarna är de som gör att undermenyn fälls ner när man för musen över ett val i huvudmenyn, och att undermenyn försvinner när man för musen bort från menyvalet i huvudmenyn. Kom ihåg att undermenyerna ligger i varje list-element i huvudmenyn och därför kan man föra muspekaren ner i undermenyn utan att webbläsaren tror att muspekaren är utanför menyvalet i huvudmenyn.

menuLinks[j].parentNode.onmouseover = function() {

   this.getElementsByTagName("ul")[0].style.display = 'block';

}

menuLinks[j].parentNode.onmouseout = function() {

   this.getElementsByTagName("ul")[0].style.display = 'none';

}

Genom att sätta undermenyns CSS-värde display till "block" respektive "none" kommer undermenyn att visas och tas bort.

Slutligen körs funktionen initMenu när sidan har laddats genom detta lilla kommando:

window.onload=initMenu;

Och det är allt! Den färdiga sidan med dropdown-menyn finner du här.

TYCKTE DU OM ARTIKELN?

KOMMENTARER

#1. Skriven av Andreas den 16 Apr 2008: Tjenare.
Det är en väldigt snygg meny du har gjort. Vet du vilka browsers den funkar i? Går det att gör den så att bara en av dom två huvudlänkarna har drop down funktion och den andra har en vanlig länk funktion.
#2. Skriven av Stefan den 20 Apr 2008: Hej och tack. Den ska fungera i FF, IE, Safari och Opera, men jag upptäckte just att den hade problem i Safari så jag ska kika på det. Angående att ha menyval som inte har dropdown funktion så får jag kika på det i en annan artikel som det finns planer på.
#3. Skriven av Peter den 23 Mar 2011: Hej. Snygg meny. Går det att göra den centrerad på sidan? och går det att få den under en bild, tex.?

Meny med dropdown i CSS och javascript

TYCKTE DU OM ARTIKELN?

KOMMENTARER

SÖK BLAND ARTIKLAR

KATEGORIER

OM KLIENTSIDAN