Expanding menu
Jeg vil gerne bruge en Expanding menu på min hjemmeside, koden ser således ud pt:<html>
<head>
<style type="text/css">
body {font-family: Verdana; font-size: 11px; color: #5C5C5C;}
td {font-family: Verdana; font-size: 11px; color: #5C5C5C;}
input, select, textarea {font-family: Verdana; font-size: 11px; color: #5C5C5C; background-color: #FFFFFF;}
A:link {font-family: Verdana; color: #5C5C5C; text-decoration: none; font-weight: normal;}
A:visited {font-family: Verdana; color: #5C5C5C; text-decoration: none; font-weight: normal;}
A:active {font-family: Verdana; color: #5C5C5C; text-decoration: none; font-weight: normal;}
A:hover {font-family: Verdana; color: #5C5C5C; text-decoration: none; font-weight: normal;}
</style>
<style>
<!--
#foldheader{cursor:pointer;cursor:hand ; font-weight:bold ;
list-style-image:url('fold.gif')}
#foldinglist{list-style-image:url('list.gif')}
//-->
</style>
<script language="JavaScript">
<!--
function SymError()
{
return true;
}
window.onerror = SymError;
//-->
</script>
<script language="JavaScript1.2">
<!--
var ns6=document.getElementById&&!document.all
var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1
function checkcontained(e){
var iscontained=0
cur=ns6? e.target : event.srcElement
i=0
if (cur.id=="foldheader")
iscontained=1
else
while (ns6&&cur.parentNode||(ie4&&cur.parentElement)){
if (cur.id=="foldheader"||cur.id=="foldinglist"){
iscontained=(cur.id=="foldheader")? 1 : 0
break
}
cur=ns6? cur.parentNode : cur.parentElement
}
if (iscontained){
var foldercontent=ns6? cur.nextSibling.nextSibling : cur.all.tags("UL")[0]
if (foldercontent.style.display=="none"){
foldercontent.style.display=""
cur.style.listStyleImage="url(open.gif)"
}
else{
foldercontent.style.display="none"
cur.style.listStyleImage="url(fold.gif)"
}
}
}
if (ie4||ns6)
document.onclick=checkcontained
//-->
</script>
<title>Test Menu</title>
</head>
<body topmargin="0" leftmargin="0">
<font face="Verdana">
<ul>
<li id="foldheader"><span style="font-weight: 400">Produkter</li> </span>
<ul id="foldinglist" style="display:none" style=&(head}>
<li><a href="index.htm">Forside</a></li>
<li><a href="produkter.php">Produkter</a></li>
<li><a href="produkter.php">Produkter</a></li>
</ul>
<li id="foldheader"><span style="font-weight: 400">Produkter</li> </span>
<ul id="foldinglist" style="display:none" style=&(head}>
<li><a href="index.htm">Forside</a></li>
<li><a href="produkter.php">Produkter</a></li>
<li><a href="produkter.php">Produkter</a></li>
</ul>
<li id="foldheader"><span style="font-weight: 400">Nested Example</li> </span>
<ul id="foldinglist" style="display:none" style=&{head}>
<li><a href="produkter.php">Produkter</a></li>
<li><a href="produkter.php">Produkter</a></li>
<li id="foldheader"><span style="font-weight: 400">Nested</li> </span>
<ul id="foldinglist" style="display:none" style=&{head}>
<li><a href="produkter.php">Produkter</a></li>
<li><a href="produkter.php">Produkter</a></li>
</ul>
<li><a href="produkter.php">Produkter</a></li>
<li><a href="produkter.php">Produkter</a></li>
</ul>
</ul>
</font>
</body>
</html>
Eksempel på menuen kan ses her: http://www.bitshop.dk/cart/menu.htm
Mit problem er følgende: Hvis i kigger på linket kan det ses at menuen automatisk er rykket en del ind på siden, jeg kan ikke finde ud af hvorfor, nogen der har nogen ide om dette? Desuden skal underpunkterne i menuen ikke rykkes så langt ind som det er tilfældet på siden, kan ej heller finde ud af at ændre dette.
