Hjælp til dropdown menu
Hej,Jeg har lavet en dropdown menu ud fra denne guide: http://javascript-array.com/scripts/simple_drop_down_menu/
Jeg har lavet selve menuen om til en vertical menu, så alle punkter står listet under hinanden istedet for ved siden af hinanden. Nu vil jeg så gerne have undermenuen til at folde sig ud ved siden af selve menuen - istedet for oven i.
Jeg har smidt koden op her, så håber jeg i kan se hvad jeg mener:
----------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Dropdown Menu</title>
<link rel="stylesheet" type="text/css" href="style.css">
<!-- Dropdown menu -->
<script type="text/javascript">
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
// Open hidden layer
function mopen(id)
{
// Cancel close timer
mcancelclosetimer();
// Close old layer
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
// Get new layer and show it
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';
}
//Close showed layer
function mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}
// Go close timer
function mclosetimer()
{
closetimer = window.setTimeout(mclose, timeout);
}
// Cancel close timer
function mcancelclosetimer()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}
// Close layer when click out
document.onclick = mclose;
</script>
</head>
<body>
<ul id="ddm">
<li><a href="#" onmouseover="mopen('m1')" onmouseout="mclosetimer()">Forside</a>
<div id="m1" onmouseover="mcancelclosetimer()" onmouseout="mclosetimer()">
<a href="#">Velkommen</a>
<a href="#">Til</a>
<a href="#">Hjemmesiden</a>
</div>
</li>
<li><a href="#" onmouseover="mopen('m2')" onmouseout="mclosetimer()">Katalog</a>
<div id="m2" onmouseover="mcancelclosetimer()" onmouseout="mclosetimer()">
<a href="#">AAAAAAAA</a>
<a href="#">BBBBBBBB</a>
<a href="#">CCCCCCCC</a>
<a href="#">DDDDDDDD</a>
<a href="#">EEEEEEEE</a>
<a href="#">FFFFFFFF</a>
<a href="#">GGGGGGGG</a>
<a href="#">HHHHHHHH</a>
</div>
</li>
<li><a href="#" onmouseover="mopen('m3')" onmouseout="mclosetimer()">Kompetencer</a>
<div id="m3" onmouseover="mcancelclosetimer()" onmouseout="mclosetimer()">
<a href="#">111111111</a>
<a href="#">222222222</a>
<a href="#">333333333</a>
<a href="#">444444444</a>
<a href="#">555555555</a>
<a href="#">666666666</a>
<a href="#">777777777</a>
<a href="#">888888888</a>
</div>
</li>
<li><a href="#">Historie</a>
</li>
<li><a href="#">Kontakt</a>
</li>
</ul>
</body>
</html>
----------------------------------------------------------------
CSS:
----------------------------------------------------------------
#ddm
{
margin: 0;
padding: 0;
z-index: 30;
}
#ddm li
{
margin: 1px 0 0 0;
padding: 0;
list-style: none;
font: bold 11px arial;
}
#ddm li a
{
display: block;
margin: 0 0 0 0;
padding: 4px 10px;
width: 80px;
background: #5970B2;
color: #FFF;
text-align: center;
text-decoration: none;
}
#ddm li a:hover
{
background: #49A3FF;
}
#ddm div
{
float: left;
position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #EAEBD8;
border: 1px solid #5970B2;
}
#ddm div a
{
position: relative;
display: block;
margin: 0;
padding: 5px 10x;
width: auto;
white-space: nowrap;
text-align: left;
text-decoration: none;
background: #EAEBD8;
color: #2875DE;
font: 11px arial;
}
#ddm div a:hover
{
background: #49A3FF;
color: #FFF;
}
-----------------------------------------------------------------
