There is never enough animation menu. In this tutorial, you can view vertical and horizontal menu animations.
We make a simple menu, you can use <div> and <a> tags as I used or <ul> <li> and <a> tags, as you like.

<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>

The active-menu class is used as a visible indicator of active menu, and with the active class we indicate active menu.
Difference between vertical and horizontal menu is in css and js scripts. In the vertical menu, the elements are put together next to each other, while in the horizontal we put one below the other. As for the js script, the difference is that in the vertical menu the active-menu element adjusts to the size of the menu where is curently located and moves from left to right or from right to left, and in the horizontal menu element active-menu is fixed size and moves from top to bottom or from bottom to top.
Below you can see both examples.

Vertical menu