Tutoriel Vidéo jQuery : Menu Accordéon

Ianis Il y a 15 jours Répondre

Merci pour le tutos c'est super sympa
Je suis entrain de l'adapter à mon site
J'aurais besoin de rajouter deux couches supplémentaires en escalier.
J'ai la tête comme une citrouille et depuis deux jours j'essaie de comprendre
par ou cela passe....
Pourriez vous me dire comment je dois faire ou me guider vers un tutos
qui me guiderait

Merci

clem62 Il y a 4 mois Répondre

BONJOUR, jai fais cela
<div ="menu">
<li class="ascenseur"><a href="#">lien 1</a>
<ul>
<li>lien 1-1</li>
<li>lien 1-2</li>
</ul>
<li><a href="#">lien 2</a></li>
<li><a href="#">lien 3</a></li>
</div>

avec le code du fichier ascenseur

jQuery().ready(function(){
$(".ascenceur").next("ul").hide();
$(".ascenceur").mouseover(function(){
if($(this).next("ul").is(":hidden")){
$(".ascenceur").next("li:visible").slideUp();
$(this).next("li").slideDown();
});
});
et sa ne fonctionne pas ?

merci d avance

lô Il y a 5 mois Répondre

Je me joins à tout ce beau monde pour te dire un grand merci!!
vraiment super!

Word Il y a 5 mois Répondre

Merci pour ce super tutoriel, c'est exactement ce que je cherchais.

J'ai cependant une question : comment faire pour que, quand le curseur de la souris n'est pas sur le menu, le menu déroulé se ferme automatiquement.

Car je trouve un peu gênant le fait que quand on n'est pas en train de naviguer sur le menu, une catégorie reste ouverte...

Merci encore

Jed7 Il y a 5 mois Répondre

Merci bien du tuto !!

stephi Il y a 10 mois Répondre

Bonjour à tous

quelqu un a t il une idée si par ex, je clique sur un élément du sous menu pour ouvrir une page, le menu reste ouvert à la rubrique choisie et le lien reste colorée?

Ex: j ouvre la rubrique A et clique sur le sousmenu A1 qui m ouvre la page A1 (site statique) et sur cette page, la rubrique reste ouverte et le lien A1 reste coloré.

avez vous une idée?
Merci

stephi

merci à tous

Stéphi

Matista19 Il y a 11 mois Répondre

Super Tuto!!!! j'ai fait la même chose mais pour un menu horizontal et sa marche nickel sauf que kan je kit la souris d'un élément du menu sa laisse le dernier sous menu ouvert, il faudrait que je face une condition différentes de celle du tuto !!=)

Arno Il y a 1 an Répondre

Excellentes explications!

devs Il y a 1 an Répondre

pareil j'essaye de télécharger les sources mai n'y arrive pas.

novice1 Il y a 1 an Répondre

Bonjour,
Ce tutoriel est vraiment genial...
Toutefois, il semble que chez moi cela ne focntionne pas.
Je pense que c'est à cause du CSS.
Serait-il possible d'avoir le code CSS de ce tutoriel.
J'ai vu que l'on pouvait télécharger les sources des tutoriels, savez-vous comment on fait ?

Merci à tous de vos réponses.

Shun Il y a 1 an Répondre

Bonjour , et bravo pour ce tuto

> Comment faire pour que lorsque je click une 2eme fois le menu se referme ?

Merci bien .

MiddletonArlene Il y a 1 an Répondre

Every body acknowledges that humen's life is expensive, nevertheless we need money for different things and not every person earns big sums money. Thus to receive quick <a href="http://bestfinance-blog.com/topics/home-loans ">home loans</a> and credit loan should be a proper solution.

Stef Il y a 1 an Répondre

Bonjour à tous !

J'ai découvert hier via dailymotion ce tuto et je me suis rendu directement sur ton site afin de d'en apprendre plus. Alors tout d'abord je trouve que tu fais un boulot extra. Bravo à toi.

Grace à toi, je vais me mettre sur Jquery car pour moi Javascript est indigeste.

J'essaye d'adapter ton tuto de tel manière à avoir une image cliquable pour ouvrir une partie du menu. A côté de cette image, une lien par exemple catégorie et dans le menu mes sous catégories. exemple ci dessous (l'image est représentée par le +) :

+ Catégorie1
- ss-cat1.1
- ss-cat1.2
+ Catégorie2
- ss-cat2.1
- ss-cat2.2

Dans ton tuto tu pointes sur la class="ascenseur" qui serait dans mon exemple la catégorie et tu détermines le menu à cacher grâce à la fonction next.
Dans mon cas c'est le "+" qui doit ouvrir l'accordéon et donc la fonction next pointe vers le lien catégorie.
Dans ton tuto this represente .ascenseur qui est ton h1.
Dans mon cas c'est un span :
<div>
<span class="ascenseur">+</span><a href="#">Catégorie 1</a>
<ul>
<li>ss-cat1.1</li>
<li>ss-cat1.2</li>
</ul>
</div>
<div>
<span class="ascenseur">+</span><a href="#">Catégorie 2</a></div>
<ul>
<li>ss-cat2.1</li>
<li>ss-cat2.2</li>
</ul>
</div>

Tu peux constater que dans mon cas le problème est que next pointe bien sur le "<a href>" de la catégorie.

Comment puis-je pointer sur mes ul sachant que this représente l'ascenseur courant ?

Si quelqu'un a une petite idée ou un début de piste, je suis plus que preneur.

Merci par avance.

Et longue vie à grafikart !!!

Badbart Il y a 1 an

avec le sélecteur next tu peux donner un argument. .next("ul") dans ton cas.
+ d'info sur la documentation officiel jqeury

Stef Il y a 1 an

C'est évidement ce que j'avais fait dans un premier temps mais ça ne fonctionne pas.

Stef Il y a 1 an

Je reprends donc par exemple :
$(".ascenseur ").next("ul").hide(); => ne fonctionne pas

Je suis actuellement sur la doc de jQuery mais je ne trouve pas ma solution, c'est pourquoi j'ai posté ici.

Grafikart Il y a 1 an

Next ne cherche que le successeur direct, nextAll conviendrait mieux :
$(".ascenseur ").nextAll("ul:first").hide();

A l'avenir essaie de poser les questions dans la sections questions, parceque là ton commentaire va vite être perdu dans la masse.

Stef Il y a 1 an - Répondre

Merci bcp, ça fonctionne bcp mieux. Je l'avais essayé tout à l'heure mais j'avais du faire une erreur.

Sinon, désolé, je n'avais pas vu la section question. Promis la prochaine fois je l'utiliserai.

En tout cas merci bcp.

stephi Il y a 2 ans Répondre

bonjour à tous

j aimerai adapter ce super tuto et le baser sur ma base mysql.

j ai donc une base PRODUITS avec table catégorie: id_catégorie,nom

et une table articles:id-article,titre,id_catégorie .

Rien de compliqué.

j aimerai donc avoir dans ce menu accordéon la liste des catégories et les produits correspondants .

quelqu un a t il une idée pour adapter ce menu js avec du php et mysql ?

merci car très peu de sources sur ce sujet.

stephi

kaou Il y a 2 ans Répondre

Bonjour!

J'ai refait le code avec quelque chose de plus simple (hide et show) et sans la condition (if).
Cependant, sous IE8 avec un windows 7, ça bug un peu. Je constate quelques décalages et même une liste qui ne s'ouvre pas tout le temps.

http://kaou.fr/test

Sauriez-vous me dire d'où cela pourrait venir?
Merci

kaou

Grafikart Il y a 2 ans Répondre

Kaou, merci de ton amélioration du script, je compte refaire un tuto (oupas)

kaou Il y a 2 ans Répondre

Arf, plus rien ne marche maintenant! Mes menus ne se cachent plus. Vous n'allez donc rien pouvoir voir sur l'adresse, je vais tout recommencer car je ne vois pas l'erreur...

kaou Il y a 2 ans Répondre

Bonjour. Extra ce tuto!

Mais j'ai beau mettre .click pour ouvrir les menus au clic seulement, cela reste au survol.
Un aperçu ici : http://kaou.fr/test

le code:

jQuery().ready(function(){
$(".ascenseur").next("div").hide();
$(".ascenseur").click(function(){
if{$(this).next("div").is(":hidden")){
$(".ascenseur").next("div:visible").hide();
$(this).next("div").show();
}
});
});

Merci de me dire ce qui ne va pas :S
kaou

athanase Il y a 2 ans Répondre

Super tuto!!!

djtoph Il y a 2 ans Répondre

slt,
un grand merci pour le tuto, pour le débutant que je suis c'est génial.
cela dit j'ai une requete.
je souhaiterai faire des sous menu
exemple
MENU1
sous menu1
sous sous menu1
sous menu1BIS
sous sous menu1BIS
MENU 2
sous menu1
sous sous menu1
ect..
Peux tu m'aider car j'ai essayer de retourner ton code dans tout les sens je n'y arrive pas!
merci d'avance djtoph'

David Il y a 2 ans Répondre

Super tuto, ça me donne vraiment envie de m'y mettre plus sérieusement.

J'ai la même question de Shirteo. Je pense que le commentaire de Toogy aurait apporté la réponse mais ces liens ne donnent rien

nehoria Il y a 2 ans Répondre

Tuto génial! rien à dire.

shirteo Il y a 2 ans Répondre

Bonjour

Bravo pour ce super tuto qui m'a bien aidé !!
J'aurais juste une question. Y'a t-il un moyen de laisser le menu ouvert une fois qu'on a cliqué sur une des sous-catégories et que la page de destination s'est chargée ?

Soso Il y a 2 ans Répondre

Merci!
Pile poil ce que je cherchais.
:-)

gwadabeach Il y a 2 ans Répondre

Tu fais vraiment du super boulot.

Drayark Il y a 2 ans Répondre

Salut tenorflo,
As tu vérifier l'ouverture et la fermeture de toutes tes balises : car une erreur de ce type IE ne le pardonne pas du tout contrairement à FF. Mais sans ton code, dur de dire ou peut se trouver ton errer...

tenorflo Il y a 2 ans - Répondre

merci Drayark !
une erreur toute bête, je n'avais pas fermé script type...
l'excitation sûrement devant ce tuto nickel

thierrysudfr Il y a 2 ans Répondre

Je débute sur jquery aujourd'hui, ces tutos vidéos sont une véritable aubaine. Merci pour ce travail, la clarté et la simplicité sont au rendez-vous ! Encore merci.

tenorflo Il y a 2 ans Répondre

Merci pour ce tuto qui fonctionne très bien sous FF mais pas sous ie. Les div restent visibles..
Une idée ?
merci

oni Il y a 2 ans Répondre

oups question deja posé, j'avais mal lu sorry

oniz Il y a 2 ans Répondre

Bonjour,

J'ai commencé les fonction Jquery hier soir avec ton tuto, et ca m'as permis de vraiment comprendre les bouts de code que j'avais trouvé ici et la.

Par contre j'aimerais comprendre la logique pour que le menu ne se referme que lorsque la souris n'est plus ni sur le div navigation ni sur le block. en fait j'ai tester pas mal de chose mais soit il se referme lorsque je ne suis plus sur navigation ou alors il ne se ferme pas du tout lol.
Simple probleme de compréhension a mon avis.
Merci les gars et surtout a toi raton

Richard Il y a 2 ans Répondre

Bonsoir

Je viens de découvrir le site et ce tuto qui me convient très bien.
Mais j'ai du mal à enregistrer (disque mou pas rapide)et je suis obliger de revenir en arrière 50 fois avant de bien comprendre.
Ne serait-il pas possible d'avoir le même tuto sur papier.

Merci d'avance de votre réponse

Richard

Badbart Il y a 2 ans - Répondre

Un peu plus de boulot je sais pas trop si c'est ce dont il a le plus besoin

nykoooo Il y a 2 ans Répondre

vraiment simpa

Tinterella Il y a 2 ans Répondre

ENFIN !!!!!! .... un tuto compréhensible, clair, qui pour une débutante est une vrai mine d'or ! merci infiniment... je m'y mets dés demain , puisque aujourd'hui j'ai passé ma journée à tester des tuto on ne plus incomphéhensibles ! qui à la fin me donnait tous le même résultat que je ne voulait pas... bref probablement à demain ! et merci encore

mokless Il y a 2 ans Répondre

merci pour ta réponse si rapide... en effet je vais abandonner cette option qui ne servira pas a grand chose de toute façon ;-)
j'ai pu remarquer un comportement bizarre sur ma page, mon "header" bouge lorsque mon menu descend, j'ai vérifié si mon CSS comporte des "margin" sur le "ul" comme tu avais conseillé un peu plus haut a Shadwolf. je n'en ai pas...
Merci du temps que tu m'a accordé et te souhaite une bonne continuation !

mokless Il y a 2 ans Répondre

bonjour a tous !
Premièrement un grand merci pour ce tuto qui m'a énormément aidé !
Ce que je voudrai ajouté a ce code, c'est que le menu s'enroule lorsque l'on ne pointe plus la souris dessus...
Avec "mouseout"...?
Merci d'avance pour vos réponses !

Grafikart Il y a 2 ans - Répondre

Je te déconseille de le faire tu pourrais avoir des comportement assez bizarre en réponse. Après si tu as compris la logique effectivement il faut utiliser l'évènement mouseOut.

jvb Il y a 2 ans Répondre

Je n'ai pas de margin mais un cellpadding à 0

jvb Il y a 2 ans Répondre

@Shadwolf

Moi aussi j'ai ce petit "bump" qui fait un mouvement plutôt désagréable, seulement, je suis pas un pro du html mais j'essaie de comprendre.
Je n'ai pas de balise <ul> puisqu'elles me crée un retour à la ligne trop important.
Seulement le menu accordéon est intégré dans un fichier html qui utilise un modèle de page que j'ai crée via dreamweaver. Je n'arrive pas à trouver où ça pêche...
Si quelqu'un à une idée...

Grafikart Il y a 2 ans - Répondre

Inspecte avec firebug, le "bump" vient d'un margin dans 90% des cas. Il faut le remplacer par un padding si c'est possible.

le forezien Il y a 2 ans Répondre

Merci, Raton Laveur, je continue dans ma lancée sur tes tutos portant sur Javascript et jQuery: ils me sont d'une grande aide pour un débutant comme moi.

Noa Il y a 2 ans Répondre

Je sais que ce tuto date, mais j'aimerais savoir, est il possible de mettre un fond derrière le menu accordéon ? c'est à dire qu'un fond x se déroule en même temps que le menu ?

Badbart Il y a 2 ans - Répondre

Oui c'est possible.

Sypher Il y a 2 ans Répondre

Super tuto franchement un grand bravo, cependant je n'arrive pas a le faire fonctionner sous du php alors que sous du html cela ne pose aucun souci, les menus défilent correctement. J'ai voulu juste modifier ce code html en spécifiant les titres des ascenseurs avec ma base Mysql sans souci mais maintenant l'animation ne s'effectue plus ?

Sypher Il y a 2 ans - Répondre

je me reponds ^^ j'ai trouvé mon souci juste une petite erreur de syntaxe encore une fois tout marche parfaitement encore bravo bon travail

Alexandre Il y a 2 ans Répondre

C'est The Cinematic Orchestra la musique de fond vers la fin, hein ? : )
Par contre je n'arrive pas à mettre la main sur le précédent tuto cité dans la vidéo. Avec lequel je pourrais comprendre les deux classes bloc, finbloc associées à la div
Merci encore

BORK Il y a 2 ans Répondre

Bonjours !

voila j'ai décider de me mettre à tester les tuto sur jquery celui ci me sembler parfait pour commencer alors j'ai tester et tout suivis !

mais au final rien ne fonctionne :s

j'ai vérifier et coriger toute les petites erreur de frappes mais le contenus du menu est bien cacher mais il n'affiche rien quand je clic avec "Click" ou avec "mouseover" :/

jQuery().ready(function(){

$(".ascenceur").next("div").hide();
$(".ascenceur").mouseover(function(){
if($(this).next("div").is(":hidden")){
$(".ascenceur").next("div:visible").SlideUp();
$(this).next("div").SlideDown();
}
});
});

j'ai bien vérifier mon html pour importer les script java sur la page et le nom de la class="ascenceur" :s

je ne trouve pas pourquoi sa marche pas peut t(on m'aider :s ?

merci !

kaddour Il y a 2 ans Répondre

Bonjour,
tout d'abord bravo pour le tuto.
voila je suis entraint d'apprendre jquery config(firefox + notepad++ et wamp)

voila la syntaxe de fichier mumenu.js
Query().ready(function(){ $("ascenseur").next("div").hide(); });
et j'ai un retour de firebug
" $("ascenseur") is null" et " $("ascenseur").next("div").hide();\r\n"

j'ai fait comme vous les alert"salut" ok cela fonctionne
pouvez vous mindiquez d'ou vient le problème ou simon me mettre sous le bon rail ?

en tout merci d'avance et encore bravo pour les tutos
a+ kad

Grafikart Il y a 2 ans - Répondre

c'est pas plutôt $(".ascenseur") ou $("#ascenseur") ?

aRTHEGONe Il y a 2 ans Répondre

Bonjour,

Je viens de tomber sur ton site, moi qui voulait me lancer sur le JQuery, je suis comblé.

Tutoriel très clair et simple, parfais.

Le code marche nickel.

Par contre une question lors de l'utilisation en mode MOUSE OVER.
Cela fonctionne tres bien MAIS ...

Lorsque l'on bouge rapidement la souris de haut en base a répétition (comme un forcené le menu réagit avec un décalage déroutant.

Existe t'il un moyen de gerer ce OVER rapide afin que si on passe dessus trop vite il ne s'active pas ? (genre appliquer un délai ou autre)...

Merci et TRES bonne continuation à ton site.

Grafikart Il y a 2 ans - Répondre

Effectivement si tu veux affiner le système il faut utiliser un timer qui va permettre de donner un délai et d'éviter ce genre de problème. Cette technique dépend vraiment des cas c'est à toi de trouver un moyen de l'utiliser.

Shadwolf Il y a 2 ans Répondre

Hello l'artiste.

Superbe tutorial j'dois avouer qu'il est absolument excellent.

Cependant j'ai un problème probablement tout con dont j'arrive pas à me dépatir

J'ai finalement, après lecture, mis exactement le même code JS que toi pour tester (j'ai vérifié X fois la syntaxe est totalement fonctionnelle), cependant j'ai un léger problème graphique.

Mon ascenseur marche comme il le doit, cependant, lorsque je remonte mon menu, ma série de sous menu se réaffiche comme elle le doit MAIS j'ai un décalage qui apparait. La liste de sous menu s'affiche bien et lorsqu'elle est affichée j'ai un léger "bump" vers le haut de genre 5px. J'ai tester en modifiant les marges mais rien a faire j'ai se léger bump quand mon sous menu s'affiche.

Une petite idée peut-être ? j'avoue sêcher sur mon problème

Grafikart Il y a 2 ans - Répondre

Ton souci viens d'un margin que tu as placé sur le ul. Remplace le par un pading normalement ça résoud le problème.

mgcrea Il y a 2 ans Répondre

bonjour
excellent car clair,
sinon voila,
j aimerais que lorsque la souris n' est plus sur la catégorie celle ci se referme,
comment faire? mouseout?
thank's

iTom Il y a 2 ans Répondre

Excellent tuto! Bravo

Syrinx Il y a 2 ans Répondre

Bonsoir,

J'essaie désespérément d'améliorer mon site afin d'avoir un menu vertical déroulant. Toutefois, je rencontre 2 problèmes, malgré la qualité du tuto :

1. mon menu comporte des sous-menus qui eux-mêmes comportent des sous menus, donc j'ai un peu de mal à appliquer les formules données dans le tuto

2. je bloque à 8'36 min du tuto car chez moi, (this) et .next ne marchent pas.

J'y ai passé toute la journée, j'ai essayé sur des codes et des menus plus simples. Rien n'y fait, je ne peux avancer car rien ne marche du moment que je mets (this) et/ou next dans mon code javascript.

J'arrête pour aujourd'hui car je suis en train de m'énerver, mais quelqu'un aurait-il une solution ? Qu'au moins je comprenne pourquoi ça marche chez les autres et pas chez moi.

Merci d'avance.

soja Il y a 2 ans Répondre

Merci pour le super tuto mais une petite question...

est-il possible de demander au .js qu'au bout d'un certain moment l'ascenseur remonte tout seul ?
Ou alors qu'un second mouseover ou click referme l'ascenseur ?

Merci !

webnwebie Il y a 2 ans Répondre

merci bcp pour ce tuto super simple, sa donne envie d'en apprendre plus sur le javascript

Toogy Il y a 3 ans Répondre

Les liens sont à nouveau actifs... J'avais oublié de payer mon hébergeur...

flocav Il y a 3 ans Répondre

Comme tout le monde, je dis un grand merci à grafikart pour tous ses tutos.

J'ai le même souci que Yena.
J'ai fait un menu déroulant horizontal, et j'aimerai que tout se referme si la souris n'est plus sur le menu. C'est assez embêtant d'avoir un menu qui reste "déroulé"!

Si quelqu'un a une idée... ;-)

aikinhdo Il y a 3 ans Répondre

Bonjour,

Merci beaucoup pour ce tuto qui est vraiment tres bien fait, et simple à comprendre.
Je suis tombé par hasard sur votre site, et je trouve les tutos tres bien fait.

Merci encore pour votre travail.

Yena Il y a 3 ans Répondre

Bonjour,
Un grand bravo à l'Artiste... Chapeau !
Une question toutefois, et je vous prie de bien vouloir m'excuser si cela a déjà été abordé, j'ai pourtant lu tous les commentaires, mais je ne trouve pas ceci :

Comment adapter le code pour que lorsque la souris n'est plus sur la navigation, cela cache TOUS les soufflets. Là, la dernière div survolée reste ouverte.

J'espère que je m'exprime assez clairement... et que vous pourrez m'éclairer à ce sujet. J'ai bien visité jQuery, mais l'anglais et moi.......
Merci
Yena
PS : Toogy, les liens ne sont plus actifs ?

Petit Raptor Il y a 3 ans Répondre

Merci pour ce merveilleux tuto qui m'aura bien aidé il faut l'avouer.

Je cherche quand même à le modifier, j'ai essayer plusieurs petites choses sans résultat probants.

Je cherche à cacher les ul quand je clique sur un h1 ouvert (car avec le code que tu à donner quand je clique dessus, cela ne fait rien ^^)

et je cherche aussi à pouvoir faire des sous-menu.

Je m'explique:

h1: les membres
ul
ul: Petit Raptor
li: informations
li: contact
ul: Nirvana
li: Informations
li: Contact

etc..

je voudrais que quand je clique sur les membres, on voi Petit Raptor et Nirvana et que quand je clique sur l'un des deux, informations et contact apparraissent.

Cordialement.

Syl20 Il y a 3 ans Répondre

Un très bon tuto, clair et bien expliqué. Merci à toi !

Scorpyo Il y a 3 ans Répondre

Bravo à Toi, tu expliques vraiment de manière pédagogique ta méthode.
Très enrichissante cette vidéo.

usama Il y a 3 ans Répondre

dsl
j sais que c'est une question un peu stupide
mais j'ai fait plusieurs essaies
mais c'était completement raté
j m demandais si il fau modifier l css
pour l" assenceur est tout

cordialement
et merci davanc pr la repons fin j'esper que ça soit rapid vu que je doi presenter mon site demain comme projet d fin d anné : S

74MaTT Il y a 3 ans Répondre

Merci à toi pour ce tuto !

Je reprends le gout du css.

J'aimerais savoir si tu as un tuto pour créer des images (boutons...) avec photoshop ou gimp? (Je ne fais pas trop de graphisme dans mon boulot)

Encore merci.

Shotaro Il y a 3 ans Répondre

Salut !

Je viens te dire un grand merci ! Moi qui avait en horreur l'aspect dev d'un site web je viens de m'y remettre et tu m'as grandement aidé !

Grâce à tes tutos très clair et concis j'aborde ce genre de chose avec sérénité et calme ^^

Je mélange un peu tout ce qu'on trouve ici et j'ai été capable de mettre en place ce fameux menu accordéon en le couplant avec le menu déroulant CSS que tu as proposé également. Ainsi je garde un menu sympa que les visiteurs aient javascript d'activé ou pas. Pour le menu js, j'ai même réussi de moi-même à implémenter un mouseout afin que le menu se replie si la souris le quitte.

Ca peut faire sourire mais j'en suis très fier ^^. Encore merci ! Grâce à toi, le défi que je me suis lancé de créer mon site web rien qu'avec le bloc-note avance à grand pas !

Prochaine étape : mâtiner tout ça de php ^o^

Shotaro.

yosteph38 Il y a 3 ans Répondre

J'ai vu des accordéons à rallonge, mais la musique n'a jamais été aussi belle qu'avec celui là !
Et pour cause : 9 lignes de code !
Un grand bravo.

Lefoudusucre Il y a 3 ans Répondre

Je sais que c'est un tuto qui date mais je n'arrête pas de le revoir encore et encore, je crois que c'est un de mes préférés.

jp.bond Il y a 3 ans Répondre

je viens d'utiliser le bout de code de Toogy et ca marche dejà mieux, bien que certaines sous-cat restent ouverts quand on ouvre une autre sous-cat ... mais je me rapproche !! :
jQuery().ready(function(){
$('.ascenseur').next('div').hide();
$('.ascenseur').mouseover(function (){
if($(this).next('div').is(':hidden')) {
$('.ascenseur').next('div:visible').slideUp();
$('.ascenseuron').next('div:visible').slideUp();
$(this).next('div').slideDown();
}

else if($(this).next('div').is(':visible')) {
$(this).next('div').slideUp();
}
});
$('.ascenseuron').mouseover(function (){
if($(this).next('div').is(':hidden')) {
$(this).next('div').slideDown();
}
else if($(this).next('div').is(':visible')) {
$(this).next('div').slideUp();
}
});

obit Il y a 8 mois - Répondre

Salut jp.bond,
même si cela fait quelque temps que tu as posté ton dernier commentaire, j'ai le même problème et voudrais savoir comment finalement tu t'en est sorti. j'ai pris ton code, mais effectivement il reste quelque bug.
Je suis un néophyte en JS, et c'est vrai que à comprendre .... pas facile.

Merci à toi, à vous.
Obit.

jp.bond Il y a 3 ans Répondre

salut et merci pour ce merveilleux tuto.

je rebondis sur une des remarques car moi aussi j'ai besoin de faire une sous catégorie dans mon menu :
Grafikart a écrit :"Pour faire simple tu peux mettre des ascenseur imbriqué ça sera le plus simple. Sinon tu peux utiliser d'autres technique mais ça sera plus compliqué."

lorsque j'imbrique les ascenseurs, et que j'essaye de survoler ma sous cat pour qu'elle s'ouvre, malheureusement c'est la catégorie qui se ferme, et qui cache donc la sous cat qui s'est ouverte

une idée ? je pense que le code ascenseur.js n'est pas adapté mais j'ai un peu de mal avec ce code...

merci

Lefoudusucre Il y a 3 ans Répondre

Merci pour ce tuto qui me sera très utile.
Encore merci pour tout ce que tu fais =)

FeNo Il y a 3 ans Répondre

Bonjour ,
j'ai des petit problème , mon java sur firefox est activer , j'ai fait au moin 3 fois la manipulation pour faire le menu accordéon et des dizaine de aletre ^^
J'ai vérifier c'est bien l'URL : <script type="text/javascript" src="js/jquery-1.3.min.js"> </script>
<script type="text/javascript" src="js/asc.min.js"> </script> (la déclaration des documents js ...)

Sinon très bien tes tutos je suis passer de quelqu'un qui savait faire que du html pas valide a des page avec php ect ^^
Vraiment progresser grand merci , bonne réussite et surtout a bientôt pour un prochain tuto ^^
Cordialement FeNo .

Romeo Il y a 3 ans Répondre

Bonsoir,
Très bon tutoriel, surtout CLAIR.
Sinon j'ai une question ayant peu de rapport avec celui-ci : sur Notepad++, j'ai vu que lorsque vous tapiez un code, une liste s'affiche (comme je ne suis pas un expert en code, celle-ci me serait utile). Je suppose qu'il y a un mode où cliquer. Pouvez-vous me dire où cela se situe-t-il ?
Merci encore pour le tutoriel.

Stekino Il y a 3 ans Répondre

Merci Toogy, j'ai pu voir comment tu as procédé et c'est très intéressant, j'ai quand même mis un peu de temps à comprendre que le headon est rajouté manuellement sur les pages pour permettre de garder le menu ouvert lol

Merci encore

Toogy Il y a 3 ans Répondre

Précisions : Pour comprendre mon utilisation il faut posséder quelques petites connaissances en PHP ^^

Toogy Il y a 3 ans Répondre

Bonjour, je suis ravi que les modifications que j'ai faites sur ce tutoriel intéressent. ^^

Voici donc un lien vers un fichier .ZIP : http://toogy.fr/Laboratoires/Javascript/Acordeon.zip

Stekino Il y a 3 ans Répondre

Re,

encore un excellent tuto que je n'ai pas hésité à intégrer dans un de mes sites, serait il possible d'avoir le mail de toogy ? ou bien qu'il fasse partager ses découvertes car cela m'intéresse beaucoup

merci d'avance

Grafikart Il y a 3 ans Répondre

@Myk' D : Tu aurais un lien où on peut voir le problème ?

Myk' D Il y a 3 ans Répondre

Bonsoir,

Moi j'ai un soucis ... j'ai bien suivis le tuto et le script marche sur ma page index. Je veut aussi l'utiliser sur ma page galerie.php mais la ça ne marche pas ... il n'y a aucune raison (le script est bien chargé) et même si j'utilise exactement le même code que ma page index ... je ne comprend pas

Pouvez vous m'aider ?

Merci !

Viseth Il y a 3 ans Répondre

Tuto simple et claire.
Je découvre cette librairie pour la première fois, et ça m'encourage d'en apprendre plus.
Bravo et merci pour tes tutos ^^

Toogy Il y a 3 ans Répondre

Merci ! ^^

J'ai maintenant rajouté un corps qui s'affiche à chaque chargement de page avec un fadeIn : http://toogy.fr/Laboratoires/Javascript/page.php

Grafikart Il y a 3 ans Répondre

@Toogy : Très bonne appropriation du script. Ça fait plaisir de voir des choses comme ça

Toogy Il y a 3 ans Répondre

Donc je disais ici : http://toogy.fr/Laboratoires/Javascript/page.php?page=services .

Modifications apportées :
• lorsque l'on re-clique sur un menu, ça le cache
• lorsque l'on change de page, ça affiche le menu qui contient le lien en question et ça change l'apparence de celui-ci.

J'ai donc ajouté:
• quelques lignes de PHP dans la page
• quelques lignes javascript

Reg Il y a 3 ans Répondre

Merci pour tout pour ce petit tuto simple, précis et sans prétention et le tout avé l'accent qui chante.
Je découvre Jquery et c'est ce genre de tutos qui donne envie d'aller plus loin avec cette librairie

Sinon pour Ant, et pour ceux que cela pourrait intéresser, j'ai une petite solution :
il suffit de donner une class à la div principale de ton 1e menu (ex : <div class="ouvert">) et de rajouter en dessous de la ligne de code :

$(".ascenseur").next("div").hide();

la ligne :

$(".ouvert").show();

ainsi dans un 1e temps tous les menus seront fermés puis ensuite le 1e sera ouvert immédiatement (ce qui n'est pas perceptible à l'oeil car instantané).

Cette technique n'est peut-être pas très propre mais fonctionne bien

Bonne continuation à toi Jonathan

Guin's Il y a 3 ans Répondre

Merci beaucoup pour ce tuto, j'ai un projet a faire et je suis sur que sa va m'aider !!

starsky Il y a 3 ans Répondre

Salut,
Et merci beaucoup de prendre du temps pour les tutoriaux très bons et efficaces.

Grafikart Il y a 3 ans Répondre

@Ant: Faudrait voir la doc jQuery et tu sélectionne le menu que tu ne veux pas masquer. Par exemple en faisant:
$(".ascenseur:first").next("div").show();
Pour afficher le premier menu.

Je ne suis pas sur mais c'est un truc du genre.

Ant Il y a 3 ans Répondre

Tu n'as pas d'idée?

@+

Ant Il y a 3 ans Répondre

Salut,

En fait, j'aimerai ouvrir juste un seul menu. Car là, tous les menus s'ouvrent.

Merci.
@+

Grafikart Il y a 3 ans Répondre

@Ant: Te suffit de supprimer la ligne au début qui se charge de cacher les div.

$(".ascenseur").next("div").hide();

PS: Il faut regarder le tuto et ne pas prendre le script direct.Ca m'évitera de me répéter.

Ant Il y a 3 ans Répondre

Salut,

Merci pour ce script.
J'aimerai savoir comment faire pour ouvrir un menu par défaut au chargement de la page?

Merci d'avance.

Grafikart Il y a 3 ans Répondre

@mackean : Il te suffit de remplacer le mouseover par un click

mackean Il y a 3 ans Répondre

Bravo,
super tuto trés compréhensible. Enfin un en français!!. Une question si tu me le permet?
Comment puis-je faire pour que les div cachées apparaissent seulement lorsqu'on clic et non lorsque qu'on les survolent?

Encore un grand merci et un bravo pour ce tuto.

Grafikart Il y a 3 ans Répondre

Pour faire simple tu peux mettre des ascenseur imbriqué ça sera le plus simple. Sinon tu peux utiliser d'autres technique mais ça sera plus compliqué.

Xoran Il y a 3 ans Répondre

Bonjour,

Avant toute chose je tiens à te remercier pour tes excellent tutos ainsi que pour les connaissances que tu partages avec la communauté.

En deuxième lieu, j'aurais voulu savoir si il était possible d'appliquer cette technique sur un menu dont la structure est à 3 niveaux au lieu de deux dans ton tuto et comment m'y prendre.

D'avance un grand merci !

Grafikart Il y a 3 ans Répondre

@Siam: Pour changer un attribut CSS tu peux utiliser la fonction CSS. Je te renvois sur la doc de jQuery pour plus d'explications :
http://docs.jquery.com/CSS
Mais d'autres tutoriels sur jQuery arriveront bientôt et répondront surement à ta question.

Siam Il y a 3 ans Répondre

Tuto génial, c'est exactement ce qu'il me fallait ! Cependant, je me pose une petite question : sachant que j'utilise l'attribut .click et non pas .mouseover, comment attribuer des propriétés css au h1 sélectionné ?

Je suis une débutante, je suppose que ça doit être facile, mais je vois pas du tout...

artkabis Il y a 3 ans Répondre

Salut raton laveur, tu as encore réalisé un super tuto, vraiment didactique. Moi qui ne connaissais pas jQuerie, je suis surpris par les possibilités de cette bibliothèque. Merci pour ce partage!!!!!

Je voulez juste apporter une toute, mais alors toute petite correction au fichier .CSS proposé en bas du tutoriel.

Car dans le fichier: "style.css" à la ligne 180 il faut modifier la valeur de width en lui attribuant 518px au lieu des 517px originel, autrement le footer aura un décalage de 1 pixel (en tout cas sur le navigateur "internet explorer").

Il faut donc corriger le début de la partie "footer"

Voilà et encore un grand merci pour les tutoriels de qualité que tu nous offres .

TaeKdesign Il y a 3 ans Répondre

Bonjour, je vous remercie pour tout ces bons tutoriaux. Grâce a vous, j'ai appris l'HTML et le CSS où je me sens a l'aise maintenant. Et grâce a celui-ci sur le javascripts, j'ai envie de m'y mettre a fond en javascript.

Merci beaucoup et surtout, bonne continuation. J'attends vos prochains tutoriaux avec grand plaisir.

Billy_ShoOT Il y a 3 ans Répondre

bonjour à vous, débutant sur le langage html,css et autre je recherchais comment faire ce type de menu, je ne vais pas vous apprendre quelque chose de nouveau si je vous dit que votre tuto est tres bien realisé, clair et compréhensible si vous en avez d'autre je suis preneur merci

blas Il y a 3 ans Répondre

Merci beaucoup pour ce tuto, le javascript est quelque chose de très puissant mais souvent compliqué, grâce à toi ça semble plus simple :D
J'attends un prochain tuto avec impatience.

BacKtopA Il y a 3 ans Répondre

t'es tuto sont vraiment cool man c'est bien de partager le savoir go on Mf et pour les visiteur un clic par jour sur un google sense pour Remercier le Raon laveuR c la moindre des chose

Julien Il y a 3 ans Répondre

Bravo encore un tuto d'excellente qualité...
Tout parait simple quand tu l'explique, tu es un excellent pédagogue
En tout cas merci pour tout ce contenu de qualité.

Jeffrey Il y a 3 ans Répondre

Merci beaucoup pour ce tutoriel, je débute avec jQuery et ça permet d'y entrer en douceur

neopreine peut être que ceci pourra t'intéresser (c'est plutôt une naviguation par onglets mais ça se rapproche du menu horizontale) http://jqueryfordesigners.com/coda-slider-effect/

Vincent Il y a 3 ans Répondre

Bravo pour tout ce que tu fais sur ce site, c'est vraiment top !

Bonne continuation

Grafikart Il y a 3 ans Répondre

Oui, on peut adapter ce code pour une disposition horizontalement mais il faudra utiliser des fonctions différentes de slideUp et slideDown.

neopreine Il y a 3 ans Répondre

Bonjour,

Avant tout un GRAND MERCI pour ces tutoriels clairs et précis
J'ai appris plus avec les vidéos que depuis je m'interresse au webdesign (4 mois).

J'aimerai savoir si ce MENU verticale peut-être adapté horizontalement ?

Précision je n'y connais RIEN de chez RIEN en language JAVASCRIPT

Merci d'avance

junior2 Il y a 3 ans Répondre

c'est génial on est le 14 août et la vidéo a été réalisé le 14 août !
Grâce à toi j'ai découvert jquery merci beaucoup !!!!

Je voudrais bien encore un autre tuto

Ravi Il y a 3 ans Répondre

a ta réussit à le encoder :p

si non tuto bien expliquer ^^

comme le commentaire suivant encore des tutos et encore si ta le temps

Speer0 Il y a 3 ans Répondre

Rien à dire, tutoriel encore très bien fait et très compréhensible
Un grand bravo à notre raton laveur préféré !

PS : Encore des tutos, encore des tutos !

Tutoriel Vidéo jQuery : Menu Accordéon

Masonry

Décompte Javascript