Bonjour,
J'ai utilisé le tuto d'alsacreations consacré au menu accordéon. Tout fonctionne nickel mais je souhaiterais ajouter une image avec float à gauche dans le <li class="toggleSubMenu">.
L'image en arriere-plan apparait bien mais pas les images insérées.
Comment faire ?
Merci
Voici le code javascript du tuto:
Et voici mon code css:
Et voici le lien de la page:
http://www.a-doc.com/Testing/Site2009/telecharger/Copie-doc.html
Donc en fait je veux insérer l'image avant le début du texte "Aides à l'instalation...."
Merci de votre aide
J'ai utilisé le tuto d'alsacreations consacré au menu accordéon. Tout fonctionne nickel mais je souhaiterais ajouter une image avec float à gauche dans le <li class="toggleSubMenu">.
L'image en arriere-plan apparait bien mais pas les images insérées.
Comment faire ?
Merci
Voici le code javascript du tuto:
<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>') ;
} ) ;
// 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("fast", function () { $(this).parent().removeClass("open") } );
}
// Si le sous-menu est cache, on ferme les autres et on l'affiche :
else {
$("ul.subMenu").slideUp("fast", function () { $(this).parent().removeClass("open") } );
$(this).next("ul.subMenu").slideDown("fast", function () { $(this).parent().addClass("open") } );
}
// On empêche le navigateur de suivre le lien :
return false;
});
} ) ;
// -->
</script>
Et voici mon code css:
#accordion { padding: 0; list-style: none:; width: 493px; margin: 19px 0 21px 0;}
#accordion a, #accordion span { display: block; height: 58px; background-image: url(img/fond-menu-support.gif); background-position: left; background-repeat: no-repeat;
text-decoration: none; color:#000; padding: 9px 50px 7px 20px;
}
#accordion span img{float:left;}
#accordion .open a, #accordion .open span { background-image: url(img/fond-menu-support-over.gif); background-repeat: no-repeat; background-position: left;}
#accordion a:hover, #accordion a:focus, #accordion a:active {
background-image: url(img/fond-menu-support-over.gif); background-repeat: no-repeat; background-position: left;}
#accordion .subMenu { margin: 0; padding: 0; background-color: #E8FFE8}
#accordion ul.subMenu div { padding: 10px 50px 10px 20px; border-top-width: 1px;
border-bottom-width: 1px; border-top-style: solid; border-bottom-style: solid;
border-top-color: #FFF; border-bottom-color: #FFF;}
Et voici le lien de la page:
http://www.a-doc.com/Testing/Site2009/telecharger/Copie-doc.html
Donc en fait je veux insérer l'image avant le début du texte "Aides à l'instalation...."
Merci de votre aide