jeudi 4 juin 2009
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 !
-
Créer un menu glissant en utilisant jQuery
5 juin 2009 16:16, par Clems
Belle réalisation, bien joué
Répondre à ce message
-
Créer un menu glissant en utilisant jQuery
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 à ce message
-
Créer un menu glissant en utilisant jQuery
6 juin 2009 09:16, par RexHonna BooFToo
Excellent tuto comme d’hab ! 
Voir en ligne : DLCreations.fr
Répondre à ce message
-
Créer un menu glissant en utilisant jQuery
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 à ce message
-
Créer un menu glissant en utilisant jQuery
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 à ce message
-
Créer un menu glissant en utilisant jQuery
30 juin 2009 20:51, par Informagik
Sympa je pense que je vais utiliser ça pour bientôt
Voir en ligne : création de site internet à nice
Répondre à ce message
-
Créer un menu glissant en utilisant jQuery
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 à ce message
-
Créer un menu glissant en utilisant jQuery
9 juillet 2009 13:16, par Wonka
Le problème viens probablement du code, et non pas des fichiers vérifiez votre code HTML notamment la structure du menu en liste !
Répondre à ce message
-
Créer un menu glissant en utilisant jQuery
10 juillet 2009 19:20, par razhen
meme probleme que les autres concernant les sous liens....
Répondre à ce message
-
Créer un menu glissant en utilisant jQuery
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 à ce message
-
Créer un menu glissant en utilisant jQuery
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 à ce message
-
Créer un menu glissant en utilisant jQuery
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 à ce message
-
Créer un menu glissant en utilisant jQuery
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 à ce message
-
Créer un menu glissant en utilisant jQuery
4 janvier 11:25, par Votre pseudonyme
c bizzar j vien d’appliquer tou ces etapes mai ca ne marche plus  veuillez m aider
Répondre à ce message
-
Slide horizontal ?
8 janvier 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 à ce message
-
Créer un menu glissant en utilisant jQuery
27 janvier 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 :
<!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>
Répondre à ce message
-
Créer un menu glissant en utilisant jQuery
31 janvier 18:06, par Jutix
|
