Le menu pur CSS3



Le menu déroulant qui utilise les nouvelles propriétés CSS3 est inspiré du tutoriel vu sur le site "Web Designer Wall".

Je développe ci-dessous les codes de l'ancien menu (fixe au bas de l'écran). Les modifications pour un affichage fixe en haut de l'écran n'affectent que les CSS et très peu...


Ce que je veux obtenir: un menu fixe au bas de la fenêtre


capture écran

    J'ai annoté la capture écran pour mieux visualiser les balises du CSS qui seront commentées dans le paragraphe suivant.

N. B. : les listes correspondent aux cadres (<ul>) et les items aux éléments de liste (<li>).





Le code html du menu


code menu

C'est classique, nous repérons facilement les différents niveaux du menu grace à l'indentation.

Le code CSS qui arrange tout


code css

Nous allons examiner le code ligne par ligne :


  1. remise à zéro de toutes les marges et padding, ceci évite des surprises parfois ;
  2. définition de la police, taille et couleur des caractères, couleur de fond ;
  3. Le header qui va contenir le logo et le menu est ici en position fixe "position:fixed;" au bas de l'écran "bottom:0;"
  4. le logo est défini flottant à gauche et ses marges précisées pour son environnement ;
  5. la division menu est flottante à gauche, en position relative pour se placer juste après le logo ;
  6. le niveau zéro est flottant à gauche et sans style de liste pour éviter les puces ou numérotations ;
  7. ici sont définies les propriétés des items de niveau zéro, nous précisons "cursor:pointer;" car un item peut ouvrir un sous-menu sans être un lien vers une autre page du site ;
  8. les liens sont blanc, sans soulignement ni encadrement ;
  9. les liens survolés prennent la couleur or ;
  10. ici sont définies les propriétés du cadre de niveau 1
    1. "position:absolute;float:left;" flottant à gauche ;
    2. "visibility:hidden;" non affiché à l'écran ;
    3. "bottom:40px;" à 40 pixels du bas pour être au dessus de la barre de menu ;
    4. "width:160px;" largeur du cadre ;
    5. "padding-bottom:20px;" pour laisser la place à la flèche vers le bas ;
    6. "left:25px" léger décalage à gauche ;
    7. "background:url(images/coin_bas.png) no-repeat left bottom;" image de la flèche en arrière plan, en bas et à gauche sans répétition ;
  11. "#menu ul li:hover>ul {visibility:visible;}" la magie du CSS3, une liste fille d'un item survolé devient visible ;
  12. ici sont définies les propriétés des items de niveau 1, on s'arrêtera sur la couleur de fond "background:rgba(21,17,16,0.7)" définie en rouge vert bleu et en opacité (0.7) qui donne de la transparence au fond ;
  13. définition des coins arrondis supérieurs droit et gauche du "premier enfant", en trois fois pour la compatibilité avec les différents navigateur préfixe -moz pour firefox, -webkit pour épiphanie et chromium et sans préfixe pour opéra ;
  14. coin arrondi inférieur droit
  15. enfin les propriétés du cadre de niveau 2
    1. "left:145px;" le décalage à gauche moins important que la largeur pour compenser le padding ;
    2. "bottom:10px;" pour remonter un peu le cadre ;
    3. "padding:0 0 0 20px;" un padding de 20 pixels à gauche pour la flèche gauche ;
    4. "background:url(images/coin_gauche.png) no-repeat bottom left;" la flèche pour le coin du bas à gauche ;


Finalement ce n'est pas trop difficile, le CSS3 facilite beaucoup l'organisation de la page web. De plus il est possible d'inclure un niveau supérieur sans avoir à ajouter quoi que ce soit à la feuille de style !...



Si vous souhaitez télécharger le fichier exemple

N B : En dernier lieu, pour avoir un menu "responsive" j'utilise maintenant le plugin "Responsinav master".