AccueilActualitésWebdesignWeb trend: Slide menus – inspiration and tutorials Webdesign Web trend: Slide menus – inspiration and tutorials Publié le 04/04/2014 Partager cet article : Partager sur Facebook Partager sur Twitter Partager sur Linkedin Share on pinterest 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 By Vincent Laisser un commentaire Annuler la réponseVotre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *Comment Nom * E-mail* Site web Enregistrer mon nom, mon e-mail et mon site dans le navigateur pour mon prochain commentaire.