11548 sujets

JavaScript, DOM et API Web HTML5

MENU ACCORDEON JQUERY - PB comportement du menu !!!

Bonsoir,

je suis débutante.
Pour mon site j'aimerais faire un menu accordéon.
J'ai donc suivis les conseils du tutoriel correspondant.
Cependant, j'utilise des images pour le menu et les sous menu au lieu du texte.
J'ai réussi à les afficher mais le menu ne se comporte pas comme il devrait :
le sous menu s'affiche à gauche lorsque je clic sur le menu correspondant sans décaler les deux autres menu. Voici une image :
upload/23220-Image1.png

et voici mon code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>.:: COM 1 IDEE - Graphisme, idéntité visuelle, webdesign, freelance - COM 1 IDEE ::.</title>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
<!--
$(document).ready( function () {
	// On cache les sous-menus :
	$(".menu ul.sousmenu").hide();
	 // On sélectionne tous les items de liste portant la classe "toggleSubMenu" et on remplace l'élément span qu'ils contiennent par un lien :
	$(".menu li.toggleSousMenu 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'évènement "click" sur les liens dans les items de liste qui portent la classe "toggleSubMenu" : 
    $(".menu li.toggleSousMenu > a").click( function () { 
        // Si le sous-menu était déjà ouvert, on le referme : 
        if ($(this).next("ul.sousmenu:visible").length != 0) { 
            $(this).next("ul.sousmenu").slideUp("normal"); 
        } 
        // Si le sous-menu est caché, on ferme les autres et on l'affiche : 
        else { 
            $(".menu ul.sousmenu").slideUp("normal"); 
            $(this).next("ul.sousmenu").slideDown("normal"); 
        } 
        // On empêche le navigateur de suivre le lien : 
        return false; 
    });     
} ) ; 
// --> 
</script>						 						 
<style>
/* --- COULEUR ARRIERE PLAN --- */
body {
	background: #CAD3D3;
}
/* --- POSITIONNEMENT --- */
#global {
	position:absolute;
	top:50%;
	left:50%;
	margin-left:-512px;
	margin-top:-384px;
}
/* --- MENU DE NAVIGATION --- */
#navigation {
	float:left;
	outline:none;
}
ul {
	list-style-type:none;
	outline:none;
	position:absolute;
	left:-25px;
	top: 154px;
}
li{
	height:28px;
	width:142px;
}
img{
	display:block;
	border:none;
}
.menu { 
    list-style: none;
	outline:none;
	padding-bottom:-10px;
	height:600px;
}
.toggleSousmenu{
	position:absolute;
	padding-left:-50px;
}
.menu a, .menu span { 
	display:block;
    text-decoration: none;
} 
.menu .sousmenu {
    margin: 0; 
    padding: 0; 
} 
.menu ul.sousmenu a { 
}
/* --- CONTENU --- */
#contenu {
	float:left;
	position:relative;
}
#image_contenu {
	position:absolute;
	padding-top:91px;
	padding-left:21px;
}	
#footer {
	float:left;
	position:absolute;
	padding-top:633px;
	padding-left:335px;
}
</style>

</head>

<body>
<div id="global">
	<div id="navigation"><img src="IMAGES/papierlogo.png"/>
    	<ul class="menu" >
        	<li class="toggleSousMenu"><a href="#" title="Menu Print"><img src="IMAGES/onglet_print.png"/></a>
            		<ul class="sousmenu">
                    	<li><a href="#" title="Guide Placement de saison"><img src="IMAGES/ssmenu_print_guidepds.png"/></a></li>
                        <li><a href="#" title="Campagne Hisséo"><img src="IMAGES/ssmenu_print_hisseo.png"/></a></li>
                        <li><a href="#" title="Campagne Izéis"><img src="IMAGES/ssmenu_print_izeis.png"/></a></li>
                        <li><a href="#" title="Campagne Coeur de l'épargne"><img src="IMAGES/ssmenu_print_coeur.png"/></a></li>
                        <li><a href="#" title="Hopiclowns"><img src="IMAGES/ssmenu_print_hopiclowns.png"/></a></li>
                        <li><a href="#" title="La toupie"><img src="IMAGES/ssmenu_print_latoupie.png"/></a></li>
                        <li><a href="#" title="Jam'sahel"><img src="IMAGES/ssmenu_print_jamsahel.png"/></a></li>
                        <li><a href="#" title="Discrimination à l'embauche"><img src="IMAGES/ssmenu_print_discrimination.png"/></a></li>
                        <li><a href="#" title="Nonesuch"><img src="IMAGES/ssmenu_print_nonesuch.png"/></a></li>
                        <li><a href="#" title="A l'ombre de l'olivier"><img src="IMAGES/ssmenu_print_olivier.png"/></a></li>
                        <li><a href="#" title="Urbain"><img src="IMAGES/ssmenu_print_urbain.png"/></a></li>
                    </ul>
              </li>
              <li class="toggleSousMenu"><a href="#"><img src="IMAGES/onglet_webdesign.png"/></a>
              		<ul class="sousmenu">
                    	<li><a href="#" title="Banners"><img src="IMAGES/ssmenu_webdesign_banners.png"/></a></li>
                    </ul>
              </li
       		  ><li class="toggleSousMenu"><a href="#"><img src="IMAGES/onglet_photographie.png"/></a>
        			<ul class="sousmenu">
                    	<li><a href="#" title="Lieu de mémoire"><img src="IMAGES/ssmenu_photographie_lieudememoire.png"/></a></li>
                        <li><a href="#" title="Le quotidien"><img src="IMAGES/ssmenu_photographie_lequotidien.png"/></a></li>
                        <li><a href="#" title="Autoportrait"><img src="IMAGES/ssmenu_photographie_autoportrait.png"/></a></li>
                    </ul>
              </li>
        </ul>	
    </div>
	<div id="contenu">
    	<div id="image_contenu"><img src="IMAGES/zonecontenu.png"/></div>
    	<div id="footer"><img src="IMAGES/footer.png" /> </div>
    </div>
</div>

</body>

</html>


Comment faire ????
merci de vos réponses
Bonjour,

Rapidement, tu as deux erreurs majeures:

1. Tu appliques des styles sans distinction à tous les UL ou tous les LI de la page (et par extension du site). Et ces styles sont assez précis, prévus pour des éléments particuliers et pas pour n'importe quelle liste ou item de liste (il peut y en avoir pas mal dans une page).
2. Tu utilises le positionnement absolu. À priori, sans savoir ce que c'est et comment ça fonctionne. Ça s'appelle une erreur de débutant. Smiley cligne

Je te propose de lire ou réviser le guide de survie du positionnement CSS et les articles qui y sont indiqués.
Sujet clos
Aller à