Har fundet et script i bogen 44 Javascripts klar til brug:
var menuStatus = new Array();
function openMenu(menuID,object) {
rowID=object.rowIndex+1;
obj=object.parentNode;
if (!menuStatus[menuID] || null) {
obj.rows[object.rowIndex].cells[0].innerHTML = obj.rows[object.rowIndex].cells[0].innerHTML.replace(/c.gif/,'o.gif');
obj.insertRow(rowID);
obj.rows[rowID].insertCell(0);
obj.rows[rowID].cells[0].innerHTML=document.getElementById(menuID).innerHTML;
obj.rows[rowID].cells[0].className='submenu';
menuStatus[menuID]=true }
else {
obj.rows[object.rowIndex].cells[0].innerHTML = obj.rows[object.rowIndex].cells[0].innerHTML.replace(/o.gif/,'c.gif');
obj.deleteRow(rowID);
menuStatus[menuID]=false }
}
function highlight(object){
object.className='menuhover';
}
function dontHighlight(object){
object.className='menu';
}
<HTML>
<HEAD>
<TITLE> Hierarkisk menu </TITLE>
<script src="menu.js"></script>
<style type="text/css">
#dynTable {
position:absolute;
top:20px; /* Menuens placering fra top */
left:20px; /* Menuens placering fra venstre */
border:1px black solid; /* Menuens kant */
cursor:pointer;cursor:hand; /* Musepilens form over menuen */
width:140px; /* Menuens bredde */
}
.menu {
height:22px; /* Menuteksts højde */
color:#FFFF99; /* Menuteksts farve */
background-color:#00CCFF; /* Menuteksts baggrundsfarve */
font-family:verdana; /* Menuteksts skrifttype */
font-size:14px; /* Menuteksts størrelse */
font-weight:bold; /* Menuteksts form */
}
.menuhover {
height:22px; /* Menuteksts højde */
color:white; /* Menuteksts farve */
background-color:gray; /* Menuteksts baggrundsfarve */
font-family:verdana; /* Menuteksts skrifttype */
font-size:14px; /* Menuteksts størrelse */
font-weight:bold; /* Menuteksts form */
}
.menulink {
color:#FFFF99; /* Menuteksts farve */
text-decoration:none; /* Ingen understregning af links*/
}
.submenu {
width:100%; /* Submenuteksts bredde */
color:black; /* Submenuteksts farve */
background-color:#CCFFFF; /* Submenuteksts baggrundsfarve */
font-family:verdana; /* Submenuteksts skrifttype */
font-size:12px; /* Submenuteksts størrelse */
text-decoration:none; /* Ingen understregning af links*/
}
A.submenu:hover{
font-weight:bold; /* Den aktive submenuteksts tekstform*/
color:white; /* Den aktive submenuteksts farve*/
background-color:gray; /* Den aktive submenuteksts baggrundsfarve*/
}
</style>
</HEAD>
<BODY>
<TABLE id=dynTable border=0 cellpadding=0 cellspacing=0>
<TR onClick="openMenu('menu1',this)">
<TD class=menu onMouseOver="highlight(this)" onMouseOut="dontHighlight(this)">
<IMG SRC="c.gif"> Menupunkt 1</TD></TR>
<TR onClick="openMenu('menu2',this)">
<TD class=menu onMouseOver="highlight(this)" onMouseOut="dontHighlight(this)">
<IMG SRC="c.gif"> Menupunkt 2</TD></TR>
<TR onClick="openMenu('menu3',this)">
<TD class=menu onMouseOver="highlight(this)" onMouseOut="dontHighlight(this)">
<IMG SRC="c.gif"> Menupunkt 3</TD></TR>
<TR>
<TD class=menu onMouseOver="highlight(this)" onMouseOut="dontHighlight(this)">
<IMG SRC="c.gif" style="visibility:hidden"> <A HREF="#" class=menulink target=main>Menupunkt 4</A></TD></TR>
<TR onClick="openMenu('menu5',this)">
<TD class=menu onMouseOver="highlight(this)" onMouseOut="dontHighlight(this)">
<IMG SRC="c.gif"> Menupunkt 5</TD></TR>
</TABLE>
<div id=menu1 style="visibility:hidden">
<a href="
http://www.dynamiskhtml.dk" class=submenu target=main> Om CSS</a><br>
<a href="
http://www.dynamiskhtml.dk" class=submenu target=main> Om JavaScript</a><br>
<a href="
http://www.dynamiskhtml.dk" class=submenu target=main> Om DHTML</a></div>
<div id=menu2 style="visibility:hidden">
<a href="
http://www.dynamiskhtml.dk" class=submenu target=main> Om CSS</a><br>
<a href="
http://www.dynamiskhtml.dk" class=submenu target=main> Om JavaScript</a><br>
<a href="
http://www.dynamiskhtml.dk" class=submenu target=main> Om DHTML</a></div>
<div id=menu3 style="visibility:hidden">
<a href="
http://www.dynamiskhtml.dk" class=submenu target=main> Om CSS</a><br>
<a href="
http://www.dynamiskhtml.dk" class=submenu target=main> Om JavaScript</a><br>
<a href="
http://www.dynamiskhtml.dk" class=submenu target=main> Om DHTML</a></div>
<div id=menu5 style="visibility:hidden">
<a href="
http://www.dynamiskhtml.dk" class=submenu target=main> Om CSS</a><br>
<a href="
http://www.dynamiskhtml.dk" class=submenu target=main> Om JavaScript</a><br>
<a href="
http://www.dynamiskhtml.dk" class=submenu target=main> Om DHTML</a></div>
</BODY>
</HTML>
Det virker egentlig helt fint til mit behov. Mit spørgsmål er nu bare: hvordan forhindre jeg at menuen klapper sammen hvergang brugeren trykker på et hyperlink??
Ny bruger
Nybegynder
Opret
Preview
