Créer un menu déroulant “accordéon” avec jQuery

Les Styles CSS

Pour commencer, nous allons utiliser les styles CSS pour rendre le menu un peu plus sexy. Voici les styles utilisés dans l'exemple :

.navigation {
  margin: 0;
  padding: 0;
  list-style: none;
  background: #000;
  color: #fff;
  width: 200px;
  font: 1.2em "Trebuchet MS", sans-serif;
}
.navigation a, .navigation span {
  display: block;
  padding: 4px 10px;
  color: #fff;
  text-decoration: none;
  background: #000 url(menu-item.png) left bottom no-repeat;
}
.navigation .toggleSubMenu a, .navigation .toggleSubMenu span {
  background-image: url(menu-item-deroule.png);
}
.navigation .open a, .navigation .open span {
  background-image: url(menu-item-enroule.png);
}
.navigation a:hover, .navigation a:focus, .navigation a:active {
  text-decoration: underline;
}
.navigation .subMenu {
  font-size: .8em;
  background: #ccc url(subMenu.png) 0 0 repeat-x;
  font-size: .9em;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #666;
}
.navigation ul.subMenu a {
  background: none;
  padding: 3px 20px;
}

Hop, c'est déjà nettement plus agréable à regarder, pas vrai ? Évidemment, il reste quelques bugs à corriger sous IE6 et consorts, mais ce n'est pas l'objet de ce tutoriel ... débrouillez-vous ;)

Et si vous voulez savoir à quoi sert la classe "open", continuez à lire !