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

Today we want to create a portfolio image navigation template with jQuery. The idea is to show some portfolio items in a grouped fashion and navigate through them in all 2D ways (horizontal/vertical). Either the arrows or the little boxes below the current image can be used in order to navigate.

The beautiful photography is by Angelo González. Check out his Flickr photostream or follow him on Twitter @ag2r.

Demo : http://tympanus.net/Tutorials/PortfolioImageNavigation/

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