Nikad dosta menu animacija. U ovom tutorialu možete pogledati vertikalnu i horizontalnu menu animaciju.
Napravimo jedan obični menu, možete koristiti <div> i <a> tagove kako sam ja koristio ili <ul> <li> i <a> tagove, vama po želji.

<div class="menu">
  <a class="active" href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Projects</a>
  <a href="#">Contacts</a>
  <a href="#">Long menu name</a>
  <div class="active-menu"></div>
</div>

active-menu klasu koristimo kao vidljivi indikator aktivnog menu-a, a klasom active označavamo aktivni menu.
Razlika između vertikalnog i horizontalnog menu-a je u css i js scripti. U vertikalnom menu-u elemente stavljamo jednog do drugog, dok u horizontalnom stavljamo jedan ispod drugog. A što se tiče js skripte razlika je u tome što se u vertikalnom menu-u element active-menu prilagođava veličini menu-a na kojem se nalazi i pomjera se s lijeva na desno ili s desna na lijevo, a u horizontalnom menu-u element active-menu je fiksne veličine i pomjera se odozgor prema dolje ili obrnuto.
Ispod možete vidjeti oba primjera.

Vertikalni menu