Tutos CSS - Menu

Des cours pour apprendre à créez votre menu CSS

La création de menu fait parti des tâches que tout développeur front end va devoir affronter avec le langage CSS.
Le menu de navigation est un élément indispensable pour tout site Internet ou application web. Que ce soit sur un ordinateur, une tablette ou un smartphone. C'est le menu qui va permettre à vos utilisateurs de naviguer au travers des différentes pages ou écrans et ainsi accéder à vos contenus.
Il est donc important de soigner la présentation de votre menu et l'UX (l'expérience utilisateur). Que ce soit sa mise en forme et la manière dont il va réagir selon les choix de l'internaute.
Pour créer ces menus, vous aurez besoin de compétences en CSS et en HTML.

Les différents types de menu

Il existe différents menus. Voici les principaux :

• Le menu horizontal : En général, sur un site, le menu est situé en haut de votre interface. C'est du moins le cas pour un site internet. On parlera alors d'un menu horizontal
• Le menu vertical : Il peut également se situer sur la partie droite de votre site (on peut appeler cela un menu en sidebar).
• Le menu burger : un icône en forme de 3 petits traits horizontaux : c'est ce qui caractérisent un menu burger. Son apparition peut se dater avec l'arrivée du responsive web design. Avec l'affichage sur mobile, on a besoin de place.
  Le menu horizontal laisse en général place au menu burger sur les écrans plus petits comme les tablettes ou les téléphone. Ce dernier peut être situé en haut à droite ou à gauche selon les cas.
• Le menu dépliant ou "rich menu" : si votre site contient beaucoup de catégories, alors vous allez sans doute devoir utiliser un menu dépliant.
  Il affichera un premier niveau de navigation, puis un second, voire même un troisième.
  Attention à ne pas abuser des niveaux de navigation. Ce type de menu est en général assez compliquer à utiliser pour un internaute peu aguerri.
• Le sticky menu : c'est un menu qui va toujours rester à l'écran. En général, le menu classique laisse place à un sticky menu, un peu plus épuré, dès lors que l'utilisateur commence à scroller vers le bas de la page.
• App bar menu : le menu que l'on retrouve dans les applications mobiles. En général situés en bas de l'interface d'une application, cette barre de navigation permet de naviguer efficacement avec votre pouce.

Des guidelines existent pour les menus. Comme il s'agit d'un élément primordial pour la navigation, mieux vaut suivre les recommandations d'un design system. Les experts en ergonomie se seront déjà posé toutes les questions en terme d'usabilité, et d'accessibilité. Voici par exemple, les recommandation du Design System de Google (Material Design) pour les App bar.

Les questions à ce poser avant de créer un menu css

Voici une petite liste de questions que vous devrez vous poser avant de travailler sur le menu. Notez qu'en général c'est l'UX designer ou le Webdesigner qui se pose ce type de questions. Mais, un développeur freelance a souvent plusieurs casquettes. Etant seul, vous devrez vous les poser vous-même !

• Où va s'afficher le menu ?
• Quel type de menu utiliser (menu horizontal, vertical...) ?
• Quelle animation va t-on appliquer au menu ?
• Quel comportement aura-t-il en dessous de la ligne de flottaison ? Le laisse-t-on affiché ? On le masque ?
• Comment va se comporter le menu sur des interfaces de consultation plus petite (une tablette, un smartphone).
• Existe-t-il des bonnes pratiques ou au contraire, des choses à éviter ?
• Quels éléments vont figurer dans mon menu : quelles pages mettre en avant.
• Des éléments seront-t-il ajoutés ou supprimés si l'utilisateur est connecté à un compte membre..

Vous le voyez : il y a énormément de choses à préparer en amont, avant d'écrire la moindre ligne de code. Mais une fois que vous aurez répondu à ces questions, vous pourrez passer à la phase d'intégration et de programmation.

Le CSS va vous permettre de personnaliser vos menus : couleur du texte, couleur de fond, alignement du texte (text align) ou sa hauteur (line height). Tout sera personnalisable grâce aux CSS. Pour les "rich menus" vous utiliserez des éléments de liste (avec les attributs li ul).
Petit à petit vous obtiendrez le résultat que vous souhaitez, avec des animations, et des changements d'états que vous désirez.
Grâce à nos formations en vidéo, vous allez faire l'acquisition des compétences pour créer vos propres menus.

Liens utiles

• Tutos CSS gratuits