32
Créer un menu glissant en utilisant jQuery
Grâce à ce tutoriel vous allez pouvoir créer un superbe menu horizontal avec un effet d’apparition des sous menus grâce à l"utilisation du framwork jQuery ! A voir absolument !
Vous avez certainement croisé un jour ou l’autre un menu créé grâce à la technologie JavaScript, si non passez donc votre souris sur le menu bleu sur le haut même de cette page … voyez-vous les sous menus apparaitre ? Ce tutoriel va vous expliquer comment créer un menu du même genre mais en ajoutant une animation d’ouverture, de fermeture et un petit effet d’arrondi sur les bords.
Rien de bien compliqué dans cette méthode, vous allez le voir, chaque étape est bien expliquée et très simple à comprendre !
Pour commencer je vous invite à tester ce menu en cliquant sur le bouton ci-dessous, vous verrez qu’en cliquant sur la flèche un sous menu apparaitra avec une animation glissante, de quoi donner envie à vos lecteurs de cliquer 
et de parcourir chacune des rubriques !
ETAPE 1 – CREATION DU FICHIER HTML
Dans Dreamweaver par exemple (ou tout autre éditeur HTML) je crée un nouveau document .htm puis je vais créer mon menu. Pour faire simple le menu est composé d’une premier liste ul puis d’une seconde qui s’imbrique pour créer la sous liste.
Voici comment se structure la liste 1 :
<ul class="topnav">
<li><a href="#">Lien 1</a></li>
<li><a href="#">Lien 2</a></li>
<li><a href="#">Lien 3</a></li>
<li><a href="#">Lien 4</a></li>
</ul>
Puis la seconde étape consiste à imbriquer la seconde liste dans la première.
Voici ce que cela donne en HTML.
<ul class="topnav">
<li><a href="#">Lien 1</a></li>
<li><a href="#">Lien 2</a>
<ul>
<a href="#">Sous Lien 1</a>
<a href="#">Sous Lien 2</a>
<a href="#">Sous Lien 3</a>
</ul>
</li>
<li><a href="#">Lien 3</a></li>
<li><a href="#">Lien 4</a></li>
</ul>
Bien entendu je vous invite à personnaliser les libellés ainsi que les urls pour que votre menu soit fonctionnel !
La partie HTML est déjà terminée. Facile non ?
ETAPE 2 – INSERTION DU JAVASCRIPT
Cette seconde étape sera encore plus facile, en effet il vous suffira de copier et de coller le code ci-dessous entre les balises head /head de votre page HTML !
<script type="text/javascript">
<script type="text/javascript">
$(document).ready(function(){
$("ul.subnav").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav
$("ul.topnav li span").click(function() { //When trigger is clicked...
//Following events are applied to the subnav itself (moving subnav up and down)
$(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click
$(this).parent().hover(function() {
}, function(){
$(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
});
//Following events are applied to the trigger (Hover events for the trigger)
}).hover(function() {
$(this).addClass("subhover"); //On hover over, add class "subhover"
}, function(){ //On Hover Out
$(this).removeClass("subhover"); //On hover out, remove class "subhover"
});
});
</scri
</script>
Juste au dessus du code javascript vous ajouterez la ligne
<script type="text/javascript" src="javascript/jquery.js"></script>
Qui permet d’appeler le fichier jquery que vous avez placé dans le dossier javascript qui lui-même se place dans le même dossier que le fichier HTML !
ETAPE 3 – LIAISON DU FICHIER CSS
Et pour terminer je rajoute cette ligne de code toujours dans les balises head :
<link rel="stylesheet" href="css/tutorial_499_css.css" type="text/css" media="screen" />
Cette ligne permet de lier votre page HTML avec la feuille de style CSS !
Pour personnaliser le menu c’est dans ce fichier qu’il faudra vous rendre !
ETAPE 4 – TESTER
Et oui ! votre menu est déjà terminé, je vous invite à le sauvegarder puis à le tester dans Firefox. Pas mal non ?
Si vous avez des questions, n’hésitez pas à utiliser le forum ci-dessous.
Merci à tous d’avoir lu mon nouveau tutoriel sur wks !
Téléchargement des fichiers sources liés à ce tutorial
Veuillez vous connecter pour télécharger les fichiers sources
Article publié par Wonka
Vous aimez cet article? Partagez le !
Je suis très humblement le webmaster et le créateur de ce site, vous êtes en ce moment sur ma fiche membre, vous avez la possibilité de m’’envoyer des messages, pour toutes questions n’hésitez pas une seule seconde !
La galerie des membres
Voici les images déjà publiées par les membres de ce site, merci à vous pour votre créativité !
Questions et commentaires, Il y a 26 messages de forum.
Vous avez besoin d’eclaircicemment sur un points évoqués dans cette leçon, dans ce cas laissez votre question en utilisant le formulaire ci dessous, notre équipe vous apportera rapidement un complètement d’information. Merci d’être le plus précis possible lors de la rédaction de votre demande.
-
5 juin 2009 17:07, par Neobreiz
Bonjour,
Je ne vois pas ou est mon erreur, mais je n’ai pas de barre de menu, ca reste blanc... J’ai vérifier les liens vers les dossiers images, css et javascript, et ils sont bon. Je quelqu’un a une idée !!!
A+ et merci pour ce site tip-top
Répondre-
8 juin 2009 18:55, par Wonka
Si tu nous donne pas plus de détail concernant le problème, je ne risque pas de pouvoir t’aider !
Répondre-
9 juin 2009 12:06, par neobreiz
Bonjour,
Désolé pour le manque d’infos... En fait je n’ai rien qui s’affiche à l’écran, le bg_menu.png ne s’affiche pas, alors que je n’ai rien changé des liens, j’ai gardé le même chemin que l’exemple... en fait j’ai une page blanche...
Répondre
-
-
-
-
23 juin 2009 16:44, par Perplex
désolé de jouer les troubles fête mais ce n’est pas un tutoriel jquery ça ! bien que pratique il s’agit plutot d’un tutoriel sur comment intégrer un script tout fait dans son site.
pas d’explications sur le pourquoi du comment ...
dslé
Répondre
-
-
26 juin 2009 23:57, par boro28
Ca doit sûrement bien donner mais franchement... difficile pour un amateur de suivre le tutoriel. Je suis sûr que pourtant ca doit être tout facile mais je n’arrive pas du tout à ce résultat... C’en est même impossible d’essayer d’expliquer où je bloque lol. Je vais essaye et si jamais je trouve je renverrai un message. Boro
Répondre-
28 juin 2009 20:20, par Votre pseudonyme
Ahhhh, j’avais fait une erreur. Bon, j’ai bien mes fichiers dans mon dossier racine mais comme la personne plus haut, j’ai une page blanche. Les éléments images sont pourtant bien dans la règle css à leur place mais ils ne s’affichent pas. Je n’ai même pas les mots « liens » dans la page blanche. Pourtant quand je passe la souris, on voit la flèche devenir une main donc les liens sont là. Question : le code que l’on doit placer au dessus du code javascript, je ne vois pas trop où on doit le placer... je sais que c’est pas fort cliar ce que j’ai écrit :d Merci
Répondre
-
-
28 juin 2009 20:35, par Votre pseudonyme
J’ai trouvé pour les images qui ne s’affichent pas il faut refaire les liens avec le dossier images !
Mais les « sous liens » se trouvent sur le même niveau que les liens donc, ca ne marche pas
Répondre -
9 juillet 2009 12:30, par Watson
Bonjour, Belle réalisation en effet sauf que chez moi, ça fonctionne à moitié c-a-d que j’ai le lien 1 et deux puis les sous-liens d’emblée apparents sur la même ligne qui cachent les liens 3 et 4, alors qu’ils devraient apparaître en dessous,onClic ; Pourtant j’ai fait des copier coller et ma structure est :
dossier
>dossier css - la page.css
>dossier images - les images
>dossier javascipt - la page jquery.js
> la page html
Donc mystère....Merci de m’éclairer
Répondre -
9 juillet 2009 13:16, par Wonka
Le problème viens probablement du code, et non pas des fichiers
Répondre vérifiez votre code HTML notamment la structure du menu en liste ! -
10 juillet 2009 19:20, par razhen
meme probleme que les autres concernant les sous liens....
Répondre -
11 juillet 2009 15:25, par xtof
Super tuto, mais voila j’aimerai ne pas devoir clicker sur les flèche mais bien sur les textes j’ai beau retourner la css et le code html je ne vois pas.
comment faire svp merci d’avance
Répondre -
11 juillet 2009 15:54, par Wonka
Il faut modifier le Js pour cela, cependant je n’ai pas le temps de le faire ! Peut être pour un prochain tuto !
Répondre -
3 octobre 2009 11:15, par arslay
salut ! super tuto ! mais etant debutant je suis largué, sur l’endroit ou vont les fichiers..
Répondre -
3 octobre 2009 11:19, par arslay
ok, merci pour ta reponse, je vais essayer de comprendre en recherchant sur google bonne continuation !!
Répondre -
4 janvier 2010 11:25, par Votre pseudonyme
c bizzar j vien d’appliquer tou ces etapes mai ca ne marche plus
Répondre
veuillez m aider -
8 janvier 2010 11:05, par ST4LK3R
Bonjour Wonka,
Excellent tutoriel mais aurais-tu une idée pour que le slide se fasse de manière horizontal ?
Bien cordialement,
Répondre-
8 janvier 2010 12:39, par Wonka
Je pense qu’il faut regarder le type de slide utilisé dans jquery et le modifier par le horizontale, rendez vous donc sur le site officiel de jquery
Répondre bonne chance !
-
-
27 janvier 2010 18:25, par arnotufu
Voici quelques corrections :
placez le fichier tutorial_499_css.css à la racine (au même endroit que votre fichier html)Et copiez tout ça dans le fichier HTML :
Répondre<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<link rel="stylesheet" href="tutorial_499_css.css" type="text/css" media="screen" />
<script type="text/javascript" src="javascript/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("ul.subnav").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav
$("ul.topnav li span").click(function() { //When trigger is clicked...
//Following events are applied to the subnav itself (moving subnav up and down)
$(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click
$(this).parent().hover(function() {
}, function(){
$(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
});
//Following events are applied to the trigger (Hover events for the trigger)
}).hover(function() {
$(this).addClass("subhover"); //On hover over, add class "subhover"
}, function(){ //On Hover Out
$(this).removeClass("subhover"); //On hover out, remove class "subhover"
});
});
</script>
</head>
<body>
<ul class="topnav">
<li><a href="#">Lien 1</a></li>
<li>
<a href="#">Lien 2</a>
<ul class="subnav">
<a href="#">Sous Lien 1</a>
<a href="#">Sous Lien 2</a>
<a href="#">Sous Lien 3</a>
<a href="#">Sous Lien 4</a>
<a href="#">Sous Lien 5</a>
<a href="#">Sous Lien 6</a>
</ul>
</li>
<li>
<a href="#">Lien 3</a>
<ul class="subnav">
<a href="#">Sous Lien 1</a>
<a href="#">Sous Lien 2</a>
<a href="#">Sous Lien 3</a>
<a href="#">Sous Lien 4</a>
<a href="#">Sous Lien 5</a>
<a href="#">Sous Lien 6</a>
</ul>
</li>
<li><a href="#">Lien 4</a></li>
<li><a href="#">Lien 5</a></li>
</ul>
</body>
</html> -
21 septembre 2010 17:40, par hedy
Bonjour je ne trouve pas le fichier css ...
D’avance merci !
Répondre -
28 mars 2011 15:19, par zla
Attention : bien préciser class=« subnav » sur le ul imbriqué le code html ci-dessus l’a omis...
Répondre
