Se connecter avec
S'enregistrer | Connectez-vous

Menu déroulant vertical, comment faire ? - Page 2

Dernière réponse : dans Programmation
Lassé par la pub ? Créez un compte

Citation :
Bon, je vais passer ce problème pour le moment. Autre problème:
Quand je passe ma souris sur un menu, elle atterrit directement tout en bas du sous menu, j'aimerais qu'elle apparaisse au premier sous menu et non au dernier. Comment faire stp ?

Tu ne peux pas!

La souris reste à l'emplacement, lorsque tu l'as bouge.

Fichier CSS
  1. *{
  2. 	margin:0;
  3. 	padding:0;
  4. }
  5. #menu{
  6. 	width:150px;
  7. 	margin:20px auto 0 auto;
  8. }
  9. .menu, .sousmenu{
  10. 	text-align:center;
  11. }
  12. .menu{
  13. 	height:40px;
  14. 	width:150px;
  15. 	padding:2px 0;
  16. 	color:#000000;
  17. }
  18. .sousmenu{
  19. 	height:25px;
  20. 	width:150px;
  21. 	padding:1px 0;
  22. 	color:#000000;
  23. }
  24. .menu a{
  25. 	display:block;
  26. 	width:100%;
  27. 	height:100%;
  28. 	color:#000000;
  29. 	font-family:arial,sans-serif;
  30. 	font-size:40px;
  31. 	font-weight:bold;
  32. 	text-decoration:none;
  33. 	background:#ffffff;
  34. }
  35. .sousmenu a{
  36. 	display:block;
  37. 	width:100%;
  38. 	height:100%;
  39. 	color:#333333;
  40. 	font-family:arial,sans-serif;
  41. 	font-size:15px;
  42. 	font-weight:bold;
  43. 	text-decoration:underline;
  44. }
  45. .menu a:hover, .sousmenu a:hover, .menu a:active, .sousmenu a:active, .menu a:focus, .sousmenu a:focus{
  46.  
  47. }


Fichier HTML
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>">
  2. <html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>" xml:lang="fr" lang="fr">
  3. <head>
  4.      <title>Menu déroulant vertical sur clic</title>
  5.      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6. 	 <link rel="stylesheet" href="style.css" type="text/css" />
  7. 	 <script type="text/javascript" src="functions.js"></script>
  8. </head>
  9. <body>
  10.  
  11. <div id="menu">
  12. 	<div class="menu" id="menu1" onmouseover="affiche(this)">
  13. 		<a href="#">Acceuil</a>
  14. 	</div>
  15.  
  16. 	<div class="menu" id="menu2" onmouseover="affiche(this)">
  17. 		<a href="#">Animé</a>
  18. 	</div>
  19. 	<div id="sousmenu2" style="display:none">
  20. 		<div class="sousmenu">
  21. 			<a href="#">Naruto</a>
  22. 		</div>
  23. 		<div class="sousmenu">
  24. 			<a href="#">Death Note</a>
  25. 		</div>
  26. 	</div>
  27. 	<div class="menu" id="menu3" onmouseover="affiche(this)">
  28. 		<a href="#">clip</a>
  29. 	</div>
  30. 	<div id="sousmenu3" style="display:none">
  31. 		<div class="sousmenu">
  32. 			<a href="#">UVERworld</a>
  33. 		</div>
  34. 		<div class="sousmenu">
  35. 			<a href="#">Dong Bang Shin Ki</a>
  36. 		</div>
  37. 		<div class="sousmenu">
  38. 			<a href="#">SHINee</a>
  39. 		</div>
  40. 		<div class="sousmenu">
  41. 			<a href="#">Sous-Menu 3.4</a>
  42. 		</div>
  43. 	</div>
  44.  
  45. 	<div class="menu" id="menu4" onmouseover="affiche(this)">
  46. 		<a href="#">Menu 4</a>
  47. 	</div>
  48. 	<div id="sousmenu4" style="display:none">
  49. 		<div class="sousmenu">
  50. 			<a href="#">Sous-Menu 4.1</a>
  51. 		</div>
  52. 		<div class="sousmenu">
  53. 			<a href="#">Sous-Menu 4.2</a>
  54. 		</div>
  55. 		<div class="sousmenu">
  56. 			<a href="#">Sous-Menu 4.3</a>
  57. 		</div>
  58. 	</div>
  59.  
  60. </div>
  61.  
  62. </body>
  63. </html>


Fichier Javascript
  1. function affiche(obj){
  2. 	var id = obj.id;
  3.  
  4. 	for(var i = 2; i <= 4; i++){
  5. 		document.getElementById('sousmenu'+i).style.display = "none";
  6. 	}
  7.  
  8. 	if(document.getElementById('sous'+id)){
  9. 		document.getElementById('sous'+id).style.display = "block";
  10. 	}
  11. }


Voilà, j'espère que le menu est bon!

Lassé par la pub ? Créez un compte

Créer un nouveau sujet

Tom's guide dans le monde