Description

1. Rien

   1. Voici l'état du menu lorsqu'aucun CSS n'est appliqué
   2. Il est très important que la liste imbriquée soit bien formée. C'est à dire que les ul des sous-menus soient à l'intérieur du li et non d'un ul.
   3. Remarquez que les éléments qui ont un sous-menu ne sont habituellement pas cliquables puisque leur but est de porésenter les élémentds du sous-menu qui, eux, sopnt cliquables. On les a donc définis à l'aide de la balise span.
   4. Notez également que ces balise span contiennent un attribut tabindex="1". Cet attribut sera utilisé dans l'étape "Cliquable".

   Avantages

   • Rapide
   • Facile

   Inconvénients

   • Laid
   • Pas ergonomique
   • Peut devenir long

2. Base

   1. Placer le menu à gauche du texte à l'aide de flex ou de grid.
   2. Enlever les puces, le margin et le padding des listes (ul)
   3. Enlever la couleur et le soulignement des liens.
   4. Faire bien attention de restreindre les changements au contenu du menu (pas aux autres listes de la page).

   Avantages

   • Rapide
   • Facile

   Inconvénients

   • On ne voit plus la hiérarchie
   • Pas du tout ergonomique

3. Boutons

   1. Ajouter un peu de formatage aux liens.
   2. Ajouter la pseudo-classe hover pour voir le bouton survolé.

   Avantages

   • Un peu plus joli

   Inconvénients

   • On ne voit pas la hiérarchie à moins de survoler le sous-menu.
   • Peu ergonomique.

4. Erreurs de base

   1. Changer la police : -family, -weight, -style, -size, -variant, text-transform ou autres.

   Avantages

   • Aucun

   Inconvénients

   • Brise l'illusion de stabilité si importante dans une interface bien faite.

5. Hiérarchie

   1. Accentuer la hiérarchie en ajoutant un changement visible, comme l'arrière-plan, les bordures, un padding, un margin...
   2. On peut également mettre un indicateur sur les éléments qui ont un sous-menu. En l'occurence, on ajoute un triangle avec une règle contenant ::after.
   3. Dans cet exemple, les parents des sous-menus se reconnaissent au fait qu'ils n'ont pas de lien et sont donc définis par un span.

   Avantages

   • On voit la hiérarchie des menus.

   Inconvénients

   • Peut devenir long si on a un menu complexe.

6. Hiérarchie cachée

   1. Cacher le sous-menu lorsque la souris n'est pas sur l'élément de menu.
   2. Pour ce faire, on applique la propriété display: none; dans une règle avec un sélecteur qui ressemble à ... li:not(:hover) > ul

   Avantages

   • On ne voit par défaut que le premier niveau, on peut donc avoir un menu complèxe qui ne prend pas trop de place.

   Inconvénients

   • Lorsque le sous-menu apparaît, la page bouge beaucoup, ce qui rend parfois les autres éléments du menu difficiles à atteindre.

7. Hiérarchie flottante

   1. Rendre le sous-menu flottant à l'aide de position: absolute;.

   Avantages

   • La page ne bouge pas autant.

   Inconvénients

   • Le sous-menu est par-dessus et cache l'élément suivant. Il est donc difficile de le sélectionner.
   • La superposition des sous-menus peut devenir mélangeante.

8. Hiérarchie à droite

   1. On déplace le menu à droite du menu parent.
   2. Pour ce faire, on donne le propriété left: 100%; au sous-menu.
   3. Il faut s'assurer que le menu parent a la propriété position: relative; sinon, le sous-menu ira à droite de la page.

   Avantages

   • Le menu est (presque) parfait

   Inconvénients

   • Parfois, ça peut être agaçant pour l'usager d'avoir un menu qui apparaît lorsqu'on bouge la souris.

9. Cliquable

   1. Le sous-menu n'apparaît maintenant si l'on clique sur son parent.
   2. On remplace simplement le sélecteur nav li:not(:hover) > ul par nav li:not(:focus-within) > ul
   3. Pour qu'un élément (autre qu'un lien ou un élément de formulaire) puisse "avoir le focus", il doit avoir l'attribut tabindex avec un entier comme valeur.

   Avantages

   • Une meilleure illusion de stabilité.
   • Le menu ne disparaît pas par accident.

   Inconvénients

   • Parfois on peut ne pas se rendre compte que l'élément est cliquable.

10. Hamburger

    1. Pour le faire aparaître, il faut réduire la largeur de la fenêtre.
    2. S'utilise habituellement sur une interface mobile.
    3. On affiche le bouton et on cache le menu comme si c'était un sous-menu avec la règle nav:not(:focus-within)>ul { display: none; }
    4. Puisqu'un bouton peut avoir le "focus", il activera l'affichage du menu.
    5. Ajouter un media-query permettant de voir le hamburger seulement si la largeur est en deça d'un certain seuil. Ex.: @media (max-width: 1000px).

    Avantages

    • Prend moins de place à l'écran

    Inconvénients

    • C'est un clic de plus pour obtenir ce que l'on veut.

11. Horizontal

    1. Description à venir

    Avantages

    Inconvénients