Se connecter avec
S'enregistrer | Connectez-vous

Menu déroulant vertical, comment faire ?

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

M@cduf:
Le menu que tu présentes est un menu déroulant mais à l'horizontal.

sasuke-uchiwa-itachi:
Il te faut dans un premier temps apprendre le CSS pour créer ce genre de menu. Cela n'est pas très compliqué:

Voici quelques liens avec divers menu verticaux déroulant:
Lien1
Lien2

Le deuxième lien présente plus de choix dans l'interface. En revanche, je pense que le mieux pour toi, serait de voir comment fonctionne le menu dynamique du lien 1 et de créer ce que tu veux avec celui-ci. Tu as juste à trouver les bons codes.

Reviens sur se forum si tu n'arrives pas, je regarderai ton code et je t'aiderai à faire ce que tu veux exactement!

Plop, désolé du retard!

Il te faut 3 fichiers, un fichier en HTML, un autre en CSS et le dernier en javascript!

Fichier: Javascript
  1. function afficheMenu(obj){
  2.  
  3. 	var idMenu     = obj.id;
  4. 	var idSousMenu = 'sous' + idMenu;
  5. 	var sousMenu   = document.getElementById(idSousMenu);
  6.  
  7. 	/*****************************************************/
  8. 	/**	on cache tous les sous-menus pour n'afficher    **/
  9. 	/** que celui dont le menu correspondant est cliqué **/
  10. 	/** où 4 correspond au nombre de sous-menus         **/
  11. 	/*****************************************************/
  12. 	for(var i = 1; i <= 4; i++){
  13. 		if(document.getElementById('sousmenu' + i) && document.getElementById('sousmenu' + i) != sousMenu){
  14. 			document.getElementById('sousmenu' + i).style.display = "none";
  15. 		}
  16. 	}
  17.  
  18. 	if(sousMenu){
  19. 		//alert(sousMenu.style.display);
  20. 		if(sousMenu.style.display == "block"){
  21. 			sousMenu.style.display = "none";
  22. 		}
  23. 		else{
  24. 			sousMenu.style.display = "block";
  25. 		}
  26. 	}
  27.  
  28. }


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:18px;
  14. 	width:150px;
  15. 	padding:2px 0;
  16. 	color:#000000;
  17. }
  18. .sousmenu{
  19. 	height:18px;
  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:12px;
  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:12px;
  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" onclick="afficheMenu(this)">
  13. 		<a href="#">Menu 1</a>
  14. 	</div>
  15. 	<div id="sousmenu1" style="display:none">
  16. 		<div class="sousmenu">
  17. 			<a href="#">Sous-Menu 1.1</a>
  18. 		</div>
  19. 		<div class="sousmenu">
  20. 			<a href="#">Sous-Menu 1.2</a>
  21. 		</div>
  22. 		<div class="sousmenu">
  23. 			<a href="#">Sous-Menu 1.3</a>
  24. 		</div>
  25. 		<div class="sousmenu">
  26. 			<a href="#">Sous-Menu 1.4</a>
  27. 		</div>
  28. 	</div>
  29.  
  30. 	<div class="menu" id="menu2" onclick="afficheMenu(this)">
  31. 		<a href="#">Menu 2</a>
  32. 	</div>
  33. 	<div id="sousmenu2" style="display:none">
  34. 		<div class="sousmenu">
  35. 			<a href="#">Sous-Menu 2.1</a>
  36. 		</div>
  37. 		<div class="sousmenu">
  38. 			<a href="#">Sous-Menu 2.2</a>
  39. 		</div>
  40. 		<div class="sousmenu">
  41. 			<a href="#">Sous-Menu 2.3</a>
  42. 		</div>
  43. 	</div>
  44.  
  45. 	<div class="menu" id="menu3" onclick="afficheMenu(this)">
  46. 		<a href="#">Menu 3</a>
  47. 	</div>
  48. 		<div id="sousmenu3" style="display:none">
  49. 		<div class="sousmenu">
  50. 			<a href="#">Sous-Menu 3.1</a>
  51. 		</div>
  52. 		<div class="sousmenu">
  53. 			<a href="#">Sous-Menu 3.2</a>
  54. 		</div>
  55. 		<div class="sousmenu">
  56. 			<a href="#">Sous-Menu 3.3</a>
  57. 		</div>
  58. 	</div>
  59.  
  60. 	<div class="menu" id="menu4" onclick="afficheMenu(this)">
  61. 		<a href="#">Menu 4</a>
  62. 	</div>
  63. 	<div id="sousmenu4" style="display:none">
  64. 		<div class="sousmenu">
  65. 			<a href="#" >Sous-Menu 4.1</a>
  66. 		</div>
  67. 		<div class="sousmenu">
  68. 			<a href="#">Sous-Menu 4.2</a>
  69. 		</div>
  70. 		<div class="sousmenu">
  71. 			<a href="#">Sous-Menu 4.3</a>
  72. 		</div>
  73. 		<div class="sousmenu">
  74. 			<a href="#">Sous-Menu 4.4</a>
  75. 		</div>
  76. 		<div class="sousmenu">
  77. 			<a href="#">Sous-Menu 4.5</a>
  78. 		</div>
  79. 	</div>
  80. </div>
  81.  
  82. </body>
  83. </html>



Pour les autres topiques, envoie moi les liens je regarderais!
Ps: Je suis doué en rien, je suis juste un gros con qui reprends tout pour créer! XD

Onmouseover!

Voici, le fichier en javascript, il faut absolument le changer entièrement:

Fichier: javascript
  1. function affiche(obj){
  2. 	var id = obj.id;
  3.  
  4. 	for(var i = 1; 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. }


  1. for(var i = 1; i <= 4; i++)


Il y a plus de 4 menus sur ton site, n'oublie pas de changer la valeur au dessus de 4 par rapport aux nombres de menus que tu as:

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="#">Menu 1</a>
  14. 	</div>
  15. 	<div id="sousmenu1" style="display:none" onmouseover="affiche(this)">
  16. 		<div class="sousmenu">
  17. 			<a href="#">Sous-Menu 1.1</a>
  18. 		</div>
  19. 		<div class="sousmenu">
  20. 			<a href="#">Sous-Menu 1.2</a>
  21. 		</div>
  22. 		<div class="sousmenu">
  23. 			<a href="#">Sous-Menu 1.3</a>
  24. 		</div>
  25. 		<div class="sousmenu">
  26. 			<a href="#">Sous-Menu 1.4</a>
  27. 		</div>
  28. 	</div>
  29.  
  30. 	<div class="menu" id="menu2" onmouseover="affiche(this)">
  31. 		<a href="#">Menu 2</a>
  32. 	</div>
  33. 	<div id="sousmenu2" style="display:none" onmouseover="affiche(this)">
  34. 		<div class="sousmenu">
  35. 			<a href="#">Sous-Menu 2.1</a>
  36. 		</div>
  37. 		<div class="sousmenu">
  38. 			<a href="#">Sous-Menu 2.2</a>
  39. 		</div>
  40. 		<div class="sousmenu">
  41. 			<a href="#">Sous-Menu 2.3</a>
  42. 		</div>
  43. 	</div>
  44. 	<div class="menu" id="menu3" onmouseover="affiche(this)">
  45. 		<a href="#">Menu 3</a>
  46. 	</div>
  47. 	<div id="sousmenu3" style="display:none" onmouseover="affiche(this)">
  48. 		<div class="sousmenu">
  49. 			<a href="#">Sous-Menu 3.1</a>
  50. 		</div>
  51. 		<div class="sousmenu">
  52. 			<a href="#">Sous-Menu 3.2</a>
  53. 		</div>
  54. 		<div class="sousmenu">
  55. 			<a href="#">Sous-Menu 3.3</a>
  56. 		</div>
  57. 		<div class="sousmenu">
  58. 			<a href="#">Sous-Menu 3.4</a>
  59. 		</div>
  60. 	</div>
  61.  
  62. 	<div class="menu" id="menu4" onmouseover="affiche(this)">
  63. 		<a href="#">Menu 4</a>
  64. 	</div>
  65. 	<div id="sousmenu4" style="display:none" onmouseover="affiche(this)">
  66. 		<div class="sousmenu">
  67. 			<a href="#">Sous-Menu 4.1</a>
  68. 		</div>
  69. 		<div class="sousmenu">
  70. 			<a href="#">Sous-Menu 4.2</a>
  71. 		</div>
  72. 		<div class="sousmenu">
  73. 			<a href="#">Sous-Menu 4.3</a>
  74. 		</div>
  75. 	</div>
  76.  
  77. </div>
  78.  
  79. </body>
  80. </html>


En ce qui concerne tes traits, je ne sais pas trop de quoi tu veux parler, je n'ai pas ça sur firefox.
Sinon, regarde dans le fichier en CSS et enlève le underline!

Enfin, je ne mets pas le fichier en CSS, c'est exactement la même chose!

Autre petite question:
Voilà, c'est un petit peu chiant de recopier chaque code de mon menu et de ma bannière sur chaque page, y aurait-il un moyen pour que sa se répète au même endroit sur toutes les pages stp ?


Rolala que suis-je chiant --' Mais il y à un autre problème, quand on pose la souris dessus c'est parfait c'est ce que je cherchais, mais quand je veux poser ma souris sur un sous-menu, sa va au menu suivant, du coup je ne peux pas accéder à mes pages ^^'

En effet, je n'avais pas vu ce bug. Je répare ça:

Pour ce qui est de recopier le menu sur chaque page, malheureusement, si tu ne veux pas t'embêter avec ça, tu dois passer par ce que l'on appelle le PHP. Sinon, tu peux utiliser les frames, mais le code reste néanmoins plutôt brouillon!


  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="#">Menu 1</a>
  14. 	</div>
  15. 	<div id="sousmenu1" style="display:none">
  16. 		<div class="sousmenu">
  17. 			<a href="#">Sous-Menu 1.1</a>
  18. 		</div>
  19. 		<div class="sousmenu">
  20. 			<a href="#">Sous-Menu 1.2</a>
  21. 		</div>
  22. 		<div class="sousmenu">
  23. 			<a href="#">Sous-Menu 1.3</a>
  24. 		</div>
  25. 		<div class="sousmenu">
  26. 			<a href="#">Sous-Menu 1.4</a>
  27. 		</div>
  28. 	</div>
  29.  
  30. 	<div class="menu" id="menu2" onmouseover="affiche(this)">
  31. 		<a href="#">Menu 2</a>
  32. 	</div>
  33. 	<div id="sousmenu2" style="display:none">
  34. 		<div class="sousmenu">
  35. 			<a href="#">Sous-Menu 2.1</a>
  36. 		</div>
  37. 		<div class="sousmenu">
  38. 			<a href="#">Sous-Menu 2.2</a>
  39. 		</div>
  40. 		<div class="sousmenu">
  41. 			<a href="#">Sous-Menu 2.3</a>
  42. 		</div>
  43. 	</div>
  44. 	<div class="menu" id="menu3" onmouseover="affiche(this)">
  45. 		<a href="#">Menu 3</a>
  46. 	</div>
  47. 	<div id="sousmenu3" style="display:none">
  48. 		<div class="sousmenu">
  49. 			<a href="#">Sous-Menu 3.1</a>
  50. 		</div>
  51. 		<div class="sousmenu">
  52. 			<a href="#">Sous-Menu 3.2</a>
  53. 		</div>
  54. 		<div class="sousmenu">
  55. 			<a href="#">Sous-Menu 3.3</a>
  56. 		</div>
  57. 		<div class="sousmenu">
  58. 			<a href="#">Sous-Menu 3.4</a>
  59. 		</div>
  60. 	</div>
  61.  
  62. 	<div class="menu" id="menu4" onmouseover="affiche(this)">
  63. 		<a href="#">Menu 4</a>
  64. 	</div>
  65. 	<div id="sousmenu4" style="display:none">
  66. 		<div class="sousmenu">
  67. 			<a href="#">Sous-Menu 4.1</a>
  68. 		</div>
  69. 		<div class="sousmenu">
  70. 			<a href="#">Sous-Menu 4.2</a>
  71. 		</div>
  72. 		<div class="sousmenu">
  73. 			<a href="#">Sous-Menu 4.3</a>
  74. 		</div>
  75. 	</div>
  76.  
  77. </div>
  78.  
  79. </body>
  80. </html>

Ce n'est pas automatique, c'est parce que ton menu se déroule, donc la souris ne se place plus au même endroit. Tout dépend de la hauteur de ton menu.

Pour le javascript, il ne sert pas à supprimer les menus ou à les ajouter. Il sert simplement à autoriser le passage de la souris sur les menus.

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


Il permet entre autre que lorsque tu passes la souris sur un menu, les autres menus se referme automatique.

Dans ton cas, essaie de changer le 4 en 2 et tu verras la différence.

Je dois changer mon code avec celui que tu viens d'envoyer ?

Et comment je fais alors pour Ajouter ou supprimer un menu, car si je le fait que sur le xHTML, cela ne m'ouvre plus les sous menu .

J'ai essayer de changer le 4 en 2, et j'ai compris. Ca sert à dire que les 4 menus peuvent se refermer, c'est bien sa ?

Et pour ma souris, comment je dois faire ?

Regarde ce code, je pense que tu verra de quoi je parlais quand je disais qu'il y avais des lignes entre chaque menu:
  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:50px;
  14.     width:150px;
  15.     padding:2px 0;
  16.     color:#F00;
  17. }
  18. .sousmenu{
  19.     height:18px;
  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:#F00;
  29.     font-family:arial,sans-serif;
  30.     font-size:40px;
  31.     font-weight:bold;
  32.     text-decoration:none;
  33.     background:#000000;
  34. }
  35. .sousmenu a{
  36.     display:block;
  37.     width:100%;
  38.     height:100%;
  39.     color:#1AB515;
  40.     font-family:arial,sans-serif;
  41.     font-size:12px;
  42.     font-weight:bold;
  43.     text-decoration:none;
  44.     background: #000000;
  45. 	}
  46. .menu a:hover, .sousmenu a:hover, .menu a:active, .sousmenu a:active, .menu a:focus, .sousmenu a:focus{
  47. }

alors donc pour ajouté

  • un menu :

    tu ajoute 
    1. <div class="menu" id="menu5" onmouseover="affiche(this)">
    2.          <a href="#">Menu 5</a>
    3.      </div>
    4.      <div id="sousmenu5" style="display:none">
    5.          <div class="sousmenu">
    6.              <a href="#">Sous-Menu 5.1</a>
    7.          </div>
    8.          <div class="sousmenu">
    9.              <a href="#">Sous-Menu 5.2</a>
    10.          </div>
    11.          <div class="sousmenu">
    12.              <a href="#">Sous-Menu 5.3</a>
    13.          </div>
    14.          <div class="sousmenu">
    15.              <a href="#">Sous-Menu 5.4</a>
    16.          </div> 
    17.  </div>


    en modifiant les titre et l'id comme j'ai fait

  • et pour le sous menu

    tu ajoute 
    1. <div class="sousmenu">
    2.          <a href="#">Sous-Menu 5.5</a>
    3.   </div>


    J'espere que c'est assez clair et que j'ai rien oublié !!

    sasuke-uchiwa-itachi a dit :
    Et pour en enlever un ? Et pour ma souris ?
    Encore un petit problème que j'ai remarquer: quand je passe ma souris et que le sous menu s'affiche, il ne s'en vas pas quand je part du menu. Il se renbobine que quand je change de page ...


    Sa c'est que tu a oublié ceci a modifié dans le code javascript comme avais dit LordOfKnight !
    mais j'avais oublié de te le rappelé

    LordOfKnight a dit :


    1. for(var i = 1; i <= 4; i++)


    Il y a plus de 4 menus sur ton site, n'oublie pas de changer la valeur au dessus de 4 par rapport aux nombres de menus que tu as:


    exemple pour le menu 5 que je t'ai montrai comment ajouté comment ajouté ba tu fait l'inverse tu suprime cette parti :
    1. <div class="menu" id="menu5" onmouseover="affiche(this)">
    2.          <a href="#">Menu 5</a>
    3.      </div>
    4.      <div id="sousmenu5" style="display:none">
    5.          <div class="sousmenu">
    6.              <a href="#">Sous-Menu 5.1</a>
    7.          </div>
    8.          <div class="sousmenu">
    9.              <a href="#">Sous-Menu 5.2</a>
    10.          </div>
    11.         <div class="sousmenu">
    12.              <a href="#">Sous-Menu 5.3</a>
    13.          </div>
    14.          <div class="sousmenu">
    15.             <a href="#">Sous-Menu 5.4</a>
    16.          </div>
    17. </div>


    et tu pense a modifié

    1. for(var i = 1; i <= 5; i++)
    en 
    1. for(var i = 1; i <= 4; i++)

    rolala je comprend plus rien --"
    Voici mon code: 
    1. <div id="menu">
    2.     <div class="menu" id="menu1" onmouseover="affiche(this)">
    3.         <a href="#">Acceuil</a>
    4.     </div>
    5.     <div id="sousmenu1" style="display:none">
    6.         <div class="sousmenu">
    7.             <a href="#">Sous-Menu 1.1</a>
    8.         </div>
    9.         <div class="sousmenu">
    10.             <a href="#">Sous-Menu 1.2</a>
    11.         </div>
    12.         <div class="sousmenu">
    13.             <a href="#">Sous-Menu 1.3</a>
    14.         </div>
    15.         <div class="sousmenu">
    16.             <a href="#">Sous-Menu 1.4</a>
    17.         </div>
    18.     </div>
    19.     <div class="menu" id="menu2" onmouseover="affiche(this)">
    20.         <a href="#">Animes</a>
    21.     </div>
    22.     <div id="sousmenu2" style="display:none">
    23.         <div class="sousmenu">
    24.             <a href="#">Naruto</a>
    25.         </div>
    26.         <div class="sousmenu">
    27.             <a href="#">Death Note</a>
    28.         </div>
    29.     </div>
    30.     <div class="menu" id="menu3" onmouseover="affiche(this)">
    31.         <a href="#">Clips</a>
    32.     </div>
    33.     <div id="sousmenu3" style="display:none">
    34.         <div class="sousmenu">
    35.             <a href="#">UVERworld</a>
    36.         </div>
    37.         <div class="sousmenu">
    38.             <a href="#">Dong Bang Shin Ki</a>
    39.         </div>
    40.         <div class="sousmenu">
    41.             <a href="#">SHINee</a>
    42.         </div>
    43.     </div>
    44.     <div class="menu" id="menu4" onmouseover="affiche(this)">
    45.         <a href="#">Menu 4</a>
    46.     </div>
    47.     <div id="sousmenu4" style="display:none">
    48.         <div class="sousmenu">
    49.             <a href="#">Sous-Menu 4.1</a>
    50.         </div>
    51.         <div class="sousmenu">
    52.             <a href="#">Sous-Menu 4.2</a>
    53.         </div>
    54.         <div class="sousmenu">
    55.             <a href="#">Sous-Menu 4.3</a>
    56.         </div>
    57.     </div>
    58. </div>


    Est ce que tu peux m'enlever tout les sous menu de l'acceuil stp sans enlever le menu acceuil ?
    Et je sais plus ce qu'il faut faire pour les sous menus qui rentent afficher.

    Donc voila le code html, j'ai gardé le nom de tes menu, et sous menu d'un de tes precedents postes =>

    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.      <div class="menu" id="menu2" onmouseover="affiche(this)">
    16.          <a href="#">Animes</a>
    17.      </div>
    18.      <div id="sousmenu2" style="display:none">
    19.          <div class="sousmenu">
    20.              <a href="#">Naruto</a>
    21.          </div>
    22.          <div class="sousmenu">
    23.              <a href="#">Death Note</a>
    24.          </div>
    25.      </div>
    26.      <div class="menu" id="menu3" onmouseover="affiche(this)">
    27.          <a href="#">Clips</a>
    28.      </div>
    29.      <div id="sousmenu3" style="display:none">
    30.          <div class="sousmenu">
    31.              <a href="#">UVERworld</a>
    32.     </div>
    33.          <div class="sousmenu">
    34.              <a href="#">Dong Bang Shin Ki</a>
    35.          </div>
    36.          <div class="sousmenu">
    37.              <a href="#">SHINee</a>
    38.          </div>
    39.      </div>
    40.  </div>
    41.  
    42.  </body>
    43.  </html>


    et pour le code JavaScript =>

    1. function affiche(obj){
    2.      var id = obj.id;
    3.  
    4.     for(var i = 2; i <= 3; 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.  }

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


    Si dans ce code, à la place de 12px, je met 15, voici ce que sa donne :
    1. .sousmenu a{
    2.     display:block;
    3.     width:100%;
    4.     height:100%;
    5.     color:#1AB515;
    6.     font-family:arial,sans-serif;
    7. [color=#ff0400]    font-size:12px;[/color]
    8.     font-weight:bold;
    9.     text-decoration:none;
    10.     background: #000000;
    11.     }


    Et dans ce code, à la place de 40 je met 20 :
    1. .menu a{
    2.     display:block;
    3.     width:100%;
    4.     height:100%;
    5.     color:#F00;
    6.     font-family:arial,sans-serif;
    7. [color=#ff0400]    font-size:40px;[/color]
    8.     font-weight:bold;
    9.     text-decoration:none;
    10.     background:#000000;
    11. }


    Et bien, essaye avec ce code, et tu verra qu'il y à de l'écart entre les menu, justement, comment réduire cet écart stp ?
    Lassé par la pub ? Créez un compte

    Répondre Créer un nouveau sujet

    Tom's guide dans le monde