Victor's Studio
Bienvenue Sur Victor's Studio !
Connectez-vous ou inscrivez-vous Très Vite !
Vous aurez accès à Tous le Forum !
Connexion

Récupérer mon mot de passe

Qui est en ligne ?
Il y a en tout 1 utilisateur en ligne :: 0 Enregistré, 0 Invisible et 1 Invité

Aucun

[ Voir toute la liste ]


Le record du nombre d'utilisateurs en ligne est de 35 le Lun 24 Oct - 12:36
Rechercher
 
 

Résultats par :
 


Rechercher Recherche avancée


Créer un menu glissant en utilisant jQuery:Etape I

Aller en bas

Créer un menu glissant en utilisant jQuery:Etape I

Message  Vision le Jeu 25 Juin - 23:24

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 :





Puis la seconde étape consiste à imbriquer la seconde liste dans la première.


Voici ce que cela donne en HTML.





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 ?
avatar
Vision
ULTRA PRO Studio
ULTRA PRO Studio

Messages : 176
Expèrience : 3503
Réputation : 1
Date d'inscription : 24/06/2009
Age : 21
Localisation : Maroc,Casablanca,Quartier Belvedère.

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Créer un menu glissant en utilisant jQuery:Etape II

Message  Vision le Jeu 25 Juin - 23:25

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 !



$(document).ready(function(){

$("ul.subnav").parent().append(""); //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"
});

});




Juste au dessus du code javascript vous ajouterez la ligne





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 !
avatar
Vision
ULTRA PRO Studio
ULTRA PRO Studio

Messages : 176
Expèrience : 3503
Réputation : 1
Date d'inscription : 24/06/2009
Age : 21
Localisation : Maroc,Casablanca,Quartier Belvedère.

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Créer un menu glissant en utilisant jQuery:Etape III

Message  Vision le Jeu 25 Juin - 23:26

Et pour terminer je rajoute cette ligne de code toujours dans les balises head :





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 !
avatar
Vision
ULTRA PRO Studio
ULTRA PRO Studio

Messages : 176
Expèrience : 3503
Réputation : 1
Date d'inscription : 24/06/2009
Age : 21
Localisation : Maroc,Casablanca,Quartier Belvedère.

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Créer un menu glissant en utilisant jQuery:Etape IV

Message  Vision le Jeu 25 Juin - 23:27

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 !
avatar
Vision
ULTRA PRO Studio
ULTRA PRO Studio

Messages : 176
Expèrience : 3503
Réputation : 1
Date d'inscription : 24/06/2009
Age : 21
Localisation : Maroc,Casablanca,Quartier Belvedère.

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Créer un menu glissant en utilisant jQuery:Telechargement

Message  Vision le Jeu 25 Juin - 23:28

Téléchargement

avatar
Vision
ULTRA PRO Studio
ULTRA PRO Studio

Messages : 176
Expèrience : 3503
Réputation : 1
Date d'inscription : 24/06/2009
Age : 21
Localisation : Maroc,Casablanca,Quartier Belvedère.

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Re: Créer un menu glissant en utilisant jQuery:Etape I

Message  Contenu sponsorisé


Contenu sponsorisé


Revenir en haut Aller en bas

Revenir en haut

- Sujets similaires

 
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum