Un menu entièrement HTML et CSS, 1e partie

Réaliser un menu déroulant est une des techniques de base que tout bon développeur web doit apprendre car c’est un exercice qui permet de toucher à plusieurs aspects et fonctionnalités des différentes technologies en œuvre. Dans cette série d’article, je vous guiderai à travers un chemin qui nous mènera de la création d’un simple menu déroulant à l’adaptation de ce menu en plugin WordPress, en passant par l’intégration des nouveautés CSS3.

Une simple recherche Google, me direz-vous, apporte des dizaines de pages de résultats pour menu déroulant. Pourquoi un menu de plus ? D’abord, je vous répondrai que des dizaines de films racontent une histoire d’amour ou mettent aux prises des policiers et des bandits, et cela n’empêche pas les réalisateurs d’en préparer d’autres. Mais la vérité est que je veux décrire le processus de bout en bout, et je ne veux pas juste prendre un menu existant et le transformer en plugin. Suivre l’intégralité du processus est beaucoup plus enrichissant, comme vous le verrez.

Dans cette première partie, nous allons effectuer un menu très simple. Le but n’est pas de réaliser quelque chose de joli (pour l’instant ; ce sera l’objet de la 2e partie), mais de comprendre les techniques utilisées. Nous utiliserons uniquement HTML et CSS (valides). Il aurait été possible d’utiliser Javascript, voire un Framework comme jQuery, mais si l’on peut créer le menu avec CSS uniquement, pourquoi s’encombrer d’une étape supplémentaire ? Notez que l’argument selon lequel il faut prendre en compte le cas où l’utilisateur désactive JavaScript n’entre pas du tout en ligne de compte dans mon raisonnement. Soyons réaliste : surfer en désactivant JavaScript pour des raisons de sécurité est l’équivalent d’arrêter de rouler la nuit parce que la nuit il fait sombre. Les technologies (les phares !) existent pour sécuriser notre voyage.

Le HTML est une structure basée sur les listes. Notez qu’il aurait été techniquement possible d’utiliser des div, mais sémantiquement, la liste est la candidate parfaite. Après tout, qu’est-ce qu’un menu, sinon une liste très bien organisée ?

La liste :

<ul id="menu">
  <li><a href="">Accueil</a></li>
  <li><a href="">Catégorie 1</a>
    <ul>
      <li><a href="">Catégorie 1.1</a>
        <ul>
          <li><a href="">Catégorie 1.1.1</a></li>
          <li><a href="">Catégorie 1.1.2</a></li>
          <li><a href="">Catégorie 1.1.3</a></li>
        </ul>
      </li>
      <li><a href="">Catégorie 1.2</a>
        <ul>
          <li><a href="">Catégorie 1.2.1</a></li>
          <li><a href="">Catégorie 1.2.2</a></li>
          <li><a href="">Catégorie 1.2.3</a></li>
        </ul>
      </li>
      <li><a href="">Catégorie 1.3</a></li>
    </ul>
  </li>
  <li><a href="">Catégorie 2</a>
    <ul>
      <li><a href="">Catégorie 2.1</a></li>
      <li><a href="">Catégorie 2.2</a></li>
    </ul>
  </li>
  <li><a href="">Catégorie 3</a>
    <ul>
      <li><a href="">Catégorie 3.1</a></li>
      <li><a href="">Catégorie 3.2</a></li>
    </ul>
  </li>
  <li><a href="">Catégorie 4</a></li>
</ul>

Très classique donc : les listes permettent d’établir une hiérarchisation entre les liens (que vous n’oublierez pas de remplir), ce qui est important pour le référencement de la page. La page est simple à lire et simple à modifier.
Le CSS est dans la page menu1.css. J’y ai marqué d’un numéro les éléments les plus importants. Vous pouvez donc vous référez à la feuille de style tout en lisant les explications suivantes.

/* 1 */ display:inline-block;

Le comportement d’un élément dépend de sa propriété display. La propriété display de ul est inline par défaut. Un élément inline accepte plusieurs autres éléments inline sur la même ligne, et en l’absence d’autres éléments, sa taille occupe tout l’espace disponible de la ligne. ul va donc chercher à occuper toute la ligne, alors que nous voulons qu’elle s’arrête à la fin du dernier élément qu’il contient. Un élément block se comporte comme s’il était seul sur sa ligne, et occupe uniquement l’espace qu’on lui assigne (width et heigth). Le problème ici est que je ne veux pas donner une largeur fixe au menu. Je veux pouvoir lui ajouter une nouvelle entrée en réduisant au possible les changements de CSS. Mon choix se porte donc sur width : auto, mais malheureusement, pour block, auto signifie « prendre toute la largeur disponible » (idem pour 100%). inline-block est LA solution : le menu est placé en ligne, mais se comporte comme un bloc. Résultat : il est automatiquement redimensionné quel que soit le nombre d’entrées.

/* 2 */ float: left;

Cette règle permet d’aligner les li (qui contiennent les entrées du menu) les unes à la gauche des autres. Sans elle, les li seraient empilées les unes sur les autres, ce qui est très fâcheux lorsqu’on veut créer un menu horizontal.

/* 3 */ display: block;

Nous donnons une propriété block aux liens afin que chaque case reste bien dans son secteur, sans cela les cases auraient tendance à s’empiler les unes sur les autres, et à positionner leur texte de manière complètement non coordonnée.

/* 4 */ width: 10em;

em est une unité de mesure typographique souvent délaissée (ou ignorée) au profit de pixel, de point ou de centimètre. em est la proportion entre la hauteur et la largeur d’une police de caractère, en relation avec la taille de la police en points. Son principal avantage est qu’elle est élastique, c’est-à-dire qu’elle change lorsque la taille des polices change (si on agrandit le texte par exemple). Cela nous permet de disposer d’une taille qui s’ajustera automatiquement à la taille du texte en cours, alors qu’avec une hauteur en pixel, le texte pourrait déborder du cadre qui le contient.

/* 5 */ position: absolute;

C’est la propriété qui permet de faire marcher le menu. Il y a deux types de techniques pour réaliser l’effet déroulant : utiliser la propriété display (qui en basculant de none à block fait apparaître ou disparaître l’élément du menu) ou positionner l’élément au départ à un emplacement invisible au navigateur (left :-999em) et ensuite les ramener dans la position voulue lors du survol de la souris.

/* 6 */ left: -999em;

On est toujours ici dans la lignée de position :absolute. Ici, on renvoie le sous-sous-menu d’un élément à l’emplacement invisible lorsque le menu survole un autre élément.

/* 7 */ position:relative;

Cette règle affiche les sous-sous-menu à la place voulue, neutralisant ainsi le positionnement défini par #menu li ul et #menu li ul li ul li. Le résultat est que les sous-sous-menus apparaissent lors du survol du sous-menu qui les contient. Ici, le positionnement relatif est défini avec précision parce qu’on veut précisément positionner le sous-sous-menu à droite du sous-menu qui les contient.

/* 8 */ left: auto;

Cette règle s’applique lorsqu’on survole les éléments ul du menu. Les sous-menus sont immédiatement déplacés (d’une manière instantanée) au-dessous de l’entrée du menu lors du survol de ces entrées, et disparaissent de nouveau lorsque l’entrée-mère n’est plus survolée.

Le code source se trouve ici : menu html et menu css. Vous verrez que le menu fonctionne, mais est visuellement plutôt terne. Nous nous attacherons à corriger cela dans l’article suivant.