Web trend: Slide menus – inspiration and tutorials

Let's finish the week with an article based on animated menus, and more precisely on this new trend slowly spreading on websites: Slide menus.

Dynamic and flowing menus

You already saw them on some websites: these are hidden menus only accessible from an icon that is starting to become a visual standard with its 3 horizontal bars.

At the beginning, this icon was used on mobile versions in order to hide the menu that was taking too much space on the smartphone screens. But certain designers used the same principle to hide the menus also on desktop versions.

This innovative idea simplifies the structure of the website to show the most important content only and allows the user to access navigation whenever he or she wants to. It also makes it possible to have a more complex navigation, with multiple sections and panes or more links compared to usual menus.

The visual effects that we can find on websites are menus appearing in a pane, mostly on one side of the screen and sometimes on the whole page, like a lightbox.
This kind of menu seems to be replacing horizontal navigations that used to be fixed when scrolling.

The names for this concept are various: Slide menu, push menu, border menu or even off-canvas for Foundation. 

Inspiration and resources

We have selected a series of 15 examples of web designs that integrate this kind of menu. They can serve your inspiration and/or make you discover various animated effects, according to what you need.

You will also find a series of tutorials to help you make this kind of menu for your different web creations, and especially an animated icon realised by our developer Benjamin Sanchez that you can find here http://codepen.io/anon/pen/DBjJr?editors=010.

 

Grid Snapshots 2013 Snapshots of Provence 2013

Playstation GT6

Discover Wacom | Interactive Pen Displays

Hugeinc

World in my lens

Centralcervejas

Adidas originals

Pollenlondon

Mr. President

Squarespace blog

Olympic Story

Jean-Christophe Suzanne

Wanda print

Petersham Nurseries

Pete Nottage

Quelques tutoriels

Voici quatre petits tutoriels qui pourront vous aider à réaliser ce type d'effet pour vos prochains projets web. Avec différentes possibilités d'animations pour vos menus afin de varier au maximum le rendu selon vos besoins.

Animated Border Menus

Slide And Push Menus With CSS3 Transitions

Perspective Page View Navigation

Create a full page animated menu like on Squareup.com