Division A Division B Division C Division D Division E

 

 

 

 

Denne menyen er tilpasset skjermoppløsning på 1024 x 768.
Andre skjermer vil gi feil plassering av undermenyene!


Først putter du script og style hellom HEAD-taggene:

<script language="JavaScript">
function show(Division) {
if(Division.style.display == 'none') {
Division.style.display='block'
} else Division.style.display='none'
}
function hide(Division) {
if(Division.style.display == 'none') {
Division.style.display='block'
} else Division.style.display='none'
}
</script>


<style>
#hode {border-style: solid; border-width: 1px; border-color: #000000; background-color: rgb(220,220,220); font-family: verdana; font-size: 8pt; cursor: hand}
#fot1 {border-style: solid; border-width: 1px; border-color: #000000; background-color: rgb(220,220,220); font-family: verdana; font-size: 8pt; cursor: hand}
#fot2 {border-style: solid; border-width: 1px; border-color: #000000; background-color: rgb(220,220,220); font-family: verdana; font-size: 8pt; cursor: hand}
#fot3 {border-style: solid; border-width: 1px; border-color: #000000; background-color: rgb(220,220,220); font-family: verdana; font-size: 8pt; cursor: hand}
#fot4 {border-style: solid; border-width: 1px; border-color: #000000; background-color: rgb(220,220,220); font-family: verdana; font-size: 8pt; cursor: hand}
#fot5 {border-style: solid; border-width: 1px; border-color: #000000; background-color: rgb(220,220,220); font-family: verdana; font-size: 8pt; cursor: hand}
#lank {font-family: verdana; font-size: 8pt; text-decoration: none; color: rgb(243,122,126)} </style>


Dernest putter du menyen der du vil ha den:

<table cellpadding="8" cellspacing="2" align=center><tr>

<td id="hode" onMouseOver="show(fot1)" onMouseOut="hide(fot1)" width=100 align=center>Division A
<table id="fot1" border="0" cellpadding="8" cellspacing="2" style="position: absolute; top: 130; left: 199; display: none">
<tr><td width=100><a href="http://winfolinx.com" target="_blank" id="lank">Winfolinx.com</a></td></tr>
<tr><td><a href="http://..." id="lank">Division A 2</a></td></tr>
<tr><td><a href="http://..." id="lank">Division A 3</a></td></tr>
<tr><td><a href="http://..." id="lank">Division A 4</a></td></tr>
</table>
</td>

<td id="hode" onMouseOver="show(fot2)" onMouseOut="hide(fot2)" width=100 align=center>Division B
<table id="fot2" border="0" cellpadding="8" cellspacing="2" style="position: absolute; top: 130; left: 319; display: none">
<tr><td width=100><a href="http://..." id="lank">Division B 1</a></td></tr>
<tr><td><a href="http://..." id="lank">Division B 2</a></td></tr>
<tr><td><a href="http://..." id="lank">Division B 3</a></td></tr>
<tr><td><a href="http://..." id="lank">Division B 4</a></td></tr>
</table>
</td>

<td id="hode" onMouseOver="show(fot3)" onMouseOut="hide(fot3)" width=100 align=center>Division C
<table id="fot3" border="0" cellpadding="8" cellspacing="2" style="position: absolute; top: 130; left: 439; display: none">
<tr><td width=100><a href="http://..." id="lank">Division C 1</a></td></tr>
<tr><td><a href="http://..." id="lank">Division C 2</a></td></tr>
<tr><td><a href="http://..." id="lank">Division C 3</a></td></tr>
<tr><td><a href="http://..." id="lank">Division C 4</a></td></tr>
</table>
</td>

<td id="hode" onMouseOver="show(fot4)" onMouseOut="hide(fot4)" width=100 align=center>Division D
<table id="fot4" border="0" cellpadding="8" cellspacing="2" style="position: absolute; top: 130; left: 559; display: none">
<tr><td width=100><a href="http://..." id="lank">Division D 1</a></td></tr>
<tr><td><a href="http://..." id="lank">Division D 2</a></td></tr>
<tr><td><a href="http://..." id="lank">Division D 3</a></td></tr>
<tr><td><a href="http://..." id="lank">Division D 4</a></td></tr>
</table>
</td>

<td id="hode" onMouseOver="show(fot5)" onMouseOut="hide(fot5)" width=100 align=center>Division E
<table id="fot5" border="0" cellpadding="8" cellspacing="2" style="position: absolute; top: 130; left: 679; display: none">
<tr><td width=100><a href="http://..." id="lank">Division E 1</a></td></tr>
<tr><td><a href="http://..." id="lank">Division E 2</a></td></tr>
<tr><td><a href="http://..." id="lank">Division E 3</a></td></tr>
<tr><td><a href="http://..." id="lank">Division E 4</a></td></tr>
</table>

</td></tr></table>

NB: POSITION: (top og left) bestemmer plasseringen av menyen.
Pass på at undermenyene minimun er kant-kant med hovedmenyen, ellers forsvinner undermenyene når du drar musa på dem