18041 sujets

Questions générales et questions de débutants

Menu accordeon full CSS [Résolu]

Bonjour,
je suis je cherche désespérément un tuto pour faire un menu accordeon en fulle CSS, qui réagisse au clic de la souris.
voila pour l'instant le code que j'ai, mais il réagit avec hover, et en plus pas sous IE6:




je suis désespéré quelqu'un pourrait il m'aider
Merci d'avance. 
<!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=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
ul{
	display:none;

	}

div:hover ul{
	display:inline;
	background:none;
	}


a:hover{
	background:none;
	}

li a{
	list-style-type: none;
	text-decoration:none;
	padding-left:20px;
	background:none;
	}



div{border:1px solid red;
	background:none;
	}

</style>

</head>

<body>

<div><a href="#">test</a>
	<ul>
		<li><a href="#">sous-menu</a></li>
		<li><a href="#">sous-menu 1</a></li>
	</ul>
</div>


<div><a href="#">test2</a>
	<ul>
		<li><a href="#">sous-menu2</a></li>
		<li><a href="#">sous-menu3</a></li>
	</ul>
</div>

<div><a href="#">test3</a>
	<ul>
		<li><a href="#">sous-menu4</a></li>
		<li><a href="#">sous-menu5</a></li>
		<li><a href="#">sous-menu2</a></li>
		<li><a href="#">sous-menu3</a></li>
		<li><a href="#">sous-menu2</a></li>
		<li><a href="#">sous-menu3</a></li>
	</ul>
</div>	

	
<div><a href="#">test4</a>
	<ul>
		<li><a href="#">sous-menu6</a></li>
		<li><a href="#">sous-menu7</a></li>
	</ul>
</div>

</body>
</html>

Modifié par toffffe (06 Nov 2007 - 09:55)
Salut toffffe,

Ton code serait plus clair entre les balises [ code] et [ /code] Smiley cligne .

toffffe a écrit :
je cherche désespérément un tuto pour faire un menu accordeon en fulle CSS, qui réagisse au clic de la souris.
voila pour l'instant le code que j'ai, mais il réagit avec hover, et en plus pas sous IE6
Le clic, contrairement au hover, n'est pas géré par les css donc ça n'est pas possible Smiley ohwell ...

Mais avec un soupçon de Javascript tu peux faire comme expliqué dans le premier exemple du tuto : Un menu déroulant en CSS et XHTML.

A+
Merci beaucoup.
J'ai regardé, mais le problème c'est que maintenant j'aimerai que le li de la page sur lequel je suis reste par exemple rouge et que la div correspondante est un background bleu. je sais pas si je me fait bien comprendre, en gros je voudrais ke la partie de du menu choisi soit avec un font bleu et la partie du sous menu choisi est un font rouge. Est ce possible?
Car je ne voit pas comment?
merci d'avance
Encore un grand merci à Heyoan
Salut,

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif
Sujet clos
Aller à