Première étape : le HTML

Avant de pouvoir faire quoi que ce soit, ne devons lier les fichiers CSS et jQuery dans l'en-tête (entre balises head) de notre document HTML (ici, depuis le répertoire /fichiers) :

 
Sélectionnez

<link href="fichiers/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="fichiers/jquery.js"></script>

Ces deux fichiers vont contenir les styles et la librairie d'effets JavaScript, mais avant d'appliquer des styles ou des animations, nous devons créer la liste elle-même. Nous utiliserons une liste non ordonnée toute simple :

 
Sélectionnez

<ul class="menu_body">
    <li><a href="#">Qui sommes-nous ?</a></li>
    <li><a href="#">Portfolio</a></li>
 
    <li><a href="#">Clients</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Forums</a></li>
 
    <li><a href="#">Gallerie</a></li>
    <li><a href="#">Contact</a></li>
</ul>

Ce que nous avons ici est aussi simple qu'il n'y parait. Une liste non ordonnée avec la classe "menu_body". A l'intérieur, nous avons plusieurs éléments de liste avec un lien de navigation. Ensuite, nous avons besoin d'une image au-dessus de la liste. Cette image servira d'en-tête visible lorsque le menu sera replié. Il n'est pas obligatoire que ce soit une image, cela fonctionnera aussi bien avec du texte, mais je voulais quelque chose de visuel. Si vous voulez utiliser la même que moi, vous pouvez la trouver ici. Voici le HTML complet avec l'image :

 
Sélectionnez

<img src="images/navigate.png" width="184" height="32" class="menu_head" />
 
<ul class="menu_body">
    <li><a href="#">Qui sommes-nous ?</a></li>
    <li><a href="#">Portfolio</a></li>
 
    <li><a href="#">Clients</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Forums</a></li>
 
    <li><a href="#">Gallerie</a></li>
    <li><a href="#">Contact</a></li>
</ul>

Il nous faut donner une classe à l'image pour avoir une référence lorsque nous utiliserons jQuery. J'ai choisi "menu_head". Voici le résultat actuel, une liste sans style avec une image au dessus :

Image non disponible

Deuxième étape : le CSS

Nous devons maintenant affecter des styles à notre liste. Commençons par les styles de premier niveau :

 
Sélectionnez

body{
    background:#534741;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
}
ul, li{
    margin:0;
    padding:0;
    list-style:none;
}

Rien de très compliqué, juste une couleur de fond, une police et une taille de police. De même, nous précisons que la liste n'aura ni padding, ni margin ni puces. Maintenant, notre liste est juste un en-tête et une colonne de liens bien rangée :

Image non disponible

Appliquons maintenant des styles à l'image et aux éléments de la liste :

 
Sélectionnez

.menu_head{
    border:1px solid #998675;
}
.menu_body{
    width:184px;
    border-right:1px solid #998675;
    border-bottom:1px solid #998675;
    border-left:1px solid #998675;
}
.menu_body li{
    background:#493e3b;
}
.menu_body li a{
    color:#FFFFFF;
    text-decoration:none;
    padding:10px;
    display:block;
}

Voici ce que nous avons fait. Nous avons ajouté une légère bordure autour de l'image "menu_head". Sur la liste "menu_body", nous avons ajouter une largeur (la même que l'image) et une bordure, sauf pour le haut (elle est déjà présente avec l'image). Nous avons affecté une couleur de fond pour chaque élément de la liste et un style pour chaque lien. Les liens sont désormais blancs, non soulignés, avec un padding adapté et sont affichés en blocs (ce qui permettra de rendre toute la ligne cliquable, pas uniquement le texte).
Voici ce que cela donne :

Image non disponible

Troisième étape : jQuery

La première étape sera de faire alterner les couleurs de fond avec jQuery. Ajoutons le code dans le head du document HTML :

 
Sélectionnez

<script type="text/javascript">
$(document).ready(
    function () {$("ul.menu_body li:even").addClass("alt");
});
</script>

C'est une fonction jQuery basique. Lorsque le document est prêt, la fonction va ajouter une classe spéciale "alt" d'une ligne sur deux de la liste. Nous pouvons ajouter un style CSS pour la classe "alt" :

 
Sélectionnez

.menu_body li.alt