Övning 16: Menyn

Öppna mappen po16 i Visual Studio Code (eller den editor du föredrar). Denna webbplats skall animera en enkel meny.

  1. Menyn skall glida fram när man trycker på hamburgaren uppe till vänster. En hastighet på 300 ms är lagom. Om man klickar igen skall den försvinna.
  2. När man för muspekaren över respektive menyval skall ett indrag på 5px animeras.
  3. När man klickar på menyvalet "Logga in" skall inloggningsformuläret glida fram.
  4. Om man klickar på "Logga in"-knappen (ingen korrekt inloggning/validering krävs) så skall ikonen bytas ut till ett öppet hänglås (fa-lock-open). Ikonerna kommer från Font Awesome och är redan inlänkat.

(Tips: jQuery-funktionerna addClass() och removeClass() kan vara till stor hjälp. Även JavaScript-funktionen setTimeout)

Praktisk övning 16