--
.asp
--
<html>
<head>
<title>JavaScript TreeMenu</title>
<link href="style.css" rel="stylesheet">
<SCRIPT language=javascript src="menuscript.js" type=text/javascript></SCRIPT>
<base target="_self">
</head>
<body>
<!-- Menu start -->
<TABLE>
<TBODY>
<TR>
<TD align=left class=tool height="100%" vAlign=top width="172">
<TABLE border=0 cellPadding=0 cellSpacing=0 width=250>
<TBODY>
<!-- Head start -->
<tr>
<!--- Som du nok kan se, så står der "head" en hel masse steder på de to næste linier.
Det er fordi, jeg har valgt at den øverste sektion skal hedde "head". Alle de steder
skal du ændre til det navn du ønsker at give denne del af menuen. Dette lag kan du
kopiere så mange gange du ønsker det, men husk at der ikke må være to lag med samme
navn, i dette tilfælde altså "head". EKS: (Se herunder) Der er to lag: head og test.
Læg godt mærke til, hvordan opsætningen er, inden du går igang. Læg mærke til hvilke
tegn, der slutter en linie og hvornår.
Er der mere du ønsker forklaret, så skriv til mig på webmaster@rolator.dk, og så vil
jeg hurtigs muligt og efter bedste evne --->
<TD class=tool id=headmenu onmouseout="menu('out','headmenu')" onmouseover="menu('over','headmenu')" width="250"> <IMG border=0 class=haand height=9 id=headbil onclick="lag('headlag',document.images['headbil'])" src="
http://www.rolator.dk/pics/menu/plus.png" width=9> <SPAN class=haand onclick="lag('headlag',document.images['headbil'])">Hovedområder</SPAN><BR>
<DIV class=detail id=headlag style="DISPLAY: none">
<IMG border=0 height=9 src="pics/menupil.gif" width=9> <A class=detail href="link til filen">Navn på link 1 i lag head</a><BR>
<IMG border=0 height=9 src="pics/menupil.gif" width=9> <A class=detail href="link til filen">Navn på link 2 i lag head</a><BR>
<IMG border=0 height=9 src="pics/menupil.gif" width=9> <A class=detail href="link til filen">Navn på link 3 i lag head</a><BR>
<IMG border=0 height=9 src="pics/menupil.gif" width=9> <A class=detail href="link til filen">Navn på link 4 i lag head</a><BR>
<IMG border=0 height=9 src="pics/menupil.gif" width=9> <A class=detail href="link til filen">Navn på link 5 i lag head</a><BR>
<IMG border=0 height=9 src="pics/menupil.gif" width=9> <A class=detail href="link til filen">Navn på link 6 i lag head</a><BR>
<IMG border=0 height=9 src="pics/menupil.gif" width=9> <A class=detail href="link til filen">Navn på link 7 i lag head</a><BR>
<IMG border=0 height=9 src="pics/menupil.gif" width=9> <A class=detail href="link til filen">Navn på link 8 i lag head</a>
</DIV></TD>
</tr>
<!-- Head slut -->
<!-- Test start -->
<tr>
<TD class=tool id=testmenu onmouseout="menu('out','testmenu')" onmouseover="menu('over','testmenu')" width="250"> <IMG border=0 class=haand height=9 id=testbil onclick="lag('testlag',document.images['testbil'])" src="
http://www.rolator.dk/pics/menu/plus.png" width=9> <SPAN class=haand onclick="lag('testlag',document.images['testbil'])">Gæstebog</SPAN><BR>
<DIV class=detail id=testlag style="DISPLAY: none">
<IMG border=0 height=9 src="pics/menupil.gif" width=9> <A class=detail href="link til filen">Navn på link 1 i lag test</a><BR>
<IMG border=0 height=9 src="pics/menupil.gif" width=9> <A class=detail href="link til filen">Navn på link 2 i lag test</a>
</DIV></TD>
</tr>
<!-- Test slut -->
</TBODY></TABLE></TD>
</TR>
</TBODY>
</TABLE>
<!-- Menu slut -->
</body>
--
menuscript.js
--
function lag(lagnavn, bil) // IE4+
{
if (document.all[lagnavn].style.display == 'none') {
document.all[lagnavn].style.display = 'block';
bil.src = 'pics/minus.png';
} else {
document.all[lagnavn].style.display = 'none';
bil.src = 'pics/plus.png';
}
}
function menu(action, menunavn)
{
if (action == "over") { document.all[menunavn].style.backgroundColor = "";}
if (action == "out") { document.all[menunavn].style.backgroundColor = ""; }
}
function skift(hvor, farve)
{
// husk # i kald til funktion
hvor.style.backgroundColor = farve;
}
--
style.css
--
// MENU
.tool {
BACKGROUND-COLOR: transparent;
BACKGROUND-REPEAT: no-repeat;
COLOR: navy;
FONT-FAMILY: verdana, helvetica, sans-serif;
FONT-SIZE: 10;
FONT-WEIGHT: bold;
PADDING-BOTTOM: 0px;
PADDING-LEFT: 0px;
PADDING-RIGHT: 0px;
PADDING-TOP: 0px
}
.detail {
COLOR: #000000;
FONT-FAMILY: arial,helvetica,geneva,sans-serif;
FONT-SIZE: 10;
}
A.detail {
COLOR: navy;
FONT-SIZE: 10;
FONT-FAMILY: verdana, helvetica, sans-serif;
FONT-WEIGHT: normal;
TEXT-DECORATION: none
}
A.detail:link {
COLOR: navy;
FONT-FAMILY: verdana, helvetica, sans-serif;
FONT-WEIGHT: normal;
TEXT-DECORATION: none
}
A.detail:visited {
COLOR: navy;
FONT-FAMILY: verdana, helvetica, sans-serif;
FONT-WEIGHT: normal;
TEXT-DECORATION: none
}
A.detail:active {
COLOR: navy;
FONT-FAMILY: verdana, helvetica, sans-serif;
FONT-WEIGHT: normal
}
A.detail:hover {
COLOR: red;
FONT-FAMILY: verdana, helvetica, sans-serif;
FONT-WEIGHT: normal;
TEXT-DECORATION: none
}
.haand {
CURSOR: hand;
COLOR: black;
FONT-FAMILY: verdana, helvetica, sans-serif;
FONT-SIZE: 10;
TEXT-DECORATION: none
}