Votre question

Sous-menu déroulant sous le menu principal au clic du visiteur en css

Tags :
  • Focus
  • CSS
  • Programmation
Dernière réponse : dans Programmation
5 Novembre 2011 01:37:40

Bonjour,

En fait je souhaiterais que mes sous-menus se déploient sous mes menus tout en décalant mes menus vers le bas (je pensais utiliser hover et margin-top mais peut-être existe-il une solution plus rapide).

Mais surtout je souhaiterais que cela ce déclenche au clic du visiteur. Cela est-il possible en css ?

Merci par avance.

Autres pages sur : menu deroulant menu principal clic visiteur css

7 Novembre 2011 04:37:07

Salut,

Merci pour tes conseils. Par contre j'ai une question concernant le :focus en css, il semblerait que l'image (ou menu dans mon cas) s'éfface dès que tu relache la souris hors je souhaiterais que cela reste visible jusqu'à ce que l'on re-clic sur le menu ou que l'on clic sur le sous-menu...

Ensuite j'ai tenté de reprendre le code du lien que tu m'as donné pour l'adapter a mes besoins mais je n'y arrive pas... Soit mes sous menu sont bien cachés, tellement bien d'ailleurs qu'ils n'apparaissent jamais (que ce soit en :hover ou :focus)... Soit mes sous menus sont toujours apparant.

Je me permet de te mettre le code html et le css....

Merci par avance.

html :
  1. <div id="menu_secondaire">
  2. <ul id="menu_2">
  3. <li><h4><a href="m.html#en_tete">Haut de page</a></h4></li>
  4. <li><h4><a href="m.html#A" title="A">A</a></h4>
  5. <ul class="sous_menu_2">
  6. <li><h4><a href="m.html#a" title="a">a</a></h4></li>
  7. <li><h4><a href="m.html#b" title="b">b</a></h4></li>
  8. <li><h4><a href="m.html#c" title="c">c</a></h4></li>
  9. </ul>
  10. </li>
  11. <li><h4><a href="m.html#B" title="B">B</a></h4>
  12. <ul class="sous_menu_2">
  13. <li><h4><a href="m.html#d" title="d">d</a></h4></li>
  14. <li><h4><a href="m.html#e" title="e">e</a></h4></li>
  15. <li><h4><a href="m.html#f" title="f">f</a></h4></li>
  16. </ul>
  17. </li>
  18. <li><h4><a href="m.html#C" title="C">C</a></h4>
  19. <ul class="sous_menu_2">
  20. <li><h4><a href="m.html#g" title="g">g</a></h4></li>
  21. <li><h4><a href="mc.html#h" title="h">h</a></h4></li>
  22. </ul>
  23. </li>
  24. <li><h4><a href="m.html#lD" title="D">D</a></h4>
  25. <ul class="sous_menu_2">
  26. <li><h4><a href="m.html#i" title="i">i</a></h4></li>
  27. <li><h4><a href="m.html#j" title="j">j</a></h4></li>
  28. </ul>
  29. </li>
  30. <li><h4><a href="m.html#E" title="E">E</a></h4>
  31. <ul class="sous_menu_2">
  32. <li><h4><a href="m.html#k" title="k">k</a></h4></li>
  33. </ul>
  34. </li>
  35. </ul>
  36. </div>


css :
  1. #menu_2
  2. {
  3. margin-top: 200px;
  4. margin-left: 5px;
  5. padding-left: 5px;
  6. font-size: 16px;
  7. font-family: "Comic Sans MS";
  8. width: 149px;
  9. height: auto;
  10. position: fixed;
  11. background-color: #000000;
  12. color: #ffffff;
  13. border: 3px outset grey;
  14. }
  15. #menu_2 li
  16. {
  17. width: 149px;
  18. list-style: none;
  19. line-height: 30px;
  20. }
  21. #menu_2 a
  22. {
  23. display: block;
  24. width: 149px;
  25. color: #ffffff;
  26. background-color: #000000;
  27. text-decoration: none;
  28. }
  29. #menu_2 a li
  30. {
  31. border: 3px outset grey;
  32. }
  33. #menu_2 a:hover, menu_2 a:focus:hover
  34. {
  35. background-color: #c3c3c3;
  36. color: #000000;
  37. }
  38. #menu_2 a:active, #menu_2 a:focus
  39. {
  40. color: #000000;
  41. background-color: #c3c3c3;
  42. }
  43. #menu_2 a .sous_menu_2
  44. {
  45. display: none;
  46. }
  47. #menu_2 a:active .sous_menu_2, #menu_2 a:focus .sous_menu_2
  48. {
  49. display: block;
  50. position: absolute;
  51. margin-top: 0;
  52. margin-left:160px;
  53. width: 149px;
  54. background-color: #000000;
  55. float: left;
  56. }

a c 232 L Programmation
7 Novembre 2011 09:04:52

En effet, le focus n'est pas parfait pour ça, vu que l'élément perd le focus dès que tu cliques autre part.
Du coup il va forcément falloir passer par du JavaScript je pense...


Et si ça ne marche pas, c'est parce que tu mets une règle :
  1. #menu_2 a:focus .sous_menu_2


Pour que ça fonctionne, il faudrait que l'élément ayant un id "sous_menu_2" soit un enfant de ton "a". Ce qui n'est pas le cas.
Il faut faire ça avec un <li>
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS