Ruud Hermans Posted October 28, 2006 Share Posted October 28, 2006 I used the following code for a navigationmenu and was wondering if there is a way to create a 3th layer? <table width="80%"> <tr bgcolor="#585575"> <td onmouseover="showmenu('Hoofdsite')" onmouseout="hidemenu('Hoofdsite')"> <font color="#ffffff">Hoofdsite</font><br /> <table class="menu" id="Hoofdsite" width="120"> <tr><td class="menu"><a href="/html/default.asp"><font color="#000000">Hoofdsite</font></a></td></tr> <tr><td class="menu"><a href="/html/default.asp"><font color="#000000">Venster1</font></a></td></tr> <tr><td class="menu"><a href="/html/default.asp"><font color="#000000">Venster2</font></a></td></tr> <tr><td class="menu"><a href="/html/default.asp"><font color="#000000">Venster3</font></a></td></tr> <tr><td class="menu"><a href="/html/default.asp"><font color="#000000">Venster4</font></a></td></tr> </table> </td> Ruud Hermans Link to comment Share on other sites More sharing options...
boen_robot Posted October 28, 2006 Share Posted October 28, 2006 Exactly what do you mean by "third layer"? Third level of depth in the menu?Well of course. Nest a table inside the nested table, etc.But using tables for navigation is VERY VERY VERY VERY bad. Use lists: <ul> <li>Hoofdsite <ul> <li><a href="/html/default.asp">Hoofdsite</a></li> <li><a href="/html/default.asp">Venster1</a></li> <li><a href="/html/default.asp">Venster2</a></li> <li><a href="/html/default.asp">Venster3</a></li> <li><a href="/html/default.asp">Venster4</a></li> </ul> </li></ul> Creating a new level of depth in this menu is only a matter of creating another list inside a list item. Link to comment Share on other sites More sharing options...
Ruud Hermans Posted October 28, 2006 Author Share Posted October 28, 2006 Could you explain in what way it would be bad to use tables for navigation?Ruud Hermans Link to comment Share on other sites More sharing options...
boen_robot Posted October 28, 2006 Share Posted October 28, 2006 It's lots of code. Lists are shorter and more straight. Lists render as they are downloaded. Tables are rendered after the whole table has been downloaded. This may not be exactly true, but lists still load faster. It's simply not right. Tables for tabular data and lists for... lists. A menu is a list of links to other pages on the site. Link to comment Share on other sites More sharing options...
Ruud Hermans Posted October 28, 2006 Author Share Posted October 28, 2006 Then how should I convert it so it keeps the looks it has now, could you give me an example according to this code? <td onmouseover="showmenu('example')" onmouseout="hidemenu('example')"> <font color="#ffffff">Handgevecht</font><br /> <table class="menu" id="example" width="120"> <tr><td class="menu"><a href="/html/default.asp"><font color="#000000">HTML</font></a></td></tr> </table> </td> CSS: <style>body{font-family:arial;}table{font-size:80%;background:#ffffff}a{color:#ffffff;text-decoration:none;font:bold}a:hover{color:#606060}a:active{color:#ffffff}a:hover{color:#ffffff}a:visited{color:#ffffff}td.menu{background:#d3d2df}table.menu{font-size:100%;position:absolute;visibility:hidden;}</style> java script: <script type="text/javascript">function showmenu(elmnt){document.getElementById(elmnt).style.visibility="visible"}function hidemenu(elmnt){document.getElementById(elmnt).style.visibility="hidden"}</script> Ruud Hermans Link to comment Share on other sites More sharing options...
Ruud Hermans Posted October 29, 2006 Author Share Posted October 29, 2006 Could some one look at this please couse I got lost somewhere in between can't figure it out myself it seems.Edit. could you also explain how you would create a second layer using a table couse I tryed that to and would like to know it sinds I'm greedy to learn and think I'm doing something wrong with the id in that.ThanksRuud Hermans Link to comment Share on other sites More sharing options...
boen_robot Posted October 29, 2006 Share Posted October 29, 2006 There's a whole bunch of menus on CSSplay.co.uk all of which are using lists as carriers. Link to comment Share on other sites More sharing options...
Ruud Hermans Posted October 29, 2006 Author Share Posted October 29, 2006 There's a whole bunch of menus on CSSplay.co.uk all of which are using lists as carriers.Thanks for the link.Ruud Hermans Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now