Tom's Guide > Forum > Programmation > Menu déroulant vertical, comment faire ?

Menu déroulant vertical, comment faire ?

Forum Programmation : Menu déroulant vertical, comment faire ?

TomsGuide.com : 800 000 inscrits répondent à toutes vos questions high-tech et informatique. Pour obtenir de l'aide, inscrivez-vous gratuitement !
Créer un nouveau sujet Répondre
Mot :    Pseudo :           
 
sasuke-uchiwa-itachi   29-10-2009 à 17:57:17

Bonjour, j'aimerais faire un menu déroulant vertical sur la gauche de ma page, comme sa:

Menu
Page 1
Sous menu de la page 1
Page 2
sous menu de la page 2
Page 3


Et quand on pose la souris sur page 1 et 2, le sous menu su déroule.

Répondre
Liens sponsorisés
Inscrivez-vous ou connectez-vous pour masquer ceci.
M@cduf   29-10-2009 à 21:59:29

Cadeau : http://marcarea.com/tuto/menu-deroulant-css/

------------------------------ Besoin d'aide?
Je suis là!

 

Répondre à M@cduf

sasuke-uchiwa-itachi   29-10-2009 à 22:04:18

Merci bcp, je verrais sa demain, quand j'aurais l'esprit bien claire ;=)

Répondre à sasuke-uchiwa-itachi
LordOfKnight   30-10-2009 à 01:12:31

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!

------------------------------ Lord Of Knight, La renaissance éternelle!
 Répondre à LordOfKnight
sasuke-uchiwa-itachi   30-10-2009 à 15:48:26

Bonjour, je connais déjà le CSS, mais ce n'est pas ce que je cherche :s
Là, le menu est horizontal, et moi je le veux vertical déroulant verticalement.
Peux-tu m'aider à faire cela stp ?

Répondre à sasuke-uchiwa-itachi
LordOfKnight   30-10-2009 à 15:52:05

Bien sur! ^^

Je ferais ça ce soir en rentrant à la maison! demain tu auras ton menu ^^

------------------------------ Lord Of Knight, La renaissance éternelle!
 Répondre à LordOfKnight
sasuke-uchiwa-itachi   30-10-2009 à 15:56:26

:-o Merci infiniment :D
J'aurais surement d'autre problème pour le CSS / xHTML, est ce que tu peux regarder mes topiques si tu en vois stp ? tu m'a l'aire d'être bien doué ^^


Message édité par sasuke-uchiwa-itachi le 30-10-2009 à 15:56:48
Répondre à sasuke-uchiwa-itachi
sasuke-uchiwa-itachi   31-10-2009 à 13:52:00

Salut LordOfKnight, j'attend toujours ta réponse, j'espère au moins que tu est rentrer chez toi :s

Répondre à sasuke-uchiwa-itachi
LordOfKnight   31-10-2009 à 16:55:36

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

Code :
  1. function afficheMenu(obj){
  3.     var idMenu    = obj.id;
  4.     var idSousMenu = 'sous' + idMenu;
  5.     var sousMenu  = document.getElementById(idSousMenu);
  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.     }
  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.     }
  28. }
 

Fichier: CSS

Code :
  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{
  47. }
 

Fichier: HTML

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" 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>
  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>
  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>
  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>
  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>
  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


Message édité par LordOfKnight le 31-10-2009 à 18:07:15
------------------------------ Lord Of Knight, La renaissance éternelle!
 Répondre à LordOfKnight
sasuke-uchiwa-itachi   31-10-2009 à 17:00:35

Petit problème, je ne sait pas me servire du javascript :D donc je créer un fichier, mais comment relier le fichier Javascript et fichier xHTML ?

Répondre à sasuke-uchiwa-itachi
aurelien50   31-10-2009 à 17:14:37

tu as juste as mettre le code JavaScript dans un fichier apelé functions.js !

Pas besoin de connaitre le JavaScript c'est marqué dans le code html !


Message édité par aurelien50 le 31-10-2009 à 17:16:45
------------------------------ aurelien
---------------------
...
 Répondre à aurelien50
sasuke-uchiwa-itachi   31-10-2009 à 17:18:24

Presque parfait :D
Problèmes:
sa fait comme si il y avai des traits entre chaque menu:
______
Menu 1
______
Menu 2
______

Et justement je veux pas ces traits :s
Autre chose, j'aimerais que ça s'ouvre rien qu'au passage de la souris stp, pas en cliquant dessus.

Répondre à sasuke-uchiwa-itachi
aurelien50   31-10-2009 à 17:21:46

j'regarde vite fait le code ! et modifie si j'peu le code pour qu'il soit comme tu veux !

------------------------------ aurelien
---------------------
...
 Répondre à aurelien50
LordOfKnight   31-10-2009 à 18:04:45

Onmouseover!

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

Fichier: javascript

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



Code :
  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

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" 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>
  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>
  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>
  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>
  77. </div>
  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!

Message cité 1 fois
------------------------------ Lord Of Knight, La renaissance éternelle!
 Répondre à LordOfKnight
sasuke-uchiwa-itachi   31-10-2009 à 18:44:12

Merci, par contre, j'ai pas compris ce qu'il faudra changer, c'est le 4* qui sera à changer ( dans le code javascript ) ?

Répondre à sasuke-uchiwa-itachi
sasuke-uchiwa-itachi   31-10-2009 à 18:47:44

C'est pas possible, j'ai chercher sa pendant des jours, et je l'est enfin --'
Merci infiniment *_*

Répondre à sasuke-uchiwa-itachi
sasuke-uchiwa-itachi   31-10-2009 à 18:49:14

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 ^^'


Message édité par sasuke-uchiwa-itachi le 31-10-2009 à 18:51:44
Répondre à sasuke-uchiwa-itachi
LordOfKnight   31-10-2009 à 19:22:46

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!


Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" 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>
  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>
  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>
  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>
  77. </div>
  79. </body>
  80. </html>


------------------------------ Lord Of Knight, La renaissance éternelle!
 Répondre à LordOfKnight
sasuke-uchiwa-itachi   31-10-2009 à 19:27:10

D'accord, merci. Le PHP j'ai du mal pour l'instant et je n'est pas trop le temps de l'étudier ( tout comme de javascript ).
J'aimerais savoir, que faut-il modifier en javascript si je veux rajouter ou enlever un menu stp ?

Répondre à sasuke-uchiwa-itachi
sasuke-uchiwa-itachi   31-10-2009 à 19:30:15

Aussi, quand je change de menu, ma souris atterri en bas du sous menu, y à t-il un moyen pour que la souris se dirige automatiquement vers le 1er sous-menu ?

Répondre à sasuke-uchiwa-itachi
LordOfKnight   31-10-2009 à 19:44:45

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.

Code :
  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.

------------------------------ Lord Of Knight, La renaissance éternelle!
 Répondre à LordOfKnight
sasuke-uchiwa-itachi   31-10-2009 à 19:49:22

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 ?


Message édité par sasuke-uchiwa-itachi le 31-10-2009 à 20:08:57
Répondre à sasuke-uchiwa-itachi
sasuke-uchiwa-itachi   31-10-2009 à 20:08:30

Pour le code CSS, je ne comprend pas les dernière lignes ( à partir de la page 45 ).
A quoi servent-elles ?

Répondre à sasuke-uchiwa-itachi
sasuke-uchiwa-itachi   31-10-2009 à 20:11:07

Regarde ce code, je pense que tu verra de quoi je parlais quand je disais qu'il y avais des lignes entre chaque menu:

Code :
  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. }


Répondre à sasuke-uchiwa-itachi
aurelien50   31-10-2009 à 20:12:45

@ sasuke-uchiwa-itachi

oups ! :sweat: dsl de t'avoir abandonné mais j'vois que la personne qui t'aidé au debut de ton sujet et re-venu t-aider ! :)

------------------------------ aurelien
---------------------
...
 Répondre à aurelien50
sasuke-uchiwa-itachi   31-10-2009 à 20:14:37

Oui :D
Ca met un peu de temps pour voir les réponses ^^
Avec un peu de chance, demain j'aurais fini xD
Mais le plus important, c'est de faire ce que je souhaite :D
Tu peux encore m'aider, tout mes problèmes ne sont pas résolus ^^

Répondre à sasuke-uchiwa-itachi
sasuke-uchiwa-itachi   31-10-2009 à 21:21:19

Svp aidez moi :'( J'aimerais finir mon menu ce soir :(

Répondre à sasuke-uchiwa-itachi
aurelien50   31-10-2009 à 21:36:19

j'ai essayé avec firefox 3.5 ,Opera 10 , et IE 8 mais j'vois pas non plus tes ligne entre chaque menus !

et sinon il te reste quoi comme problème ?

------------------------------ aurelien
---------------------
...
 Répondre à aurelien50
sasuke-uchiwa-itachi   31-10-2009 à 21:49:49

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 ?

Et comment je fais alors pour Ajouter ou supprimer un menu ou un sous menu ?

Répondre à sasuke-uchiwa-itachi
aurelien50   31-10-2009 à 22:05:39

alors donc pour ajouté

  • un menu :


tu ajoute

Code :
  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

Code :
  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é !!

------------------------------ aurelien
---------------------
...
 Répondre à aurelien50
sasuke-uchiwa-itachi   31-10-2009 à 22:08:07

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 ...

Message cité 1 fois
Répondre à sasuke-uchiwa-itachi
aurelien50   31-10-2009 à 22:15:46

sasuke-uchiwa-itachi a écrit :

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 écrit :



Code :
  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:



------------------------------ aurelien
---------------------
...
 Répondre à aurelien50
sasuke-uchiwa-itachi   31-10-2009 à 22:18:05

Ouai, mais le problème c'est : J'ai 4 menus, et, je veux enlever des sous menu, mais quand j'enlève tout les sous menu d'un seul menu, tout les autres sous menus ne s'affichent pas. Quel est le problème stp ?

Répondre à sasuke-uchiwa-itachi
aurelien50   31-10-2009 à 22:23:49

exemple pour le sous menu 4 tu enleve ceci

Code :
  1. <div class="sousmenu">
  2.             <a href="#">Sous-Menu 4.1</a>
  3.         </div>
  4.         <div class="sousmenu">
  5.             <a href="#">Sous-Menu 4.2</a>
  6.         </div>
  7.         <div class="sousmenu">
  8.             <a href="#">Sous-Menu 4.3</a>
  9.         </div>



et cela fonctionne !

------------------------------ aurelien
---------------------
...
 Répondre à aurelien50
aurelien50   31-10-2009 à 22:28:08

et pour ton problème de sourie moi mon curseur reste ou il été quand je suis alé sur le menu !! ou j'ai mal compris
sinon je sais pas pour sa !
:whistle:


Message édité par aurelien50 le 31-10-2009 à 22:30:09
------------------------------ aurelien
---------------------
...
 Répondre à aurelien50
sasuke-uchiwa-itachi   31-10-2009 à 22:31:25

Et pour les sous menus qui restent afficher ? Et pour enlever des menus ?

Message cité 1 fois
Répondre à sasuke-uchiwa-itachi
aurelien50   31-10-2009 à 22:36:30

sasuke-uchiwa-itachi a écrit :

Et pour les sous menus qui restent afficher ?



deja repondu

sasuke-uchiwa-itachi a écrit :

Et pour enlever des menus ?



2min je repond tt de suite


------------------------------ aurelien
---------------------
...
 Répondre à aurelien50
aurelien50   31-10-2009 à 22:46:32

exemple pour le menu 5 que je t'ai montrai comment ajouté comment ajouté ba tu fait l'inverse tu suprime cette parti :

Code :
  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é

Code :
  1. for(var i = 1; i <= 5; i++)

en

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

------------------------------ aurelien
---------------------
...
 Répondre à aurelien50
sasuke-uchiwa-itachi   31-10-2009 à 23:00:15

rolala je comprend plus rien --"
Voici mon code:

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.


Message édité par sasuke-uchiwa-itachi le 31-10-2009 à 23:00:57
Répondre à sasuke-uchiwa-itachi
sasuke-uchiwa-itachi   31-10-2009 à 23:04:09

Rah c'est bon j'est réussi à enlever les sous menu, j'ai mis du temps --'
Je suis vraiment crever, je suis là dessus depuis ce matin.
Maintenant, je sais plus pour pas que sa reste afficher.
Tu peux me traiter d'abrutit, sa me gène pas, je me le dis souvent -_-''

Répondre à sasuke-uchiwa-itachi
aurelien50   31-10-2009 à 23:07:38

mdr , c'est le code JS que tu a oublié de modifié !

------------------------------ aurelien
---------------------
...
 Répondre à aurelien50
sasuke-uchiwa-itachi   31-10-2009 à 23:09:22

Est ce que c'est possible que tu me reffase tout le code html et javascript stp avec 3 menu : 1 sans sous menu, et les autres avec des sous menu stp.

Répondre à sasuke-uchiwa-itachi
aurelien50   31-10-2009 à 23:13:48

ok , pas de problème !!

------------------------------ aurelien
---------------------
...
 Répondre à aurelien50
sasuke-uchiwa-itachi   31-10-2009 à 23:15:02

Merci, parce que là, je ne suis pas du tout en état de réfléchir lol

Répondre à sasuke-uchiwa-itachi
aurelien50   31-10-2009 à 23:22:39

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

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" 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>
  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>
  42. </body>
  43. </html>



et pour le code JavaScript =>

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

------------------------------ aurelien
---------------------
...
 Répondre à aurelien50
sasuke-uchiwa-itachi   31-10-2009 à 23:35:27

Donc c'est ce que j'avais fait ^^' sauf pour le JS. Par contre, sa ne se ferme pas tout seul quand on sort des sous menu ... mais ce n'est pas très grave.

Répondre à sasuke-uchiwa-itachi
sasuke-uchiwa-itachi   31-10-2009 à 23:42:26

Petite chose, voici mon code CSS :

Code :
  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 :

Code :
  1. .sousmenu a{
  2.     display:block;
  3.     width:100%;
  4.     height:100%;
  5.     color:#1AB515;
  6.     font-family:arial,sans-serif;
  7. [#ff0400]    font-size:12px;[/#ff0400]
  8.     font-weight:bold;
  9.     text-decoration:none;
  10.     background: #000000;
  11.     }



Et dans ce code, à la place de 40 je met 20 :

Code :
  1. .menu a{
  2.     display:block;
  3.     width:100%;
  4.     height:100%;
  5.     color:#F00;
  6.     font-family:arial,sans-serif;
  7. [#ff0400]    font-size:40px;[/#ff0400]
  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 ?

Répondre à sasuke-uchiwa-itachi
aurelien50   31-10-2009 à 23:42:44

ba le JS j'ai juste mis 2 pour "ignoré" le menu 1 pour les sous menu et 3 car il y a 3 menu !
simple non !
c'est plutot mon explication qui est pas trés clair ! ^^


Message édité par aurelien50 le 31-10-2009 à 23:44:40
------------------------------ aurelien
---------------------
...
 Répondre à aurelien50
sasuke-uchiwa-itachi   31-10-2009 à 23:44:27

^^ J'ai pas encore appris le JS :D
Si non, regarde mon second post en dessous :D

Répondre à sasuke-uchiwa-itachi
Page Précédente
1 2
Page Suivante
Créer un nouveau sujet Répondre
Tom's Guide > Forum > Programmation > Menu déroulant vertical, comment faire ?
Aller à :

Il y a 1423 utilisateurs connus et inconnus. Pour voir la liste des connectés connus, cliquez ici.

Plan du forum
Forum Bestofmedia ©
2000-2009 Bestofmedia Group
Page générée en 0,786 secondes
Liens