Le menu
Naviguer, surfer sur Internet, qu'importe le mot employé, le principe est là. On explore un sujet ou bien on passe d'un thème à un autre au gré de nos envies. Tout cela se fait à travers les liens. L'avantage des menus est de regrouper les liens en un seul endroit. Comme le code doit être recopié sur chaque page concernée, il est préférable de mettre la partie CSS dans un fichier séparé. Pour utiliser le fichier CSS dans la page html, utilisez la ligne suivante que vous copiez entre les deux balises <head> et </head>.
<link rel="stylesheet" type="text/css" href="style.css" media=screen>
Une fois cela fait, il vous faut copier le code HTML du menu sur chaque page. Personnellement, je le mets en début de page juste sous la balise <body>.
<div id="blocMenu">
<div id="titreMenuTrucs">Menu trucs et astuces</div>
<div id="contItems">
<div class="itemMenu"><a href="trucs.html">1 - Restons à l'ombre</a></div>
<div class="itemMenu"><a href="trucs2.html">2 - On se bouge</a></div>
<div class="itemMenu"><a href="trucs3.html">3 - Ça gigote</a></div>
<div class="itemMenu"><a href="trucs4.html">4 - Ballon</a></div>
<div class="itemMenu"><a href="trucs5.html">5 - Les triangles</a></div>
<div class="itemMenu"><a href="trucs6.html">6 - Les boules</a></div>
<div class="itemMenu"><a href="trucs7.html">7 - Recto-verso</a></div>
<div class="itemMenu"><a href="trucs8.html">8 - Store</a></div>
<!-- <div class="itemMenu"><a href="trucs9.html">9 - Le menu</a></div> -->
</div>
</div>
Plutôt que de prendre un nouvel exemple, j'ai pris le menu de cette page. Vous pouvez le copier et l'arranger à votre sauce assez facilement. Si vous en mettez plusieurs sur la même page à la façon des traditionnels "Fichier", "Edition" etc. veillez simplement à mettre des noms différents pour chaque menu.
Comme à l'habitude maintenant, on se retrouve avec des balises <div> imbriquées. La première,#blocMenu sert de réceptacle à l'ensemble du menu. La deuxième, #titreMenuTrucs, est, comme son nom l'indique, le titre du menu que l'on peut voir à l'écran. La suivante, #contItems est le conteneur dans lequel on place les différentes options du menu. A ce point là, si vous testez votre page, vous aurez votre menu brut. Il sera fonctionnel avec les liens en bleu soulignés mais, il faut bien le reconnaître, ce n'est pas forcément une réussite esthétique.
Avant de passer à l'habillage du menu je vous fais remarquer un petit truc. La dernière ligne de lien, celle qui correspond à cette page, est mise en commentaire. Comme ça, elle n'apparait pas dans le menu. Je fais ça pour toutes les options, je trouve que c'est mieux mais c'est un avis qui m'est propre.
On va passer à la feuille de style qui, vous allez voir, n'est pas vraiment compliquée.
#blocMenu {
z-index: 15;
position: fixed;
right: 0px;
top: 0px;
margin: 0px;
}
#titreMenuTrucs {
position: fixed;
z-index: 16;
width: 200px;
top: 0px;
right: 8px;
background-color: crimson;
text-align: center;
font-family: Arial;
font-weight: bold;
color: white;
cursor: pointer;
}
#contItems {
position: absolute;
z-index: 20;
right: 8px;
width: 200px;
background-color: transparent;
padding: 0px;
margin: 0px;
top: 18px;
visibility: hidden;
}
#blocMenu:hover #contItems {
visibility: visible;
}
.itemMenu {
color: red;
font-weight: bold;
background-color: gainsboro;
border: 1px solid crimson;
padding-left: 8px;
}
.itemMenu a {
display: block;
width: 200px;
text-decoration: none;
font-weight: bold;
color: gray;
}
.itemMenu {
transition: transform 600ms;
transform: translatex(0px);
-webkit-transition: transform 600ms;
-webkit-transform: translatex(0px);
}
.itemMenu:hover {
color: black;
background-color: yellow;
transform: translatex(-15px);
-webkit-transform: translatex(-15px);
font-size: 110%;
}
Le bloc complet, #blocMenu, est placé sur le dessus de la page. Le bandeau jaune en haut de la page a la propriété z-index à 10 donc je place mon menu par dessus. N'oubliez pas que lorsque vous utilisez la propriété z-index vous devez obligatoirement utiliser la propriété position: (fixed, relative ou absolute). Si vous ne le faites pas, la propriété z-index sera ignorée.
C'est la même chose pour le titre du menu, #titreMenuTrucs. Il est placé sur le dessus la pile. J'ai mis le doigt tendu comme curseur bien qu'il n'y ait pas de lien dans le titre. C'est juste pour le cas ou quelqu'un voudrait atteindre le menu en passant par le haut du titre. Le reste des propriétés, ce n'est que de l'habillement et du positionnement.
Le bloc qui contient les options du menu, #contItems, a deux particularités. Tout d'abord, par défaut il n'est pas visible. Il ne devient visible que lorsque la souris passe dessus. Ensuite, ce bloc est transparent. Si vous observez bien le fonctionnement du menu, vous verrez que lorsque l'option se déporte vers la gauche, vous pouvez voir à droite ce qu'il y a sous le menu.
Lors du passage de la souris sur le menu, #blocMenu:hover #contItems, le bloc contenant les options du menu devient visible.
Le style des balises <div> contenant les liens, .itemMenu, a été divisé en deux. La partie contenant l'animation du lien est placée plus bas. Il n'y a rien de particulier à dire si ce n'est faire une petite remarque sur les deux premières lignes. Bien qu'il n'y a pas de texte dans cette balise hormis le lien, j'ai mis le texte en rouge et en gras. Vous pouvez ajouter une ligne à votre menu pour indiqquer à vos visiteurs qu'il va y avoir prochainement une nouvelle page. Cette ligne pourrait ressembler à : <div class="itemMenu">En construction</div>. Bien qu'elle ne soit pas cliquable, cette option est susceptible d'éveiller la curiosité de vos visiteurs et de les inciter à revenir.
Il est important de différencier les liens de votre menu avec les autres liens susceptibles d'être présents sur votre page et .itemMenu a est là pour ça. Avec la traditionnelle mise en forme de la balise <a>, on rajoute une ligne qui a son importance, display: block. Par défaut, cette balise est inline ce qui a pour conséquence de ne pas pouvoir la dimensionner. La largeur de la balise sera égale à celle du texte qu'elle contient. Seul le texte des options du menu sera cliquable. Avec display: block, le navigateur va considérer la balise au même titre qu'une balise <div> par exemple ce qui fait que toute la surface de l'option sera cliquable.
On arrive à la partie animation des options du menu avec la deuxième partie de .itemMenu. Nous avons là l'état de notre option au repos. Nous allons avoir un déplacement qui à ce momment est nul (0px) et il faudra 600 millisecondes pour que le retour s'effectue.
Quand la souris passe sur l'option, celle-ci se déplace de 15 pixels vers la gauche (valeur négative) en 600 millisecondes. C'est ce que nous raconte .itemMenu:hover. Nous en profitons pour changer l'apparence du lien question de mettre un petit plus.