alle gegevens
Beste eeopd,
Bedankt voor je reactie. Hierbij alle gegevens
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<link href="menu.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="menu.js" link="" href="menu.js"></script>
<title>vertikaal menu</title>
</head>
<body>
<div class="sidebarmenu">
<ul id="sidebarmenu1">
<li><a href="#">Nr 1</a></li>
<li><a href="#">Nr 2</a>
<ul>
<li><a href="#">Nr 2a</a></li>
<li><a href="#">Nr 2b</a></li>
</ul>
</li>
<li><a href="#">Nr 3</a>
<ul>
<li><a href="#">Nr 3a</a></li>
<li><a href="#">Nr 3b</a></li>
<li><a href="#">Nr 3c</a></li>
<li><a href="#">Nr 3d</a></li>
<li><a href="#">Nr 3e</a></li>
</ul>
</li>
<li><a href="#">Nr 4</a>
<ul>
<li><a href="#">Nr 4a</a></li>
<li><a href="#">Nr 4b</a></li>
</ul>
</div>
</body>
</html>
De CSS:
.sidebarmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
font: bold 13px Verdana;
width: 180px; /* Main Menu Item widths */
border-bottom: 1px solid #ccc;
}
.sidebarmenu ul li{
position: relative;
}
/* Top level menu links style */
.sidebarmenu ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: white;
text-decoration: none;
padding: 6px;
border-bottom: 1px solid #778;
border-right: 1px solid #778;
}
.sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active{
background-color: Green; /*background of tabs (default state)*/
}
.sidebarmenu ul li a:visited{
color: white;
}
.sidebarmenu ul li a:hover{
background-color: #00EA02;
}
/*Sub level menu items */
.sidebarmenu ul li ul{
position: absolute;
width: 170px; /*Sub Menu Items width */
top: 0;
visibility: hidden;
}
.sidebarmenu a.subfolderstyle{
background: url(right.gif) no-repeat 97% 50%;
}
/* Holly Hack for IE \*/
* html .sidebarmenu ul li { float: left; height: 1%; }
* html .sidebarmenu ul li a { height: 1%; }
/* End */
JAVASCRIPT
var menuids=["sidebarmenu1"] //Enter id(s) of each Side Bar Menu's main UL, separated by commas
function initsidebarmenu(){
for (var i=0; i<menuids.length; i++){
var ultags=document.getElementById(menuids
).getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++){
ultags[t].parentNode.getElementsByTagName("a")[0].className+=" subfolderstyle"
if (ultags[t].parentNode.parentNode.id==menuids) //if this is a first level submenu
ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item
else //else if this is a sub level submenu (ul)
ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
ultags[t].parentNode.onmouseover=function(){
this.getElementsByTagName("ul")[0].style.display="block"
}
ultags[t].parentNode.onmouseout=function(){
this.getElementsByTagName("ul")[0].style.display="none"
}
}
for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
ultags[t].style.visibility="visible"
ultags[t].style.display="none"
}
}
}
if (window.addEventListener)
window.addEventListener("load", initsidebarmenu, false)
else if (window.attachEvent)
window.attachEvent("onload", initsidebarmenu)
Wat ik dus graag wil is de subrubrieken (a-e) in een andere celkleur dan de kleur van de hoofdrubrieken (welke css moet ik dan aanpassen). Ook wil ik graag dat de sububrieken niet naar rechts uitvouwen (bij mouseover) maar naar onderen. Ik had al een css-aanpassing gedaan, maar dan valt de hoofdregel weg, dus ook hier mis ik denk ik weer wat.
