login  Naam:   Wachtwoord: 
Registreer je!
 Scripts:

Scripts > JS > Navigatie > Simpele Dropdown menu

Simpele Dropdown menu

Auteur: Topdancer - 02 september 2006 - 17:21 - Gekeurd door: Joel - Hits: 22536 - Aantal punten: 5.00 (5 stemmen)




Het is heel simpel.

Copieer alles wat hier onder staat.
Zet dit tussen <head> en </head> en zet de dropdown zelf tussen <body> en </body> of waar je hem ook wilt hebben.

Verander de style even en klaar is kees.

Code:
Dit stuk tussen de <head> en </head>

  1. <style>
  2. body{font-family:verdana;}
  3. table{font-size:70%;background:d20000}
  4. a{color:black;text-decoration:none;font:bold}
  5. a:hover{color:003366}
  6. td.menu{background:d8e1e9}
  7. table.menu
  8. {
  9. font-size:100%;
  10. position:absolute;
  11. visibility:hidden;
  12. }
  13. </style>
  14. <script language="JavaScript">
  15. function toonmenu(elmnt)
  16. {
  17. document.all(elmnt).style.visibility="visible"
  18. }
  19. function verstopmenu(elmnt)
  20. {
  21. document.all(elmnt).style.visibility="hidden"
  22. }
  23. </script>


Plaats dit tussen <body> en </body>
  1. <font face="arial" size="3"> <table width="100%"> <tr bgcolor="#d8e1e9"> <td onmouseover="toonmenu('site1')" onmouseout="verstopmenu('site1')">
  2. <a href="#.html" target=frame1>Titel</a><br /><table class="menu" id="site1" width="100%"> <tr><td class="menu">
  3. <a href="#.html" target=frame1>Sub Titel</a></td></tr> <tr><td class="menu"><a href="#.html" target=frame1>Sub
  4. Titel</a></td></tr> <tr><td class="menu"><a href="#.html" target=frame1>Sub
  5. Titel</a></td></tr> <tr><td class="menu"><a href="#.html" target=frame1>Sub
  6. Titel</a></td></tr> <tr><td class="menu"><a href="#.html" target=frame1>Sub
  7. Titel</a></td></tr>
  8. </table></td>
  9. <td onmouseover="toonmenu('site2')" onmouseout="verstopmenu('site2')"> <a href="#.html" target=frame1>Titel</a><br />
  10. <table class="menu" id="site2" width="100%">
  11. <tr>
  12. <td class="menu"><a href="#.html" target=frame1>Sub Titel</a></td>
  13. </tr>
  14. <tr>
  15. <td class="menu"><a href="#.html" target=frame1>Sub Titel</a></td>
  16. </tr>
  17. <tr>
  18. <td class="menu"><a href="#.html" target=frame1>Sub Titel</a></td>
  19. </tr>
  20. <tr>
  21. <td class="menu"><a href="#.html" target=frame1>Sub Titel</a></td>
  22. </tr>
  23. <tr>
  24. <td class="menu"><a href="#.html" target=frame1>Sub Titel</a></td>
  25. </tr>
  26. </table></td>
  27. <td onmouseover="toonmenu('site3')" onmouseout="verstopmenu('site3')"> <a href="#.html" target=frame1>Titel</a><br />
  28. <table class="menu" id="site3" width="100%">
  29. <tr>
  30. <td class="menu"><a href="#.html" target=frame1>Sub Titel</a></td>
  31. </tr>
  32. <tr>
  33. <td class="menu"><a href="#.html" target=frame1>Sub Titel</a></td>
  34. </tr>
  35. <tr>
  36. <td class="menu"><a href="#.html" target=frame1>Sub Titel</a></td>
  37. </tr>
  38. <tr>
  39. <td class="menu"><a href="#.html" target=frame1>Sub Titel</a></td>
  40. </tr>
  41. <tr>
  42. <td class="menu"><a href="#.html" target=frame1>Sub Titel</a></td>
  43. </tr>
  44. </table></td>
  45. <td onmouseover="toonmenu('site4')" onmouseout="verstopmenu('site4')"> <a href="#.html" target=frame1>Titel</a><br />
  46. <table class="menu" id="site4" width="100%">
  47. <tr>
  48. <td class="menu"><a href="#.html" target=frame1>Sub Titel</a></td>
  49. </tr>
  50. <tr>
  51. <td class="menu"><a href="#.html" target=frame1>Sub Titel</a></td>
  52. </tr>
  53. <tr>
  54. <td class="menu"><a href="#.html" target=frame1>Sub Titel</a></td>
  55. </tr>
  56. <tr>
  57. <td class="menu"><a href="#.html" target=frame1>Sub Titel</a></td>
  58. </tr>
  59. <tr>
  60. <td class="menu"><a href="#.html" target=frame1>Sub Titel</a></td>
  61. </tr>
  62. </table></td>
  63. <td onmouseover="toonmenu('site5')" onmouseout="verstopmenu('site5')"> <a href="#.html" target=frame1>Titel</a><br />
  64. <table class="menu" id="site5" width="100%">
  65. <tr>
  66. <td class="menu"><a href="#.html" target=frame1>Sub Titel</a></td>
  67. </tr>
  68. <tr>
  69. <td class="menu"><a href="#.html" target=frame1>Sub Titel</a></td>
  70. </tr>
  71. <tr>
  72. <td class="menu"><a href="#.html" target=frame1>Sub Titel</a></td>
  73. </tr>
  74. <tr>
  75. <td class="menu"><a href="#.html" target=frame1>Sub Titel</a></td>
  76. </tr>
  77. <tr>
  78. <td class="menu"><a href="#.html" target=frame1>Sub Titel</a></td>
  79. </tr>
  80. </table></td></table>
Download code! Download code (.txt)

 Stemmen
Niet ingelogd.

 Reacties
Post een reactie
Lees de reacties (10)
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.04s