Se her For del 1 av denne guiden

Del 2, mus over effekt
Denne funksjonen fungerer på samme måte som toggle, bare at den reagerer på “mus over” isteden for “klikk”.
Bruk samme kode som i del 1, men endre toggle med hover.

Så hva kan vi bruke denne funksjonen til? Mulighetene står egentlig i kø, men jeg skal vise hvordan denne effekten kan brukes til å lage en “drop down” meny.

La oss ta html delen først.

<ul class="hovedmeny">
  <li><a href="#">Menypunkt 1</a></li>
  <li><a href="#">Menypunkt 2</a>
    <ul class="undermeny">
      <li><a href="#">Hei på deg</a></li>
      <li><a href="#">Klikk i vei</a></li>
    </ul>
  </li>
</ul>

Med denne listen skal vi gjøre følgende:
a) Skjule underelementer med klassen “undermeny”
b) Vise underelementer når vi beveger musen over hovedelementene

Hørtes dette vanskelig ut..? Det er faktisk utrolig lett!

$(document).ready(function() {
  $(".undermeny").hide();
  $(".hovedmeny li").hover(
    function() { $("ul",this).show(); },
    function() { $("ul",this).hide(); }
  );
});

Legg merke til at vi bruker funksjonene “show” og “hide”. Disse er ganske logiske (De viser og skjuler noe) men kan også brukes til å vise mer flytende effekter. Prøv å endre $(“ul”,this).hide(); med $(“ul”,this).hide(“slow”);