Web trend: Slide menus – inspiration and tutorials
Vous souhaitez mettre votre solution en avant en haut de cet article ? Contactez-nous
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