Leger probleme avec un menu accordeon [Résolu/Fermé]

Signaler
-
 flexi2202 -
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;
}

27 réponses


Ton menu doit être en javascript, tu as changé les fonctions ?
merci pour la reponse

non le seul javascript que j ai c est
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
ouppsss desole le code javascript est

 <!--
    $(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 en html
ceci
<ul id="navigation 2">
 
       
      
        <li style="position: static;" class="toggleSubMenu 2"><a href="#nogo" title="Afficher le sous-menu">Item 3</a>
            <ul style="display: block;" class="subMenu 2">
                <li><!-- colone image article 7-->
 
 <tr >.........................................</li>
               
    </ul>    

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
Messages postés
138
Date d'inscription
jeudi 2 mai 2013
Statut
Membre
Dernière intervention
8 mai 2014
12
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 ^^
Profil bloqué
Je partage aussi ton avis
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
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
Messages postés
138
Date d'inscription
jeudi 2 mai 2013
Statut
Membre
Dernière intervention
8 mai 2014
12
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 :)
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

<!--
    $(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 ma page html

<ul class="navigation2">

  <li class="toggleSubMenu2"><span style="background-color: #F7DFFF;">Frais </span>
    <ul class="subMenu2"
>
Messages postés
138
Date d'inscription
jeudi 2 mai 2013
Statut
Membre
Dernière intervention
8 mai 2014
12
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 :)
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
Messages postés
138
Date d'inscription
jeudi 2 mai 2013
Statut
Membre
Dernière intervention
8 mai 2014
12
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...
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

<script type="text/javascript">
$(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>') ;
} ) ;


<!--
$(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;
});
} ) ;
// -->

</script">
Messages postés
138
Date d'inscription
jeudi 2 mai 2013
Statut
Membre
Dernière intervention
8 mai 2014
12
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 :)
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;
}
Messages postés
138
Date d'inscription
jeudi 2 mai 2013
Statut
Membre
Dernière intervention
8 mai 2014
12
$(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
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
Messages postés
138
Date d'inscription
jeudi 2 mai 2013
Statut
Membre
Dernière intervention
8 mai 2014
12
Si le }); juste au dessus du $(document).ready( function () { que tu a enlever :)
merci pour toute l aide
mais a présent le deuxième menu ne s ouvre plus du tout

voici un code expérimental


<!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 () {
        // 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.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;
        });
    // 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;
        });
    
    } ) ;
    // -->
    </script>
</head>
<body>
    <ul id="navigation">
        <li><a href="" title="">Item 1</a></li>
        <li class="toggleSubMenu"><span>Item 2</span>
            <ul class="subMenu">
                <li><a href="" title="">Item 2.1</a></li>
                <li><a href="" title="">Item 2.2</a></li>
                <li><a href="" title="">Item 2.3</a></li>
            </ul>
        </li>
        <li class="toggleSubMenu"><span>Item 3</span>
            <ul class="subMenu">
                <li><a href="" title="">Item 3.1</a></li>
                <li><a href="" title="">Item 3.2</a></li>
            </ul>
        </li>
        <li><a href="" title="">Item 4</a></li>
    </ul> 

<br>


<ul id="navigation2">
        <li><a href="" title="">Item 1</a></li>
        <li class="toggleSubMenu2"><span>Item 2</span>
            <ul class="subMenu2">
                <li><a href="" title="">Item 2.1</a></li>
                <li><a href="" title="">Item 2.2</a></li>
                <li><a href="" title="">Item 2.3</a></li>
            </ul>
        </li>
        <li class="toggleSubMenu2"><span>Item 3</span>
            <ul class="subMenu2">
                <li><a href="" title="">Item 3.1</a></li>
                <li><a href="" title="">Item 3.2</a></li>
            </ul>
        </li>
        <li><a href="" title="">Item 4</a></li>
    </ul>    






	
</body>
</html>
Messages postés
138
Date d'inscription
jeudi 2 mai 2013
Statut
Membre
Dernière intervention
8 mai 2014
12
Je regarde et je te dit apres!
Messages postés
138
Date d'inscription
jeudi 2 mai 2013
Statut
Membre
Dernière intervention
8 mai 2014
12
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