28172 sujets

CSS et mise en forme, CSS3

Un menu déroulant

Bonjour, alors déjà je vous envois le site, comme vous pouvez voir il y a 2 menus, celui qui est à gauche il a aucun probleme,mais celui qui est a droite, je voudrais qu'il fasse la meme fonction que celui de gauche, c a dire que je voudrais que quand je pointe sur "Partie 1" le tableau se déroule en bas, comme dans le menu 1.
Si vous avez des idées, je vous serez très reconnaissant.

Edit: VOILA LE SITE: http://rpws.free.fr/menutest.html Excusez moi, j'ai completement zappé.
Modifié par Lenden (18 Dec 2008 - 19:15)
Hello,

Je serais toi, je déclencherais ce genre d'effet au clic, et surtout pas au survol. Voir par exemple le tutoriel sur la création d'un menu accordéon.
Merci pour ta réponse, je crois que je vais suivre ton conseil.
Mais enfaite, meme si je le fais comme tu m'a dit, je voudrais que ca soit un tableau qui se déroule en bas, quand je click, et pas un autre sous menu, de type liste.
Tu pense que c possible?
Lenden a écrit :
Tu pense que c possible?

Oui, pour peu qu'on sache ce qu'on fait. Une stricte application du tutoriel sur les menus en accordéon ne suffira, mais il peut être adapté pour ce cas de figure. Ça demandera un minimum de connaissances en HTML, CSS et des bases de JavaScript et jQuery.
Tu dois d'abord faire passer l'id menuDeroulant en classe dans ton CSS et HTML. Ensuite applique la à tes menus et met la même classe sur ton tableau que le sous menu de ton 1er menu:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="menutest.css" />
</head>

<body>
<div id="MENU1">
	<ul class="menuDeroulant">
		<li>
			<a href="#">Partie 1</a>

			<ul class="sousMenu">
				<li><a href="#">TEXTTEXTTEXTETEXTETEXTESTE</a></li>
				<li><a href="#">TEXTTEXTTEXTETEXTETEXTESTE</a></li>		
				<li><a href="#">TEXTTEXTTEXTETEXTETEXTESTE</a></li>
			</ul>
		</li>
		<li>
			<a href="#">Partie 2</a>

		</li>
		<li>
			<a href="#">Partie 3</a>

		</li>
		<li>
			<a href="#">Partie 4</a>
		</li>

	</ul>
</div>
<!--DEUXIEME MENU-->
<div id="MENU2">
	<ul class="menuDeroulant">
		<li>
			<a href="#">partie 1</a>
			<table class="sousMenu">
				<tbody>
                  <tr>

      				 <td><a href="#" class="tablelinks">BLABLA</a></td>
   					<td><a href="#" class="tablelinks">BLABLA</a></td>
					 <td><a href="#" class="tablelinks">BLABLA</a></td>
 				  </tr>
  					 <tr>
					   <td><a href="#" class="tablelinks">BLABLA</a></td>
						<td><a href="#" class="tablelinks">BLABLA</a></td>

						 <td><a href="#" class="tablelinks">BLABLA</a></td>
 					</tr>
				 </tbody>
			</table>
		</li>
		<li>
			<a href="#">Partie 2</a>
		</li>

		<li>
			<a href="#">Partie 3</a>
		</li>
		<li>
			<a href="#">Partie 4</a>
		</li>
	</ul>
</div>

</body>
</html>




.menuDeroulant {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:10px;
padding:0;
width:200px;
}

.menuDeroulant .sousMenu {
border:0 none;
display:none;
list-style-type:none;
margin:0;
padding:0;
}
Sujet clos
Aller à