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: 22376 - 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>

php code - Bekijk de code zonder highlighting - Klap code in 
  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>
php code - Bekijk de code zonder highlighting - Klap code in 
  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.038s