login  Naam:   Wachtwoord: 
Registreer je!
 Forum

menu???

Offline blub - 16/01/2006 13:02
Avatar van blubNieuw lid ik heb een layout gemaakt

http://www.antonides-design.nl/TEST/technica2.jpg

nu heb ik daar een menu gemaakt!!
maar hoe zou ik die het bestte kunne maken in html/css/javascript?
de bovenste is de hoofdlink!! en de onderste zijn sublinks!!
het moet werken met een rollover !!
heeft er iemand tips.

gr michel:cool:

4 antwoorden

Gesponsorde links
Offline Thomas - 16/01/2006 13:06
Avatar van Thomas Moderator Werken met het tonen/verbergen van sublinks door middel van <div>'s.
Offline blub - 16/01/2006 13:16
Avatar van blub Nieuw lid heeft iemand daar mischien een goede tutorial van???:D
Offline ThAlmighty - 16/01/2006 17:18 (laatste wijziging 16/01/2006 17:19)
Avatar van ThAlmighty HTML beginner ik heb wel zoiets dergelijks gedownload ergens,komt ie:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <!--Links used to initiate the sub menus. Pass in the desired submenu index numbers (ie: 0, 1) -->
  2. <table width="100%" height="20" border="0" cellspacing="0" cellpadding="0">
  3.   <tr>
  4.     <td colspan=2 height="2" bgcolor="#000000"></td>
  5.   </tr>
  6.   <tr>
  7.     <td height=18 width=30></td>
  8.     <td valign="top"><font size=2>		
  9. 		<a class=link href="?id=1">Home</a> |
  10. 		<img src=pics/arrow-down.bmp><a class=link href="?id=31" onMouseover="showit(1)">News</a> |
  11. 		<img src=pics/arrow-down.bmp><a class=link href="?id=121" onMouseover="showit(0)">Members</a> | 
  12. 		<img src=pics/arrow-down.bmp><a class=link href="" onMouseover="showit(2)">Info</a> |
  13. 		<a class=link href="forum/">Forum</a> | 
  14.  
  15. 	</font></td>
  16.   </tr>
  17. </table>
  18.  
  19. <!-- Edit the dimensions of the below, plus background color-->
  20. <ilayer width=100% height=32 name="dep1" bgcolor="000000"> 
  21. <layer name="dep2" width=100% height=32> </layer>
  22. </ilayer>
  23. <table width="100%" border="0" cellspacing="0" cellpadding="0">
  24.   <tr>
  25.     <td colspan=2 height=2 bgcolor="1b1b1b"></td>
  26.   </tr>
  27.   <tr>
  28.     <td width=50 bgcolor="1d1d1d" background="pics/menu-bar.bmp"></td>
  29.     <td valign="bottom" background="pics/menu-bar.bmp"><div align="left" id="describe" style="height:20px" onMouseover="clear_delayhide()" onMouseout="resetit(event)"></div></td>
  30.   </tr>
  31. </table>
  32.  
  33. <script language="JavaScript1.2">
  34.  
  35. /*
  36. Tabs Menu (mouseover)- By Dynamic Drive
  37. For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
  38. This credit MUST stay intact for use
  39. */
  40.  
  41. var submenu=new Array()
  42.  
  43. //Set submenu contents. Expand as needed. For each content, make sure everything exists on ONE LINE. Otherwise, there will be JS errors.
  44.  
  45. submenu[0]='<font size=-1><b><a class=link href="?id=121">Members</a> | <a class=link href="?id=122">Join us</a> | <a class=link href="?id=123">Try outs</a></b></font>'
  46.  
  47. submenu[1]='<font size=-1><b><a class=link href="?id=31">News</a> | <a class=link href="?id=32">News Archief</a></b></font>'
  48.  
  49. submenu[2]='<font size=-1><b><a class=link href="?id=131">Clan info</a> | <a class=link href="?id=132">Server Info</a></b></font>'
  50.  
  51. submenu[10]='<font size=-1><b><a class=link href="forum/profile.php?mode=register">Register</a> | <a class=link href="forum/profile.php?mode=sendpassword">Forgot Password</a></b></font>'
  52.  
  53. //Set delay before submenu disappears after mouse moves out of it (in milliseconds)
  54. var delay_hide=1000
  55.  
  56. /////No need to edit beyond here
  57.  
  58. var menuobj=document.getElementById? document.getElementById("describe") : document.all? document.all.describe : document.layers? document.dep1.document.dep2 : ""
  59.  
  60. function showit(which){
  61. clear_delayhide()
  62. thecontent=(which==-1)? "" : submenu[which]
  63. if (document.getElementById||document.all)
  64. menuobj.innerHTML=thecontent
  65. else if (document.layers){
  66. menuobj.document.write(thecontent)
  67. menuobj.document.close()
  68. }
  69. }
  70.  
  71. function resetit(e){
  72. if (document.all&&!menuobj.contains(e.toElement))
  73. delayhide=setTimeout("showit(-1)",delay_hide)
  74. else if (document.getElementById&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
  75. delayhide=setTimeout("showit(-1)",delay_hide)
  76. }
  77.  
  78. function clear_delayhide(){
  79. if (window.delayhide)
  80. clearTimeout(delayhide)
  81. }
  82.  
  83. function contains_ns6(a, b) {
  84. while (b.parentNode)
  85. if ((b = b.parentNode) == a)
  86. return true;
  87. return false;
  88. }
  89.  
  90. </script>


Ik heb ff geen tijd om het uit te leggen, misschien heb je er iets aan

ThAlmighty
Offline blub - 16/01/2006 20:16
Avatar van blub Nieuw lid dit zocht ik !! mijn dank is groot:D
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.254s