menu slider

Qui n’a jamais voulu créer un menu animé déroulant (slider), simplement et efficacement? C’est ce que je vous propose de découvrir avec CSS et jQuery, l’un des meilleurs framework Javascript en terme de design Web 2.0 puisqu’il comprend de l’Ajax.


Voir le menu déroulant


Télécharger la source >

  • 1) Partie xHtml

Qui dit CSS dit Html, il faut donc démarrer par la base: la création d’un fichier Html. Dans <head>, intégrez la page de style CSS que j’ai nommé « style.css ». Puis faites un appel au script « jquery.js », préalement placé dans le dossier « includes ».

On a donc :

[sourcecode language='html'] [/sourcecode]

Dans <body>, on crée une liste qui rassemble les item du menu déroulant, le tout incorporé dans un bloc div.

[sourcecode language='html']

[/sourcecode]

Nous avons donc des items cliquables contenus dans une liste de classe « menu ». Nous allons donc placer avant cette liste, l’image-bouton qui servira à dérouler la liste. Prenez mon image

[sourcecode language='html']

[/sourcecode]

  • 2) Partie CSS

Notre liste a un design plutôt moche. Nous allons donc lui donner du punch avec CSS. Créons donc le ficher style.css, et donnons à notre div de classe « menu », une largeur identique au bouton et une hauteur « auto » qui changera de taille suivant le contenu.
Ajoutons ensuite un peu de couleur de fond.

Nous utilisons également un list-style:none; pour cacher les puces de la liste.

[sourcecode language='css']

ul, li {
list-style:none;
font-family: ‘segoe ui’, ‘Tahoma’, ‘Verdana’, ‘lucida grande’, sans-serif;
}

.menu {
height: auto;
width: 148px;
background-color: #f0f0f0;
}

[/sourcecode]

Voilà ce dont à quoi vous devriez arriver:

image 1

Ajoutons ensuite quelques bordures, un petit padding pour aérer un peu notre beau menu, des couleurs pour le texte.

[sourcecode language='css']
ul, li {
margin: 0;
padding: 0;
list-style:none;
font-family: ‘segoe ui’, ‘Tahoma’, ‘Verdana’, ‘lucida grande’, sans-serif;
font-size: 15px;
}

.menu {
height: auto;
width: 148px;
background-color: #e7e7e7;
border: 1px #bababa solid;
}

.menu .menu_liste {
width: 148px;
display:none;
}

.menu .menu_liste li a {
display:block;
padding-top: 7px;
padding-bottom: 7px;
padding-left: 3px;
text-decoration:none;
color: #414141;
}

[/sourcecode]

  • 3) Partie jQuery

Premièrement, téléchargez jQuery (actuellement en version 1.2.6).
Pour faire un menu totalement Web 2.0, on va alterner les couleurs pour les items grâce à la classe « alt » déjà définie dans jQuery. Ajoutez donc ce code dans la balise <head>:

[sourcecode language='html']
;
[/sourcecode]

Ajoutez donc le bout de code CSS qui va avec, en choisissant la deuxième couleur à alterner:

[sourcecode language='css']
.menu .menu_liste li.alt {
background:#d2d2d2;
}
[/sourcecode]

Maintenant que nous avons finis la partie design du menu, nous pouvons donc cacher les items grâce à display:none; que nous ajoutons dans .menu .menu_liste { }

Pour que le menu se déroule on utilise une autre fonction. Nous allons donc ajouter un effet lorsque la souris passera sur les items. Pour cela on utilise la fonction click de jQuery, qui permettra au menu de se dérouler avec une effet slideToggle.
Mais vous pouvez utiliser d’autres effets sur le site officiel.

[sourcecode language='html']

[/sourcecode]

On peut ensuite ajouter un effet lorsque la souris passera sur chaque item. Grâce aux fonctions mouseover et mouseout, on pourra appliquer un style CSS pour chaque item ( .menu .menu_liste li a ).

[sourcecode language='html']

[/sourcecode]


Voir le menu déroulant


Télécharger la source >