CSS Menu de navigation réactive - Web Designer Wall - Tendances design et Tutoriels

Le but

Le but de ce tutoriel est de vous montrer comment transformer un menu de la liste régulière dans un menu déroulant sur l'écran plus petit.

CSS Menu de navigation réactive - Web Designer Wall - Tendances design et Tutoriels

Cette astuce est plus utile sur la navigation avec un grand nombre de liens comme la capture d'écran ci-dessous. Vous pouvez condenser tous les boutons dans un menu déroulant élégant.







CSS Menu de navigation réactive - Web Designer Wall - Tendances design et Tutoriels

Le CSS pour la navigation (vue bureau) est assez simple, donc je ne vais pas entrer dans les détails. Notez que j'ai spécifié affichage: inline-block au lieu de float: left pour la navigation

  • élément. Cela permet aux boutons de menu pour pouvoir aligner à gauche, au centre ou à droite en spécifiant l'alignement du texte sur la
      élément.







      Centre et alignement à droite

      Comme mentionné ci-dessus, vous pouvez modifier l'alignement des boutons en utilisant la propriété text-align.

      Soutien Internet Explorer

      HTML5