Geni søges til problemløsning
her er en rigtig svær opgave:jeg har forsimplet problemet så meget jeg kan:
min hjemmeside består af fire menupunkter, og fire submenu´er.
Alle submenu´er ligger under det samme menupunkt ( punk 1 ).
Submenu´erne er består af et layer, og en tabel. Problemet er i 2 punkter:
1) jeg mangler et godt script, som kan holde styr på hvilken submenu ( layer ), der skal vises, og hvilke IKKE skal vises. Dette script skal fungere til 6 level´s ned ( dvs. 6 submenu´er ) så jeg har mulighed at tilføje sub´er.
2) jeg mangeler også et script til at beholde markeringerne. Dvs. når du mouseOver et menupunkt, og flytter musen ned på sub´en, så skal mouseOver effekten stadig ses på menupunktet. Dette skal OGSÅ virke helt ned i 6 level´s.
her er hjemmesiden ( meget forsimplet ):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.style7 {
font-family: Verdana;
font-size: 12px;
color: #003366;
}
</style>
</head>
<body>
<!-- her ligger menu´en -->
<table width="50%" border="1" cellpadding="5" cellspacing="0" bordercolor="#CCCCCC">
<tr>
<td align="center" class="style7" >punkt 1 </td>
<td align="center" class="style7">punkt 2 </td>
<td align="center" class="style7">punkt 3 </td>
<td align="center" class="style7">punkt 4 </td>
</tr>
</table>
<!-- her ligger så sub-menu´erne -->
<div id="sub1" style="position:absolute; left:11px; top:43px; width:155px; height:76px; z-index:1; background-color: #FFFFFF; layer-background-color: #FFFFFF; border: 1px none #000000; visibility: hidden;">
<table width="100%" border="1" cellspacing="0" cellpadding="5">
<tr>
<td align="center" bordercolor="#CCCCCC" class="style7"> punkt 1 - 1 </td>
</tr>
<tr>
<td align="center" bordercolor="#CCCCCC" class="style7">punkt 1 - 2 </td>
</tr>
<tr>
<td align="center" bordercolor="#CCCCCC" class="style7">punkt 1 - 3 </td>
</tr>
<tr>
<td align="center" bordercolor="#CCCCCC" class="style7">punkt 1 - 4 >> </td>
</tr>
</table>
</div>
<div id="sub2" style="position:absolute; left:166px; top:122px; width:155px; height:76px; z-index:1; background-color: #FFFFFF; layer-background-color: #FFFFFF; border: 1px none #000000; visibility: hidden;">
<table width="100%" border="1" cellspacing="0" cellpadding="5">
<tr>
<td align="center" bordercolor="#CCCCCC" class="style7"> punkt 1 - 4 - 1 </td>
</tr>
<tr>
<td align="center" bordercolor="#CCCCCC" class="style7">punkt 1 - 4 - 2 </td>
</tr>
<tr>
<td align="center" bordercolor="#CCCCCC" class="style7">punkt 1 - 4 - 3 >> </td>
</tr>
<tr>
<td align="center" bordercolor="#CCCCCC" class="style7">punkt 1 - 4 - 4 </td>
</tr>
</table>
</div>
<div id="sub3" style="position:absolute; left:321px; top:174px; width:155px; height:76px; z-index:1; background-color: #FFFFFF; layer-background-color: #FFFFFF; border: 1px none #000000; visibility: hidden;">
<table width="100%" border="1" cellspacing="0" cellpadding="5">
<tr>
<td align="center" bordercolor="#CCCCCC" class="style7"> punkt 1 - 4 - 3 - 1 </td>
</tr>
<tr>
<td align="center" bordercolor="#CCCCCC" class="style7">punkt 1 - 4 - 3 - 2 </td>
</tr>
<tr>
<td align="center" bordercolor="#CCCCCC" class="style7">punkt 1 - 4 - 3 - 3 >> </td>
</tr>
<tr>
<td align="center" bordercolor="#CCCCCC" class="style7">punkt 1 - 4 - 3 - 4 </td>
</tr>
</table>
</div>
<div id="sub4" style="position:absolute; left:475px; top:226px; width:196px; height:76px; z-index:1; background-color: #FFFFFF; border: 1px none #000000; visibility: hidden;">
<table width="100%" border="1" cellspacing="0" cellpadding="5">
<tr>
<td align="center" bordercolor="#CCCCCC" class="style7"> punkt 1 - 4 - 3 - 3 -1 </td>
</tr>
<tr>
<td align="center" bordercolor="#CCCCCC" class="style7">punkt 1 - 4 - 3 - 3 - 2 </td>
</tr>
<tr>
<td align="center" bordercolor="#CCCCCC" class="style7">punkt 1 - 4 - 3 - 3 - 3 </td>
</tr>
<tr>
<td align="center" bordercolor="#CCCCCC" class="style7">punkt 1 - 4 - 3 - 3 - 4 </td>
</tr>
</table>
</div>
</body>
</html>