leger probleme avec un menu accordeon Résolu/Fermé

Question

bonsoir a tous 
j ai trouve un super menu accordeon mais que je desire utiliser a deux endroits differents sur ma page web 
j ai donc creer deux feuilles de style differentes et ajouter 2 a la fin de chaque classe
mais les effets ne fonctionne pas pour ce deuxieme menu

qui peux m expliquer pourquoi 

merci de l aide

1 er code


.navigation {
  margin: 0;
  padding: 0;
  list-style: none;
  background: #FFF;
  color: #FFF;
  width: 700px;
  font: 1.2em "Trebuchet MS", sans-serif;
}
.navigation a, .navigation span {
  display: block;
  padding: 4px 10px;
  color: #000000;
  text-decoration: none;
  background: #F7DFFF 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: #3E78FD;;
}
.navigation a:hover {
  text-decoration: underline;
}
 .navigation a:focus{
  text-decoration: underline;
}
.navigation a:active {
   background: #3E78FD;
}
.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;
}



2 eme code

.navigation 2 {
  margin: 0;
  padding: 0;
  list-style: none;
  background: #FFF;
  color: #FFF;
  width: 250px;
  font: 1.2em "Trebuchet MS", sans-serif;
}
.navigation a 2, .navigation span 2 {
  display: block;
  padding: 4px 10px;
  color: #000000;
  text-decoration: none;
  background: #F7DFFF url(menu-item.png) left bottom no-repeat;
}
.navigation2 .toggleSubMenu a 2, .navigation .toggleSubMenu span 2 {
  background-image: url(menu-item-deroule.png);
}
.navigation .open a 2, .navigation .open span 2 {
  background-image: url(menu-item-enroule.png);
}
.navigation a:hover 2, .navigation a:focus 2, .navigation a:active 2 {
  text-decoration: underline;
}
.navigation .subMenu 2 {
  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 2 {
  background: none;
  padding: 3px 20px;
}

Varaldi Q · Answer

Ton menu doit être en javascript, tu as changé les fonctions ?

flexi2202 · Answer

merci pour la reponse non le seul javascript que j ai c est ouppsss desole le code javascript est et en html ceci

Varaldi Q · Answer

Essai de mettre les mêmes codes sans rien changer d'abord.

A mon avis, ton code utilise des éléments selon leur nom, donc si tu les changes (cas du 2eme menu), il ne les reconnaîtra plus

DarkenNights · Answer

Pour moi c'est l'id ou la classe que tu utilise qui coince. En effet pour moi .navigation 2, le css ne pourra pas le comprendre. Il Faudrait que dans ton php tu appel ta classe navigation2 et que dans le css ce soit .navigation2

Je sais pas si c'est clair et si ce que je dis est correct ^^

flexi2202 · Answer

j ai essaye de changer en effet le code html en navigation2 et le code csc en navigation2 et cela n avait pas fonctionner
disons que dans un premier temps je souhaiterais pour voir si cela fonctionne changer la valeur width: 200px; du css
vous pensez qu en changeant juste navigation en navigation2 cela serait assez pour faire ce changement 

puis je ajouter navigation2 dans le style css actuel et voir ce que cela donnerait en appelant navigation2 en html

mais en javascript je devrais rien changer d après vous

flexi2202 · Answer

avec navigation2 cela a l air de fonctionner 
a present j appelle encore 2 class différentes qui sont 
<li class="toggleSubMenu">
et 
class="subMenu">

j ai changer ceci dans le css et dans mon code html ,la dimension change bien dans la class navigation2 mais mon effet accordéon a disparu

.navigation2 {
  margin: 0;
  padding: 0;
  list-style: none;
  background: #FFF;
  color: #FFF;
  width: 500px;
  font: 1.2em "Trebuchet MS", sans-serif;
}
.navigation .toggleSubMenu2 a, .navigation .toggleSubMenu2 span {
  background-image: url(menu-item-deroule.png);
}

.navigation .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;
}

merci de l aide

DarkenNights · Answer

Alors tu dois faire la meme chose avec ton subMenu 2 tu le transforme en subMenu2 et en plus de cela ton navigation d'après le php que tu nous a donné c'est pas une class mais un id donc dans ton css ce sera un # et non un .

Voila :)

flexi2202 · Answer

merci des reponses je vais peut etre paraitre idiot mais je ne retrouve plus le submenu 2 je me suis peut trompe en recopiant les codes tantôt donc je redonne les codes en css .navigation2 { margin: 0; padding: 0; list-style: none; background: #FFF; color: #FFF; width: 500px; font: 1.2em "Trebuchet MS", sans-serif; } .navigation2 .toggleSubMenu2 a, .navigation .toggleSubMenu2 span { background-image: url(menu-item-deroule.png); } .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; } .navigation { margin: 0; padding: 0; list-style: none; background: #FFF; color: #FFF; width: 700px; font: 1.2em "Trebuchet MS", sans-serif; } .navigation a, .navigation span { display: block; padding: 4px 10px; color: #000000; text-decoration: none; background: #F7DFFF 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: #3E78FD;; } .navigation a:hover { text-decoration: underline; } .navigation a:focus{ text-decoration: underline; } .navigation a:active { background: #3E78FD; } .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; } en javascript et ma page html

Frais

DarkenNights · Answer

Ton code commence par ca:

$(document).ready( function () {
        // 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>') ;
        } ) ;

Mais il faudrait peut etre le faire pour le deuxieme menu aussi :)

flexi2202 · Answer

oui il commence par ce que tu viens d écrire enfin en javascript

avec ceci en debut de code <script type="text/javascript">

merci pour l aide

DarkenNights · Answer

Mais il faudrait peut etre le faire pour le deuxieme menu aussi :)

C'est ce que j'ai ecrit à la fin de mon message précédent il faudrait peut etre tout lire quand meme...

flexi2202 · Answer

desole j avais lu ta reponse mais en comparant es debuts j ai l impression qu ils sont pareil merci pour l aide donc mon nouveau code serait

DarkenNights · Answer

Non ce que tu as rajouter c'est ton code existant il faut que tu fasse le copier coller que tu as fait mais en remplacant par subMenu2, ToggleMenu2 etc...

Essaye juste de reflechir quand meme :)

flexi2202 · Answer

merci pour le soutien
desole je faisais juste comme tu avais dit c est vrai que cela me semblait bizarre
voici donc mon nouveau code
mais cela ne fonctionne pas tout a fait
en fait le menu accordéon est bien replier quand j arrive sur ma page
mais quand je clic sur un menu , celui ci s ouvre et se referme aussi vite

voici le code modifie

$(document).ready( function () {
        // 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 "toggleSubMenu" :
        $("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") } );
                $("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;
        });
         $("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;
        });
     } ) ;
    $(document).ready( function () {
        // 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") } );
                $("ul.subMenu2").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;
        });
         $("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;
        });
     } ) ;
    // -->

et le code css modifie

.navigation2 {
  margin: 0;
  padding: 0;
  list-style: none;
  background: #FFF;
  color: #FFF;
  width: 700px;
  font: 1.2em "Trebuchet MS", sans-serif;
}
.navigation2 a, .navigation2 span {
  display: block;
  padding: 4px 10px;
  color: #000000;
  text-decoration: none;
  background: #F7DFFF 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: #3E78FD;;
}
.navigation2 a:hover {
  text-decoration: underline;
}
 .navigation2 a:focus{
  text-decoration: underline;
}
.navigation2 a:active {
   background: #3E78FD;
}
.navigation2 .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;
}
.navigation2 ul.subMenu a {
  background: none;
  padding: 3px 20px;
}


.navigation {
  margin: 0;
  padding: 0;
  list-style: none;
  background: #FFF;
  color: #FFF;
  width: 700px;
  font: 1.2em "Trebuchet MS", sans-serif;
}
.navigation a, .navigation span {
  display: block;
  padding: 4px 10px;
  color: #000000;
  text-decoration: none;
  background: #F7DFFF 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: #3E78FD;;
}
.navigation a:hover {
  text-decoration: underline;
}
 .navigation a:focus{
  text-decoration: underline;
}
.navigation a:active {
   background: #3E78FD;
}
.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;
}

DarkenNights · Answer

$(document).ready( function () {

Tu ne dois l'ecrire qu'une seul fois et au tout debut de ton fichier :)

Donc du coup tu laisse le premier et tu supprime le deuxieme que tu as ecrit

flexi2202 · Answer

merci pour l aide
j ai fait ce que tu m as dis
j ai enlevé
ceci le deuxieme
$(document).ready( function () {


mais a présent le menu reste ouvert des j ouvre ma page web

ne devrais je pas enlever une } quelque part

DarkenNights · Answer

Si le }); juste au dessus du $(document).ready( function () {  que tu a enlever :)

flexi2202 · Answer

merci pour toute l aide mais a présent le deuxième menu ne s ouvre plus du tout voici un code expérimental Menu accordéon avec jQuery

DarkenNights · Answer

Je regarde et je te dit apres!

DarkenNights · Answer

Tu peux m'envoyer les images dont tu as besoin dans ce bout de code par mail stp: lenormandt@eisti.eu

J'arrive pas à regarder le code sous ce format la :s

Merci

flexi2202 · Answer

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"

DarkenNights · Answer

Menu accordéon avec jQuery Voila c'est bon ca marche !

flexi2202 · Answer

nickel un tout grand merci c est vraiment sympa 
mais peux tu me dire ou cela coinçait exactement stp

merci

DarkenNights · Answer

Sur ce bout de code :


$("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;
            });

flexi2202 · Answer

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

DarkenNights · Answer

No soucis!

Bonne continuation

flexi2202 · Answer

merci a toi aussi 
bonne continuation 
et bonne soiree

Leger probleme avec un menu accordeon

27 réponses

Discussions similaires