Niveau : Confirmé

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

Tutoriel par (Développeur web, Verviers (Belgique))
Créé le , mis à jour le (157719 lectures)
Tags : javascript

Sommaire


Les styles CSS

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 !