Tendance web : Les menus animés en slide inspiration et tutoriels

Pour finir cette semaine, nous vous proposons un petit tour autour d'une tendance web qui se propage petit à petit sur les sites internet avec les menus animés en slide.

Des menus dynamiques et fluides

Vous les avez déjà croisés sur certains sites, ce sont les menus masqués et accessibles simplement à l'aide d'une icône qui devient un standard visuel avec ses 3 barres à l'horizontale.

Au départ cette icône était utilisée pour les versions mobiles afin de masquer le menu qui prenait une place trop importante pour les écrans de nos smartphones. Mais certains designers ont réutilisé ce système pour masquer le menu sur les versions de bureau.

Cette idée innovante permet de simplifier la structure des sites afin de garder l'essentiel et de donner à l'utilisateur la possibilité d'accéder quand il le souhaite à la navigation. De plus, elle permet d'amener des navigations plus complexes avec différents volets ou un nombre de liens plus important par rapport à une navigation standard.

Les effets visuels que l'on retrouve donnent une apparition du menu en volet, principalement sur l'un des côtés de l'écran ou quelques fois sur l'ensemble du site, similaire à une lightbox.

Ce type de menu remplace petit à petit les navigations horizontales qui étaient en position "fixed" durant le scroll.
On trouve différents noms pour définir ce type de menu avec "Slide Menu", "Push Menu", "Border Menu" ou encore "Off-Canvas" pour Foundation. 

Inspiration et ressources

Nous avons sélectionné pour vous une série de 15 exemples non exhaustifs de web design intégrant ce type de menu. Ils vous permettront de trouver l'inspiration et de découvrir des effets variés et animés selon vos besoins.

Vous trouverez également une petite série de tutoriels afin de vous aider à réaliser ce type de menu, pour vos différentes réalisations web. Notamment une petite animation pour l'icon réalisé par notre développeur Benjamin Sanchez que vous pourrez trouver à cette adresse http://codepen.io/anon/pen/DBjJr?editors=010.

Notre sélection 

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