Votre question
Résolu

Menu css/html programmation

Tags :
  • Html
  • Programmation
  • CSS
Dernière réponse : dans Programmation
9 Août 2016 13:38:17

Bonjour,
J'ai créer un menu horizontal css :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4. <style type="text/css">
  5. #monmenu {font-family: trebuchet ms, arial, tahoma, verdana, sans-serif; font-size: 90%; font-weight:bold;}
  6. #monmenu ul ul {display: none; left: 144px; top: -1px; position: absolute; margin:0px; padding: 0px; border: 1px solid #B0B0B0;}
  7. #monmenu li {list-style-type: none; position: relative; width: 140px; background-color: #E0E0E0; padding: 2px; margin: 0px}
  8. #monmenu li:hover, #monmenu li.sfhover {background-color: #FFFF70;}
  9. #monmenu li a {text-decoration:none;}
  10. #monmenu li:hover ul.niveau2, #monmenu li li:hover ul.niveau3, #monmenu li.sfhover ul.niveau2, #monmenu li li.sfhover ul.niveau3 {display: block}
  11. #monmenu li.plus {background-position:right; background-image: url(illustrations/ fdroite.gif); background-repeat: no-repeat; border-bottom: 1px solid #B0B0B0;}
  12. </style>
  13. <!--[if lt IE 7]>
  14. <script type="text/javascript">
  15. // Fonction destinée à remplacer le "LI:hover" pour IE 6
  16. sfHover = function() {
  17. var sfEls = document.getElementById("monmenu").getElementsByTagName("li");
  18. for (var i=0; i<sfEls.length; i++) {
  19. sfEls[i].onmouseover = function() {
  20. this.className = this.className.replace(new RegExp(" sfhover"), "");
  21. this.className += " sfhover";
  22. }
  23. sfEls[i].onmouseout = function() {
  24. this.className = this.className.replace(new RegExp(" sfhover"), "");
  25. }
  26. }
  27. }
  28. if (window.attachEvent) window.attachEvent("onload", sfHover);
  29. </script>
  30. <style type="text/css">
  31. #monmenu li {width: 144px;}
  32. </style>
  33. <![endif]-->
  34. <meta name="keywords"
  35. content="CSS, cascading style sheets, mise en page, design, site, web, techniques, sites, webmaster, page">
  36. <meta name="description"
  37. content="Voici un exemple de code de menu hiérarchique déroulant réalisé à l'aide de CSS.">
  38. <title>Exemple de menu hiérarchique en CSS</title>
  39. </head>
  40. <body>
  41. <div id="monmenu">
  42. <ul class="niveau1">
  43. <li> Menu
  44. <ul class="niveau2">
  45. <li class="plus">
  46. <a href= "http://www.rankspirit.com">
  47. <img alt=" " src="illustrations/ menu-deroulant/ bebe.gif"
  48. border="none">
  49. Extras
  50. <li>
  51. <li>
  52. <a href= "http://www.rankspirit.com">
  53. <img alt=" "
  54. src="illustrations/ menu-deroulant/ entree.gif"
  55. border="none">
  56. Entrée
  57. </a>
  58. </li>
  59. <li>
  60. <a href= "http://www.rankspirit.com">
  61.  
  62. Plat
  63. </a>
  64. </li>
  65. <li>
  66. <a href= "http://www.rankspirit.com">
  67.  
  68. Dessert
  69. </a>
  70. </li>
  71. <li>
  72. <a href= "http://www.rankspirit.com">
  73.  
  74. Café
  75. </a>
  76. </li>
  77. </ul>
  78. </li>
  79. </ul>
  80. </div>
  81. </body>
  82. </html>

J'aimerai pouvoir afficher une flèche qui permettrait aux utilisateurs de mon site de rabattre le menu vers la gauche pour avoir plus de place sur l'écran et une fois le menu masqué la flèche changerai de sens pour le réafficher.

D'avance merci

Clementeg

Autres pages sur : menu css html programmation

19 Août 2016 11:43:36

Salut,
Ton menu à l'aire bien fait.

Tu veux ajouter une flèche pour réduire le menu, ce qui veux dire que lorsque la souri quite le menu, ce dernier reste ouvert ?
Car à l'heure actuelle quand ta souris sort du menu il ce referme, ce qui laisse de la place pour le reste de la page.
m
0
l
20 Août 2016 19:13:03

Salut!
Oui je voudrais qu'il y est une flèche pour faire venir ou pousser ce menu.
Bye
Clementeg
m
0
l

Meilleure solution

21 Août 2016 09:05:50

OK,
Il faut ajouter ton image à côté du texte "menu", et surtout très important il faut pouvoir modifier cette image après du coup il faut qu'elle ait un attributs ID.

Genre:

<ul class="niveau1">
<li>menu <img src="fleche.png" id="fleche">


As tu déjà utilisé la librairie Jquery pour faire du JavaScript ??
Car ça ce fait en 3 lignes à écrire Jquery, mais sinon. A ce fait aussi sans.

Il faut que tu supprime ton code CSS qui affiche ton menu. C'est le JavaScript qui le fera.
partage
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