login  Naam:   Wachtwoord: 
Registreer je!
 Scripts:
Scripts > Overige > CSS > Dropdown menu(m.b.v DIV)

Dropdown menu(m.b.v DIV)

Auteur: redsd - 13 maart 2008 - 15:25 - Gekeurd door: Stijn - Hits: 7127 - Aantal punten: 5.00 (2 stemmen)




Ik heb veelal scripts gezien waarbij gebruikt gemaakt wordt van <UL> <LI> tags om een dropdown menu te creëren.
IE6 wilt dan nog wel eens niet mee werken of vormt complicaties met andere js, zoals een lightbox.

Hieronder laat ik daarom in het kort even zien hoe je met behulp van DIV tags ook een drop down menu kan creëren die in Firefox, ie6 en ie7 zeker werkt.

Elke menuknop is gekoppeld aan een id van een andere DIV met dit id (tabmenu0,tabmenu1,tabmenu2).
Wanneer je meer menu knoppen wilt toevoegen, kan je simpel weg een stuk copieren en plakken, maar let dus wel op dat je deze drie regels wijzigd:
-onmouseover="document.getElementById('tabmenu0').style.display=''" <!-- tabmenu0 veranderen -->
-onmouseout="document.getElementById('tabmenu0').style.display='none'" <!-- tabmenu0 veranderen -->
-<div id="tabmenu0" style="display:none; width:150px; background-color:#000000; float:left; position:absolute;"> <!-- tabmenu0 veranderen -->

Zorg dat alle veranderde namen voor de nieuwe knop de zelfde naam hebben.

Code:
DIV versie:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div style="width:470px">
  2. <div style="clear: both;"></div>
  3.  
  4. <!--Eerste menuknop -->
  5. <div 
  6. onmouseover="document.getElementById('tabmenu0').style.display=''" 
  7. onmouseout="document.getElementById('tabmenu0').style.display='none'" 
  8. style="margin-right:2px; display:block; width:150px; height:20px; border:1px #000000 solid; float:left;">
  9. Menu1
  10.     <div style="clear: both;"></div>
  11.     <div id="tabmenu0" style="display:none; width:150px; background-color:#000000; float:left; position:absolute;"> 
  12.         <a style="color:#FFFFFF" href="#">submenu1</a><br>
  13.         <a style="color:#FFFFFF" href="#">submenu2</a><br>
  14.         <a style="color:#FFFFFF" href="#">submenu3</a><br>
  15.         <a style="color:#FFFFFF" href="#">submenu4</a><br>
  16.         <a style="color:#FFFFFF" href="#">submenu5</a><br>
  17.         <a style="color:#FFFFFF" href="#">submenu6</a><br>
  18.     </div>
  19.     <div style="clear: both;"></div>
  20. </div>
  21. <!--Tweede menuknop -->
  22. <div 
  23. onmouseover="document.getElementById('tabmenu1').style.display=''" 
  24. onmouseout="document.getElementById('tabmenu1').style.display='none'" 
  25. style="margin-right:2px; display:block; width:150px; height:20px; border:1px #000000 solid; float:left;">
  26. Menu2
  27.     <div style="clear: both;"></div>
  28.     <div id="tabmenu1" style="display:none; width:150px; background-color:#000000; float:left; position:absolute;"> 
  29.         <a style="color:#FFFFFF" href="#">submenu1</a><br>
  30.         <a style="color:#FFFFFF" href="#">submenu2</a><br>
  31.         <a style="color:#FFFFFF" href="#">submenu3</a><br>
  32.         <a style="color:#FFFFFF" href="#">submenu4</a><br>
  33.     </div>
  34.     <div style="clear: both;"></div>
  35. </div>
  36.  
  37. <!--Derde menuknop -->
  38. <div 
  39. onmouseover="document.getElementById('tabmenu2').style.display=''" 
  40. onmouseout="document.getElementById('tabmenu2').style.display='none'" 
  41. style="margin-right:2px; display:block; width:150px; height:20px; border:1px #000000 solid; float:left;">
  42. Menu3
  43.     <div style="clear: both;"></div>
  44.     <div id="tabmenu2" style="display:none; width:150px; background-color:#000000; float:left; position:absolute;"> 
  45.         <a style="color:#FFFFFF" href="#">submenu1</a><br>
  46.         <a style="color:#FFFFFF" href="#">submenu2</a><br>
  47.         <a style="color:#FFFFFF" href="#">submenu3</a><br>
  48.         <a style="color:#FFFFFF" href="#">submenu4</a><br>
  49.         <a style="color:#FFFFFF" href="#">submenu5</a><br>
  50.         <a style="color:#FFFFFF" href="#">submenu6</a><br>
  51.         <a style="color:#FFFFFF" href="#">submenu7</a><br>
  52.     </div>
  53.     <div style="clear: both;"></div>
  54. </div>
  55. <div style="float:left;width:450px">
  56. text
  57. <div>
  58. <div style="clear: both;"></div>
  59. <div style="width:450px">


Table versie:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <table width="600" border="1" cellpadding="2" cellspacing="2">
  2.   <tr>
  3.     <td>
  4. <!--Eerste menuknop -->
  5. <div 
  6. onmouseover="document.getElementById('tabmenu0').style.display=''" 
  7. onmouseout="document.getElementById('tabmenu0').style.display='none'" 
  8. style="margin-right:2px; display:block; width:150px; height:20px; border:1px #000000 solid; float:left;">
  9. Menu1
  10.     <div style="clear: both;"></div>
  11.     <div id="tabmenu0" style="display:none; width:150px; background-color:#000000; float:left; position:absolute;"> 
  12.         <a style="color:#FFFFFF" href="#">submenu1</a><br>
  13.         <a style="color:#FFFFFF" href="#">submenu2</a><br>
  14.         <a style="color:#FFFFFF" href="#">submenu3</a><br>
  15.         <a style="color:#FFFFFF" href="#">submenu4</a><br>
  16.         <a style="color:#FFFFFF" href="#">submenu5</a><br>
  17.         <a style="color:#FFFFFF" href="#">submenu6</a><br>
  18.     </div>
  19.     <div style="clear: both;"></div>
  20. </div>
  21. <!--Tweede menuknop -->
  22. <div 
  23. onmouseover="document.getElementById('tabmenu1').style.display=''" 
  24. onmouseout="document.getElementById('tabmenu1').style.display='none'" 
  25. style="margin-right:2px; display:block; width:150px; height:20px; border:1px #000000 solid; float:left;">
  26. Menu2
  27.     <div style="clear: both;"></div>
  28.     <div id="tabmenu1" style="display:none; width:150px; background-color:#000000; float:left; position:absolute;"> 
  29.         <a style="color:#FFFFFF" href="#">submenu1</a><br>
  30.         <a style="color:#FFFFFF" href="#">submenu2</a><br>
  31.         <a style="color:#FFFFFF" href="#">submenu3</a><br>
  32.         <a style="color:#FFFFFF" href="#">submenu4</a><br>
  33.     </div>
  34.     <div style="clear: both;"></div>
  35. </div>
  36.  
  37. <!--Derde menuknop -->
  38. <div 
  39. onmouseover="document.getElementById('tabmenu2').style.display=''" 
  40. onmouseout="document.getElementById('tabmenu2').style.display='none'" 
  41. style="margin-right:2px; display:block; width:150px; height:20px; border:1px #000000 solid; float:left;">
  42. Menu3
  43.     <div style="clear: both;"></div>
  44.     <div id="tabmenu2" style="display:none; width:150px; background-color:#000000; float:left; position:absolute;"> 
  45.         <a style="color:#FFFFFF" href="#">submenu1</a><br>
  46.         <a style="color:#FFFFFF" href="#">submenu2</a><br>
  47.         <a style="color:#FFFFFF" href="#">submenu3</a><br>
  48.         <a style="color:#FFFFFF" href="#">submenu4</a><br>
  49.         <a style="color:#FFFFFF" href="#">submenu5</a><br>
  50.         <a style="color:#FFFFFF" href="#">submenu6</a><br>
  51.         <a style="color:#FFFFFF" href="#">submenu7</a><br>
  52.     </div>
  53.     <div style="clear: both;"></div>
  54. </div></td>
  55.   </tr>
  56.   <tr>
  57.     <td>Text</td>
  58.   </tr>
Download code! Download code (.txt)

Download dit script! Bekijk een voorbeeld van dit script!
 Stemmen
Niet ingelogd.

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