menu déroulant qui déroule bien

menu déroulant qui déroule bien - HTML/CSS - Programmation

Marsh Posté le 08-10-2005 à 11:04:42    

Salut je cherche a faire un menu déroulent dans le bas d’une page. Et il faudrait que le menu déroule vers le haut. (Simple)…
Alors merci « JavaScript » pour cela ok. Mais comment faire dérouler le menu vers le haut et non vers le bas. Je doit modifier le div.menubar (position : absolute, Z-indes ; -20) par exemple ou  bien  long de la solution…. Merci de me sortir du brouillard.

Reply

Marsh Posté le 08-10-2005 à 11:04:42   

Reply

Marsh Posté le 08-10-2005 à 11:28:12    

tu devrais être encore moins précis.
aucun code, keudal, tu as pas moins précis.
Tiens tu dirais meme pas le langage utilisé, ni que c'est un menu ca serait mieux
 
file nous ton code, on te depatouilleras, ou plutot on te guideras


---------------
Les CSS c'est bon mangez-en
Reply

Marsh Posté le 08-10-2005 à 11:39:27    

Code supprimer car «  n’importe quoi»
Alors voila je ne savais pas par ou commence … je ne voulais pas en dire trop mais bon comme tu le voie tout est la … alors comment diriger ce menu vers le haut …dessus ...up …   merci


Message édité par marcopolo79 le 08-10-2005 à 12:11:38
Reply

Marsh Posté le 08-10-2005 à 11:42:38    

C'est n'importe quoi :'(
 
Pourquoi des tables ? Un menu c'est une liste de liens, pas des données tabulaires ...
 
http://css.alsacreations.com/ => cherches la galerie de menus CSS.


---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
Reply

Marsh Posté le 08-10-2005 à 12:09:27    

Merci pour le lien. Je sais que c’est n’importe quoi. Je cherche une info qui réponde a quelle est la « fonction » qui fait montre un menu  j’ai bien trouver des exemples de menu  dans la galeries de menus mais je ne sais pas ce que je cherche pour faire monte mon menu. Je laisse tomber ce code pour  celui la    
[/url]http://css.alsacreations.com/modelesmenus/hd1.htm. [url]
« Plus simple » (je ne baisse pas les bras) mais si c’est m’importe quoi…, il vaut mieux bien commencer pour bien finir non…

Reply

Marsh Posté le 08-10-2005 à 12:28:59    

http://css.alsacreations.com/modelesmenus/hd1.htm


---------------
Les CSS c'est bon mangez-en
Reply

Marsh Posté le 08-10-2005 à 12:34:58    

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 horizontal</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6. <script type="text/javascript">
  7. <!--
  8. function montre(id) {
  9. var d = document.getElementById(id);
  10. for (var i = 1; i<=10; i++) {
  11.  if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
  12. }
  13. if (d) {d.style.display='block';}
  14. }
  15. //-->
  16. </script>
  17. <style type="text/css">
  18. <!--
  19. /* CSS issu des tutoriels css.alsacreations.com */
  20. body {
  21. margin: 0;
  22. padding: 0;
  23. background: white;
  24. font: 80% verdana, arial, sans-serif;
  25. }
  26. dl, dt, dd, ul, li {
  27. margin: 0;
  28. padding: 0;
  29. list-style-type: none;
  30. }
  31. #menu {
  32. position: absolute;
  33. bottom: 0;
  34. left: 0;
  35. z-index:100;
  36. width: 100%; /* précision pour Opera */
  37. }
  38. #menu dl {
  39. float: left;
  40. width: 12em;
  41. }
  42. #menu dt {
  43. cursor: pointer;
  44. text-align: center;
  45. font-weight: bold;
  46. background: #ccc;
  47. border: 1px solid gray;
  48. margin: 1px;
  49. }
  50. #menu dd {
  51. display: none;
  52. position:absolute;
  53. bottom:20px;
  54. border: 1px solid gray;
  55. }
  56. #menu li {
  57. text-align: center;
  58. background: #fff;
  59. }
  60. #menu li a, #menu dt a {
  61. color: #000;
  62. text-decoration: none;
  63. display: block;
  64. height: 100%;
  65. border: 0 none;
  66. }
  67. #menu li a:hover, #menu dt a:hover {
  68. background: #eee;
  69. }
  70. -->
  71. </style>
  72. </head>
  73. <body>
  74. <div id="menu">
  75. <dl>
  76.  <dt onmouseover="javascript:montre();"><a href="" title="Retour à l'accueil">Accueil</a></dt>
  77. </dl>
  78. <dl>
  79.  <dt onmouseover="javascript:montre('smenu1');">Menu 1</dt>
  80.   <dd id="smenu1">
  81.    <ul>
  82.     <li><a href="#">Sous-Menu 1.1</a></li>
  83.     <li><a href="#">Sous-Menu 1.2</a></li>
  84.     <li><a href="#">Sous-Menu 1.3</a></li>
  85.     <li><a href="#">Sous-Menu 1.4</a></li>
  86.     <li><a href="#">Sous-Menu 1.5</a></li>
  87.     <li><a href="#">Sous-Menu 1.6</a></li>
  88.    </ul>
  89.   </dd>
  90. </dl>
  91. <dl>
  92.  <dt onmouseover="javascript:montre();"><a href="">Menu 2</a></dt>
  93. </dl>
  94. <dl>
  95.  <dt onmouseover="javascript:montre('smenu3');">Menu 3</dt>
  96.   <dd id="smenu3">
  97.    <ul>
  98.     <li><a href="#">Sous-Menu 3.1</a></li>
  99.     <li><a href="#">Sous-Menu 3.2</a></li>
  100.     <li><a href="#">Sous-Menu 3.3</a></li>
  101.     <li><a href="#">Sous-Menu 3.4</a></li>
  102.     <li><a href="#">Sous-Menu 3.5</a></li>
  103.    </ul>
  104.   </dd>
  105. </dl>
  106. <dl>
  107.  <dt onmouseover="javascript:montre('smenu4');">Menu 4</dt>
  108.   <dd id="smenu4">
  109.    <ul>
  110.     <li><a href="#">Sous-Menu 4.1</a></li>
  111.     <li><a href="#">Sous-Menu 4.2</a></li>
  112.     <li><a href="#">Sous-Menu 4.3</a></li>
  113.    </ul>
  114.   </dd>
  115. </dl>
  116. </div>
  117. </body>
  118. </html>


 
 
J'ai juste mis le menu tout en bas
en plus de cela, j'ai positionné les sous menu en Absolute, puis appliqué un bottom par défaut de 20px, et voila


---------------
Les CSS c'est bon mangez-en
Reply

Marsh Posté le 08-10-2005 à 12:43:40    

Merci je vais chercher a comprendre mais là que te dire si ce n’est merci ces exactement ce que je cherchais. «  a faire » bravo…

Reply

Marsh Posté le 08-10-2005 à 20:06:11    

Sauf qu'il serait bien que tu comprennes comment ca marche, sinon tu ne progresseras jamais et tu te contenteras toujours de copier coller des bouts de code.


---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
Reply

Sujets relatifs:

Leave a Replay

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