Catégories
Astuces et Design

17 menus de navigation créés avec uniquement CSS (sans JavaScript)

Nous avons été sur un coup de pied ces derniers temps ici à 1WD, à la recherche de moyens de coder des choses en CSS pur sans utiliser JavaScript, non pas parce que nous n'aimons pas JavaScript, mais quand vous pouvez éviter de l'utiliser et quand même accomplir ce que vous avez décidé de faire , pourquoi pas? Aujourd'hui, nous avons rassemblé 17 exemples de menus de navigation codés de cette façon. Jetez un coup d'œil et voyez s'il y en a que vous pouvez utiliser dans vos futurs projets.

Boîte à outils Web Designer: téléchargements illimités à partir de 16,50 $ / mois

Kits de sites Web

Kits de sites Web

Plus de 16 000 conceptions Web

Kits UX et UI

Kits UX et UI

Plus de 14 000 kits UX et UI

Ressources graphiques

Ressources graphiques

33 000+ graphiques

TÉLÉCHARGER MAINTENANT

Éléments Envato


Voici une icône de hamburger qui révèle une superposition en plein écran lorsque vous cliquez dessus, avec une belle animation du hamburger se transformant en une icône "X" proche.

Voir le menu Pen Mobile – CSS par Daniel Hearn (@danhearn) sur https://codepen.io«> CodePen.dark

Une approche légèrement différente avec le menu qui disparaît à droite de l'icône du hamburger. Cela fonctionnerait évidemment mieux sur les petits écrans avec seulement quelques éléments de menu.

Voir le Pen Mobile Menu (CSS) par AY (@amycodes) sur https://codepen.io«> CodePen.dark

Certaines animations accrocheuses font ressortir ce menu.

Voir le menu Pen Hamburger – Pure CSS par Mark Claus Nunes (@mnunes) sur https://codepen.io«> CodePen.dark

Comme le titre l'indique, ce menu a été inspiré par Tumblr et a une animation élégante.

Voir le menu inspiré de Pen Tumblr (pur css) par John Riordan (@JohnRiordan) sur https://codepen.io«> CodePen.dark

Un menu hors canevas qui glisse vers l'extérieur et vers l'intérieur lorsqu'il est basculé.

Voir le menu de navigation caché du stylet (CSS pur) par Jessica Jones (@helloheyjess) sur https://codepen.io«> CodePen.dark

Une fenêtre modale qui apparaît et disparaît contient le menu de navigation dans cet exemple.

Voir le menu Fade-In / Fade-Out du stylet – Pure CSS par Ben Melluish (@pseudosocial) sur https://codepen.io«> CodePen.dark

Que diriez-vous d'un méga menu pleine largeur? Bien fait!

Voir le Pen Mega Menu Pure CSS par Mohammed Naji Abu Alqumboz (@ mohnaji94) sur https://codepen.io«> CodePen.dark

Un menu coulissant bien conçu avec une belle UX.

Voir le menu Pen Off Canvas – Pure CSS par Muhamed Ibrahim (@MuhamedIbrahim) sur https://codepen.io«> CodePen.dark

Voici un menu radial d'icônes de partage social sympa.

Voir le menu Pen Animated de Dario Fuzinato (@fuzinato) sur https://codepen.io«> CodePen.dark

Un autre exemple de menu hamburger coulissant.

Voir le menu de côté de Pen mobile-like pur css par Felipe Nunes (@willpower) sur https://codepen.io«> CodePen.dark

Un concept intéressant où le menu apparaît en survol.

Voir le menu du masque rond Pen Material Design (pur css) par Sorin Botirla (@sorinbotirla) sur https://codepen.io«> CodePen.dark

Pas vraiment «juste un autre menu», celui-ci est un menu d'icônes de partage qui fonctionnerait bien sur les articles de blog ou tout autre contenu qui doit être partagé.

Voir le menu Pen Just Another (Pure CSS) par Akhil Sai Ram (@ akhil_001) sur https://codepen.io«> CodePen.dark

Un menu déroulant avec des sous-éléments apparaissant avec une animation intéressante.

Voir le Pen #CodePenChallenge: Menu de Hakkam Abdullah (@Moslim) sur https://codepen.io«> CodePen.dark

Un autre menu radial pas sans rappeler les exemples précédents.

Voir le Menu Radial Pen – Pure CSS par Colin Hall-Coates (@Oka) sur https://codepen.io«> CodePen.dark

Et voici un autre menu de superposition plein écran avec une belle animation.

Voir le menu de superposition Pen plein écran (css pur) par Vlada Oleynik (@vladaoleynik) sur https://codepen.io«> CodePen.dark

Un joli menu de navigation qui s'adapte à différentes tailles d'écran comme le devrait un menu réactif.

Voir le menu hamburger Pen Responsive – pur CSS # 1 par mutedblues (@mutedblues) sur https://codepen.io«> CodePen.dark

Enfin, nous avons un bas du menu de l'appareil mobile à l'écran avec une animation lisse.

Voir le menu de navigation mobile Pen Animated (pur CSS) par Lovro Kalan (@LovroKalan) sur https://codepen.io«> CodePen.dark

Comment utiliserez-vous ces menus de navigation CSS purs?

Nous espérons que ces exemples de menus de navigation vous seront utiles pour vos futurs projets. N'oubliez pas de consulter également nos autres collections d'extraits de code CSS pur!

Cet article peut contenir des liens affiliés. Voir notre divulgation sur les liens d'affiliation ici.

Laisser un commentaire

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