Leger probleme avec un menu accordeon
Résolu/Fermé
A voir également:
- Leger probleme avec un menu accordeon
- Menu déroulant excel - Guide
- Menu démarrer windows 11 - Guide
- Canon quick menu - Télécharger - Utilitaires
- Menu demarrer - Guide
- Menu contextuel windows 11 - Guide
27 réponses
merci pour le temps et l aide
euhhh je n utilise pas d image
voici le lien par contre ou j ai trouve le code
j ai juste lancer la démo ensuite sous firefox
j ai fait code source de la page que j ai copie dans notepad
ensuite je l ai duplique
les seules images qu il existe sont sur cette page
https://www.alsacreations.com/tuto/lire/603-Creer-un-menu-accordeon-avec-jQuery.html"
euhhh je n utilise pas d image
voici le lien par contre ou j ai trouve le code
j ai juste lancer la démo ensuite sous firefox
j ai fait code source de la page que j ai copie dans notepad
ensuite je l ai duplique
les seules images qu il existe sont sur cette page
https://www.alsacreations.com/tuto/lire/603-Creer-un-menu-accordeon-avec-jQuery.html"
DarkenNights
Messages postés
134
Date d'inscription
jeudi 2 mai 2013
Statut
Membre
Dernière intervention
17 décembre 2013
10
22 juin 2013 à 21:27
22 juin 2013 à 21:27
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Menu accordéon avec jQuery</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style type="text/css"> #navigation2 { margin: 0; padding: 0; list-style: none; background: #000; color: #fff; width: 200px; font: 1.2em "Trebuchet MS", sans-serif; } #navigation2 a, #navigation2 span { display: block; padding: 4px 10px; color: #fff; text-decoration: none; background: #000 url(menu-item.png) left bottom no-repeat; } #navigation2 .toggleSubMenu2 a, #navigation2 .toggleSubMenu2 span { background-image: url(menu-item-deroule.png); } #navigation2 .open a, #navigation2 .open span { background-image: url(menu-item-enroule.png); } #navigation2 a:hover, #navigation2 a:focus, #navigation2 a:active { text-decoration: underline; } #navigation2 .subMenu2 { font-size: .8em; background: #ccc url(subMenu.png) 0 0 repeat-x; font-size: .9em; margin: 0; padding: 0; border-bottom: 1px solid #666; } #navigation2 ul.subMenu2 a { background: none; padding: 3px 20px; } #navigation { margin: 0; padding: 0; list-style: none; background: #000; color: #fff; width: 200px; font: 1.2em "Trebuchet MS", sans-serif; } #navigation a, #navigation span { display: block; padding: 4px 10px; color: #fff; text-decoration: none; background: #000 url(menu-item.png) left bottom no-repeat; } #navigation .toggleSubMenu a, #navigation .toggleSubMenu span { background-image: url(menu-item-deroule.png); } #navigation .open a, #navigation .open span { background-image: url(menu-item-enroule.png); } #navigation a:hover, #navigation a:focus, #navigation a:active { text-decoration: underline; } #navigation .subMenu { font-size: .8em; background: #ccc url(subMenu.png) 0 0 repeat-x; font-size: .9em; margin: 0; padding: 0; border-bottom: 1px solid #666; } #navigation ul.subMenu a { background: none; padding: 3px 20px; } </style> <!--[if lte IE 6]> <style type="text/css"> li { height: 1px; } </style> <![endif]--> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript"> <!-- $(document).ready( function () { // parie du code non modifie // On cache les sous-menus // sauf celui qui porte la classe "open_at_load" : $("ul.subMenu:not('.open_at_load')").hide(); // On selectionne tous les items de liste portant la classe "toggleSubMenu" // et on remplace l'element span qu'ils contiennent par un lien : $("li.toggleSubMenu span").each( function () { // On stocke le contenu du span : var TexteSpan = $(this).text(); $(this).replaceWith('<a href="" title="Afficher le sous-menu">' + TexteSpan + '</a>') ; } ) ; // On modifie l'evenement "click" sur les liens dans les items de liste // qui portent la classe "toggleSubMenu" : $("li.toggleSubMenu > a").click( function () { // Si le sous-menu etait deja ouvert, on le referme : if ($(this).next("ul.subMenu:visible").length != 0) { $(this).next("ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") } ); } // Si le sous-menu est cache, on ferme les autres et on l'affiche : else { $("ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") } ); $(this).next("ul.subMenu").slideDown("normal", function () { $(this).parent().addClass("open") } ); } // On empêche le navigateur de suivre le lien : return false; }); // On cache les sous-menus // sauf celui qui porte la classe "open_at_load" : $("ul.subMenu2:not('.open_at_load')").hide(); // On selectionne tous les items de liste portant la classe "toggleSubMenu" // et on remplace l'element span qu'ils contiennent par un lien : $("li.toggleSubMenu2 span").each( function () { // On stocke le contenu du span : var TexteSpan = $(this).text(); $(this).replaceWith('<a href="" title="Afficher le sous-menu">' + TexteSpan + '</a>') ; } ) ; // On modifie l'evenement "click" sur les liens dans les items de liste // qui portent la classe "toggleSubMenu2" : $("li.toggleSubMenu2 > a").click( function () { // Si le sous-menu etait deja ouvert, on le referme : if ($(this).next("ul.subMenu2:visible").length != 0) { $(this).next("ul.subMenu2").slideUp("normal", function () { $(this).parent().removeClass("open") } ); } // Si le sous-menu est cache, on ferme les autres et on l'affiche : else { $("ul.subMenu2").slideUp("normal", function () { $(this).parent().removeClass("open") } ); $(this).next("ul.subMenu2").slideDown("normal", function () { $(this).parent().addClass("open") } ); } // On empêche le navigateur de suivre le lien : return false; }); } ) ; // --> </script> </head> <body>
Voila c'est bon ca marche !
nickel un tout grand merci c est vraiment sympa
mais peux tu me dire ou cela coinçait exactement stp
merci
mais peux tu me dire ou cela coinçait exactement stp
merci
DarkenNights
Messages postés
134
Date d'inscription
jeudi 2 mai 2013
Statut
Membre
Dernière intervention
17 décembre 2013
10
22 juin 2013 à 21:36
22 juin 2013 à 21:36
Sur ce bout de code :
tu avait ecrit :
$("li.toggleSubMenu2 > a").click( function () {
// Si le sous-menu etait deja ouvert, on le referme :
if ($(this).next("ul.subMenu2:visible").length != 0) {
$(this).next("ul.subMenu2").slideUp("normal", function () { $(this).parent().removeClass("open") } );
}
// Si le sous-menu est cache, on ferme les autres et on l'affiche :
else {
$("ul.subMenu2").slideUp("normal", function () { $(this).parent().removeClass("open") } );
$(this).next("ul.subMenu2").slideDown("normal", function () { $(this).parent().addClass("open") } );
}
// On empêche le navigateur de suivre le lien :
return false;
});
tu avait ecrit :
$("li.toggleSubMenu2 > a").click( function () {
// Si le sous-menu etait deja ouvert, on le referme :
if ($(this).next("ul.subMenu:visible2").length != 0) {
$(this).next("ul.subMenu2").slideUp("normal", function () { $(this).parent().removeClass("open") } );
}
// Si le sous-menu est cache, on ferme les autres et on l'affiche :
else {
$("ul.subMenu2").slideUp("normal", function () { $(this).parent().removeClass("open") } );
$(this).next("ul.subMenu2").slideDown("normal", function () { $(this).parent().addClass("open") } );
}
// On empêche le navigateur de suivre le lien :
return false;
});
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
ah mince , pffffffffffff quelle boulette , pourtant j avais vérifier et revérifier
enfin le voila encore un peu plus riche dans ma tete ,je viens d apprendre quelque chose
un immense mega merci
enfin le voila encore un peu plus riche dans ma tete ,je viens d apprendre quelque chose
un immense mega merci
DarkenNights
Messages postés
134
Date d'inscription
jeudi 2 mai 2013
Statut
Membre
Dernière intervention
17 décembre 2013
10
22 juin 2013 à 21:48
22 juin 2013 à 21:48
No soucis!
Bonne continuation
Bonne continuation