Un menu Responsive et Retina-Friendly sur Codrops

Ce contenu a été rédigé il y a 6 années. Il se peut qu'il ne soit plus à jours.

Pour mon dernier article sur Codrops, j’ai voulu jouer avec les font-icons et les media-queries pour créer un menu responsive qui s’adapte aux tailles d’appareil et de navigateur. Les couleurs sont inspirées des armes Maliwan de Borderlands et le menu proposé a 3 différentes mises en pages :

  • une navigation en  blocs en ligne avec une animation de box-shadow sur les différentes icônes,
  • une disposition en 2 colonnes pour la version « tablette » au sens très large
  • une mise en page sous forme d’un menu de listes, fermé par défaut, pour les très petits écrans.

Menu responsive retina ready sur Codrops

Vous trouverez le tutoriel en ligne sur l’article de Codrops « Responsive Retina-Ready Menu » et vous pouvez également voir directement la page de démo.

Il s’agit d’une démo qui utilise des propriétés CSS3 pour les animations, les couleurs et d’autres effets. La démo ne fonctionnera donc pas sur les navigateurs qui ne prennent pas en compte ces propriétés. Le tutoriel décrit la création de la font-icon personnalisée avec IcoMoon. Si vous voulez en savoir plus en française sur ce sujet je vous invite à lire mon article « Créer une police d’icônes facilement à partir d’illustrations vectorielles » sur Alsacréations.

Le menu déroulant de la version « mobile » est créé avec du JavaScript. Par défaut si JavaScript est désactivé, le menu est ouvert, ce qui évite de ne pas avoir de menu sur mobile en cas de désactivation volontaire ou souci avec le JavaScript. Il serait possible de le faire en « full CSS3 » avec du :target ou encore tricher avec du :checked sur une checkbox, mais on entre dans le domaine du « hack » du HTML. Pour ce tuto j’ai préféré ne pas faire de full CSS, et avoir un HTML propre avec quelques lignes de JavaScript supplémentaires. Toutes les animations se font en CSS3.

Comme ajouté dans les commenataires, pas de polyfill responsive pour les vieux IE qui ne supportent pas les media-queries, mais vous pouvez toujours utiliser un width au lieu d’un max-width pour faire en sorte de « fixer » la largeur pour ces navigateurs, qui de toute façon n’existent pas sur mobile.

Comme  toujours, vous pouvez télécharger le code pour l’adapter à vos besoins :)

Vous souhaitez des conseils en ergonomie ou en expérience utilisateur ? Un design de site, d’interface ou d’application mobile ? Envie de travailler ensemble ou de m’inviter à donner une conférence ? Consultez mes réalisations ou contactez moi directement.

8 réflexions au sujet de « Un menu Responsive et Retina-Friendly sur Codrops »

  1. Ping : Des pixels et du code #61 - Stéphanie Walter : Webdesign - intégration web

  2. Bonjour et merci,

    Je voudrais ‘utiliser le menu pour un projet web universitaire.
    Mais je rencontre un problème pour l’insertion dans les « header » de mes pages.
    En effet, je voudrais factoriser le menu en créant un fichier comportant le code du celui-ci pour ensuite l’appeler à chaque fois sur mes pages.
    Avez-vous une idée de comment procéder ?

    Merci et vraiment très beau boulot !

    • Bonjour,

      je n’ai aucune idée de ce que vous entendez par « factoriser », c’est dans un langage côté serveur ? Si c’est le cas je ne peux pas grand chose pour vous, cela dépasse mes compétences de designer, désolé :/

    • Si vous utilisez du PHP, des includes du HTML devraient suffire. Pour le CSS il suffit de le mettre dans la CSS globale, pareil pour le JS.
      Sinon il existe des outils comme mixture qui permettre de créer dynamiquement des sites avec des includes via du liquid template, et d’exporter ensuite du HTML final. Tout dépend de vos besoins.

  3. Bonsoir,

    Le problème est résolu. Mais là je veux rajouter de nouveaux icones à ce menu.
    J’ai donc touché au fichier « icomoon.svg » pour avoir l’icone « icon-off » que j’ai pu voir sur « Font Awesome ». L’affichage se fait mais ce dernier est plus grand que les autres.
    Une idée sur la manière de procéder pour le mettre à la même hauteur que les autres ?

    Merci d’avance !