Menu déroulant à trois niveaux !

Menu déroulant à trois niveaux ! - HTML/CSS - Programmation

Marsh Posté le 21-05-2012 à 16:04:14    

Bonjour,
 
J'aimerais avoir un peu d'aide SVP car j'ai très bien réussi mon menu déroulant mais il faut que je rajoute un troisième niveau et je bloque un peu :/  
Que faut-il que je rajoute dans le css pour afficher un 3eme niveau SVP ?
Voici mon code html et css :
 

Code :
  1. <div id="main_menu">
  2.     <ul class="navfxenabled">
  3.       <li>
  4.         <a href="*******" class="cat1">*******</a>
  5.       </li>
  6.       <li>
  7.         <a href="#" class="cat2">*******</a>
  8.         <ul>
  9.   <li>
  10.             <a href="" class="cat22">*******</a>
  11.           </li>
  12.           <li>
  13.             <a href="" class="cat22">*******</a>
  15.                                         <ul id="niveau3">
  16.      <li><a href="#">*******</a></li>
  17.      <li><a href="#">*******</a></li>
  19.      <li><a href="#">*******</a></li>
  20.     </ul>
  21.           </li>
  22.           <li>
  23.             <a href="#" class="cat22">*******</a>
  24.           </li>
  25.           <li>
  26.             <a href="#" class="cat22">*******</a>
  27.           </li>
  28.           <li>
  29.             <a href="#" class="cat22">*******</a>
  30.           </li>
  31.    <li>
  32.             <a href="#" class="cat22">*******</a>
  33.           </li>
  34.         </ul>
  35.       </li>
  36.       <li>
  37.         <a href="#" class="cat3">*******</a>
  38.         <ul>
  39.           <li>
  40.             <a href="#" class="cat33">*******</a>
  41.           </li>
  42.           <li>
  43.             <a href="#" class="cat33">*******</a>
  44.           </li>
  45.    <li>
  46.             <a href="#" class="cat33">*******</a>
  47.           </li>
  48.    <li>
  49.             <a href="#" class="cat33">*******</a>
  50.           </li>
  51.         </ul>
  52.       </li>
  53.       <li>
  54.         <a href="#" class="cat4">*******</a>
  55.         <ul>
  56.           <li>
  57.             <a href="#" class="cat44">*******</a>
  58.           </li>
  59.           <li>
  60.             <a href="#" class="cat44">*******</a>
  61.           </li>
  62.    <li>
  63.             <a href="#" class="cat44">*******</a>
  64.           </li>
  65.    <li>
  66.             <a href="#" class="cat44">*******</a>
  67.           </li>
  68.         </ul>
  69.       </li>
  70.       <li>
  71.         <a href="" class="cat5">*******</a>
  72.       </li>
  73.       <li>
  74.         <a href="" class="cat6">*******</a>
  75.       </li>
  76.     </ul>
  77.   </div>


 
et mon css :  
 

Code :
  1. #main_menu {/* réglage général du menu */
  2. background: transparent;/* couleur fond général */
  3. display: table;/* si on enlève cette partie plus de fond général */
  4. width: auto;/* largeur à adapter */
  5. margin: 0 0 0px 0;/* marge inférieure après le menu, et centrage de l'ensemble dans le bloc */
  6. font-size:18px;/* taille caractères */
  7. line-height:9px;/*pour des éléments centrés verticalement, mettre la même valeur que la hauteur de caractères*/
  8. font-family: "Times New Roman", Arial, Helvetica, Georgia, Sans-serif;
  9. text-align:left;/*aligne à gauche les liens*/
  10. font-style: italic ;
  11. }
  12. #main_menu ul {/* ouverture de liste */
  13. position: relative;
  14. z-index:3;
  15. padding: 0px 0px;/* retrait par rapport au fond général */
  16. display:block;
  17. }
  18. #main_menu li {/* élément de liste, les catégories */
  19. float: left;/* se positionne sur la gauche et se suivent si plusieurs */
  20. padding: 0px;/* pas de retrait */
  21. position: relative;
  22. color: #fff;/* couleur caractère des listes qui ne sont pas des liens (le slash entre les cat seules) */
  23. list-style-type: none;/* pas de puces */
  24. display:block;
  25. }
  26. #main_menu a {/* liens du menu */
  27. display: block;
  28. color: #f4f5e9;/* couleur lien */
  29. text-decoration: none;/* pas de surlignage naturel */
  30. font-family: "Times New Roman", Arial, Helvetica, Georgia, Sans-serif;
  31. padding: 0px 0px;/* retrait */
  32. }
  34. #main_menu a:hover, #main_menu a:focus {/* survol des liens */
  36. display: block;
  37. font-family: "Times New Roman", Arial, Helvetica, Georgia, Sans-serif;
  38. color: white;/* couleur lien */
  39. }
  40. #main_menu li li {/* sous-menu */
  41. display: block;/* fait que les sous-menus soient les uns sous les autres */
  42. float: none;
  43. }
  44. #main_menu li ul {/* fait que les sous-menus ne soient pas visibles hors survol */
  46. display: none;
  47. position: absolute;
  48. width: 193px;/* largeur des sous-menus  */
  49. }
  50. #main_menu li:hover ul,
  51. #main_menu .navfxenabled li.hover ul {/* fait que les sous-menus soient visibles au survol */
  52. display: block;
  53. }
  54. #main_menu ul li ul {/* pas de retrait pour les sous-menus */
  55. margin-left:0px;
  56. margin-top: -1px;
  57. }


 
Merci d'avance


Message édité par martiidu87 le 21-05-2012 à 16:04:48

---------------
JE VENDS ---> http://forum.hardware.fr/hfr/Achat [...] 7799_1.htm
Reply

Marsh Posté le 21-05-2012 à 16:04:14   

Reply

Marsh Posté le 22-05-2012 à 10:29:02    

personne :/ ?


---------------
JE VENDS ---> http://forum.hardware.fr/hfr/Achat [...] 7799_1.htm
Reply

Marsh Posté le 22-05-2012 à 13:01:41    

Tu veux dire avec des <a> ayant pour class="cat222", ça c'est ça?
 
parce que j'ai bien vu ton <ul id="niveau3"> mais j'imagine que tu dois pouvoir avoir à différent endroits dans ton menu des items de niveau 3 dans le menu? Si oui, alors faut pas utiliser l'attribut id mais class puisque chaque id doit être unique...


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 22-05-2012 à 13:34:24    

D'abord merci pour ta réponse !
Oui le niveau trois va se répéter dans deux autres rubriques.
Et oui, pour la class="222".
 
J'ai du mal à comprendre comment je dois m'y prendre pour faire disparaitre le "niveau3" et le faire réapparaitre au survol de mon bouton.
Comment je l’intègre au CSS... ?


---------------
JE VENDS ---> http://forum.hardware.fr/hfr/Achat [...] 7799_1.htm
Reply

Marsh Posté le 22-05-2012 à 13:46:33    

ben comme je te le disais, utilise l'attribut class plutôt qu'id. Et ensuite, disposes là où ça va bien (= là où t'as besoin de niveaux 3) les <ul class="Niveau3">...</ul>.


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 22-05-2012 à 14:17:28    

et pour le css ça donne quoi ? je dois appliquer la même chose que pour cat22 c'est à dire display : none; et display: block ?
 
au faite extrait du cat2
 

Code :
  1. #main_menu .cat2, #main_menu .cat2 ul {
  2. background-image:url(/images/bleuclaire.jpg);
  3. background-repeat:repeat x;
  4. padding-left: 20px;/* pas de retrait */
  5. padding-top: 24px;
  6. margin-right: -28px;
  7. padding-bottom: 24px;
  8. width: 143px;
  9. }
  10. #main_menu .cat2:hover, #main_menu .cat2 ul:hover{
  11. background: #0188cf;
  12. padding-left: 20px;/* pas de retrait */
  13. padding-top: 24px;
  14. margin-right: -28px;
  15. padding-bottom: 24px;
  16. display: block;
  17. }
  18. #main_menu .cat22, #main_menu .cat22 ul {
  19. line-height: 40px;
  20. background: #0188cf;
  21. padding-left: 10px;
  22. border-bottom: 1px dotted #006fac;
  23. }
  24. #main_menu .cat22:hover, #main_menu .cat22 ul:hover {
  25. background: #0173af;
  26. }


Message édité par martiidu87 le 22-05-2012 à 14:22:29

---------------
JE VENDS ---> http://forum.hardware.fr/hfr/Achat [...] 7799_1.htm
Reply

Marsh Posté le 22-05-2012 à 14:28:33    

Oui, avec probablement plus de décalage à gauche...


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 22-05-2012 à 16:39:31    

désolé mais perso je bug  :??: lol je viens de rajouter ça :
 

Code :
  1. #main_menu li li:hover ul {
  2.     left: 150px;
  3.     top: 0;
  4. display: block;
  5. }


 
et ça :
 

Code :
  1. #main_menu li ul li {
  3. display: none;
  4. position: absolute;
  5. width: 193px;
  6. }


 
Au survol c'est ok le texte apparait correctement comme demandé sur la droite, mais avant le survol il apparait sous la rubrique parente...


Message édité par martiidu87 le 22-05-2012 à 16:41:12

---------------
JE VENDS ---> http://forum.hardware.fr/hfr/Achat [...] 7799_1.htm
Reply

Marsh Posté le 22-05-2012 à 16:51:05    

plutôt que de mettre des règles sur #main_menu li ul li, tu ferais mieux de mettre une class à ton ul qui correspond à ton Niveau 3 et écrire des règles css en fonction de cette class.


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 22-05-2012 à 17:04:44    

oui donc ça va donner ça :
 

Code :
  1. <ul class="niveau3">
  2. <li><a class="cat222" href="#">*******</a></li>
  3. <li><a class="cat222" href="#">*******</a></li>
  4. <li><a class="cat222" href="#">*******</a></li>
  5. </ul>


 

Code :
  1. #main_menu li li:hover > ul,
  2. #main_menu .navfxenabled li li.hover > ul {/* fait que les sous-menus soient visibles au survol */
  3. display: block;
  4. left: 193px;
  5. margin-top: 0px;
  6. top: 0;
  7. }
  8. .niveau3
  9. {
  10. display: none;
  11. position: absolute;
  12. width: 193px;/* largeur des sous-menus  */
  13. }


 
J'ai simplement rajouté le .niveau3 pour faire disparaitre le texte sauf que ça ne fonctionne toujours pas... :(


---------------
JE VENDS ---> http://forum.hardware.fr/hfr/Achat [...] 7799_1.htm
Reply

Marsh Posté le 22-05-2012 à 17:04:44   

Reply

Marsh Posté le 22-05-2012 à 19:30:30    

t'as pas besoin de rajouter des tonnes de classes normalement.
 
http://jsfiddle.net/A7bRY/3/


Message édité par pop-pan le 22-05-2012 à 19:30:57

---------------
Plop !
Reply

Marsh Posté le 22-05-2012 à 20:31:59    

sauf si le menu est généré par un outil de type CMS et qu'il est possible d'affecter un style différent à chaque item de menu (par ex, une boutique en ligne)...


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 22-05-2012 à 22:37:39    

Bon je vous ai envoyé le lien en mp (c'est le site d'une commune et il est en construction)
Pour voir le résultat regardez dans la rubrique commune, conseil municipal...
J'ai essayé avec une classe pour le niveau 3 mais c'est toujours pareil.
Je commence à en avoir marre :/ il y a un truc qui fait déconner le reste de mon code css...


Message édité par martiidu87 le 22-05-2012 à 22:38:23

---------------
JE VENDS ---> http://forum.hardware.fr/hfr/Achat [...] 7799_1.htm
Reply

Marsh Posté le 23-05-2012 à 09:48:51    

Je ne peux pas rentrer sur le site, je suis bloqué sur la page d'accueil et y'a pas le menu déroulant :/
 
Edit : vu que ton site est sous Wordpress, tu devrais peut-être regarder si y'aurait pas un plugin qui ferait le menu comme tu veux...


Message édité par rufo le 23-05-2012 à 09:49:39

---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 23-05-2012 à 09:57:17    

non mais c'est résolu enfin :D et les plugins sont vraiment "bidons" en plus la plus part sont en anglais :)  
 
voici la solution à mon problème :
 

Code :
  1. <li class="soussousmenugauche">
  2.             <a href="" class="cat22">Conseil municipal</a>
  3.       <ul>
  4.        <li class="cat222"><a href="#">*******</a></li>
  5.        <li class="cat222"><a href="#">*******</a></li>
  6.        <li class="cat222"><a href="#">*******</a></li>
  7.       </ul>
  8.           </li>


 

Code :
  1. #main_menu li ul .soussousmenugauche ul {/* fait que les sous-menus ne soient pas visibles hors survol */
  2. display: none;
  3. position: absolute; }
  5. #main_menu li ul .soussousmenugauche:hover ul {/* fait que les sous-menus soient visibles au survol */
  6. display: block;
  7. left: 193px;
  8. top: 1px;  }
  10. #main_menu .cat222, #main_menu .cat222 ul {
  11. line-height: 40px;
  12. background: #0188cf;
  13. padding-left: 10px;
  14. border-bottom: 1px dotted #006fac;
  15. border-left: 1px solid #0b92d9;
  16. }
  17. #main_menu .cat222:hover, #main_menu .cat222 ul:hover {
  18. background: #0173af;
  19. }


 
Donc merci pour votre aide les gars !


Message édité par martiidu87 le 23-05-2012 à 09:58:22

---------------
JE VENDS ---> http://forum.hardware.fr/hfr/Achat [...] 7799_1.htm
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed