3th layer

[Ruud Hermans]

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

[boen_robot]

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.

[Ruud Hermans]

Could you explain in what way it would be bad to use tables for navigation?Ruud Hermans

[boen_robot]

1. It's lots of code. Lists are shorter and more straight.
2. 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.
3. 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.

[Ruud Hermans]

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

[Ruud Hermans]

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

[boen_robot]

There's a whole bunch of menus on CSSplay.co.uk all of which are using lists as carriers.

[Ruud Hermans]

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