Today we want to show you how to create a slick menu with a nice animation feature on hover. The idea is to make some elements slide out, change and animate the background color of the item and then slide the elements back in with a different color.

The inspiration for this menu comes from the website of the Pelican Miami Beach Hotel:http://www.pelicanhotel.com/

The icons are taken from the incredible Noun Project that “collects, organizes and adds to the highly recognizable symbols that form the world’s visual language, so we may share them in a fun and meaningful way”. Visit the website of The Noun Project.

So, let’s get started!

Demo : http://tympanus.net/Tutorials/AnimatedTextIconMenu/example1.html

Download : http://tympanus.net/Tutorials/AnimatedTextIconMenu/AnimatedTextIconMenu.zip