• Webdesign

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

Publié le
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.

Animation icon

Notre sélection 

Grid – Snapshots 2013 – Snapshots of Provence 2013

Playstation GT6

playstation gt6 first love

Discover Wacom | Interactive Pen Displays

wacom

Hugeinc

World in my lens

worldinmylens

Centralcervejas

centralcervejas

Adidas originals

adidas originals

Pollenlondon

pollenlondon

Mr. President

Squarespace blog

squarespace

Olympic Story

Jean-Christophe Suzanne

jcsuzanne

Wanda print

wanda print

Petersham Nurseries

petershamnurseries

Pete Nottage

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

Animated Border Menus

Slide And Push Menus With CSS3 Transitions

Perspective Page View Navigation

PerspectivePageViewNavigation

Create a full page animated menu like on Squareup.com

square-like-3d-animated-menu-gallery

 

By Vincent

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *