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

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. 

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.

Notre sélection :

https://www.myprovence.fr/
 

https://worldinmylens.com/

https://www.centralcervejas.pt/visitavirtual/index.html#/tour/0

https://pollenlondon.com/

https://newsroom.squarespace.com/

https://petershamnurseries.com/

https://www.petenottage.co.uk/

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

Perspective Page View Navigation

Create a full page animated menu like on Squareup.com