<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
BODY{
background-color:#000066}
/* Deze stylesheet bepaalt het uitzicht van de menubalk */
/* Dit kun je evt.wijzigen : andere kleuren, ander lettertype, ... */
/* Het uitzicht van het gebruikte lettertype op de menubalk */
div.WinBalk,
div.WinBalk a.WinKnop,
div.menu,
div.menu a.WinItem {
font-family: "TAHOMA", Arial, sans-serif;
font-size: 8pt;
font-style: normal;
font-weight: normal;
color: yellow; }
/* De achtergrondkleur van de bovenste menubalk */
div.WinBalk {
padding: 4px 2px 4px 2px;
text-align: left;}
/* De 'normale' kleur van de tekst op de bovenste menubalk */
div.WinBalk a.WinKnop {
background-color: transparent;
color: #FFFFFF;
cursor: default;
left: 0px;
margin: 1px;
padding: 2px 6px 2px 6px;
position: relative;
text-decoration: none;
top: 0px;
z-index: 100;}
/* De kleur bij muisover van de tekst op de bovenste menubalk */
div.WinBalk a.WinKnop:hover {
background-color: #000099;
color: #FFFFFF;}
/* De kleur van de actieve (= aangeklikte) tekst op de bovenste menubalk */
div.WinBalk a.WinKnopActive,
div.WinBalk a.WinKnopActive:hover {
background-color: #000099;
color: #ff0000;
left: 1px;
top: 1px;}
/* De achtergrondkleur van de submenu's */
div.menu {
background-color: #000066;
left: 0px;
padding: 0px 1px 1px 0px;
position: absolute;
top: 0px;
visibility: hidden;
z-index: 101;}
/* De 'normale' tekstkleur van de submenu's */
div.menu a.WinItem {
color: #ffffff;
cursor: default;
display: block;
padding: 3px 1em;
text-decoration: none;
white-space: nowrap;}
/* Achtergrondkleur en tekstkleur submenu's bij mouseover */
div.menu a.WinItem:hover, div.menu a.WinItemOplichten {
background-color: #000099;
color: #ff0000;}
div.menu a.WinItem span.WinItemText {}
div.menu a.WinItem span.WinItempijltje {
margin-right: -.75em;}
div.menu div.WinItemlijntje {
border-top: 1px solid #000099;
margin: 4px 2px;}
</style>
<!-- Het script : niets aan wijzigen ! -->
<script language= "JavaScript" type="text/javascript">
function Browser() {var ua,s,i;this.isIE=false;this.isNS=false;this.version=null;
ua = navigator.userAgent;s="MSIE";if((i=ua.indexOf(s))>=0){this.isIE=true;
this
.version
=parseFloat
(ua
.substr(i
+ s
.length
));return
;}s
="Netscape6/";if((i
=ua
.indexOf
(s
))>=0){this
.isNS
=true;this
.version
=parseFloat
(ua
.substr(i
+s
.length
)); return;}s="Gecko";if((i=ua.indexOf(s))>=0){this.isNS=true;this.version=6.1;
return;}}var browser=new Browser();var activeButton=null;
if(browser.isIE)document.onmousedown=pageMousedown;
else document.addEventListener("mousedown",pageMousedown,true);
function pageMousedown(event){var el;if(activeButton==null)return;
if(browser.isIE)el=window.event.srcElement;
else el=(event.target.tagName?event.target:event.target.parentNode);
if(el== activeButton)return;
if(getContainerWith(el,"DIV","menu")==null){resetButton(activeButton);activeButton = null;
}}
function buttonClick(event,menuId){var button;
if(browser.isIE)button=window.event.srcElement;
else button=event.currentTarget;button.blur();
if(button.menu==null){button.menu = document.getElementById(menuId);
if(button.menu.isInitialized==null)menuInit(button.menu);}
if(activeButton!=null)resetButton(activeButton);
if(button!=activeButton){depressButton(button);activeButton = button;}
elseactiveButton=null;return false;}
function buttonMouseover(event, menuId){var button;
if(browser.isIE)button=window.event.srcElement;else button=event.currentTarget;
if(activeButton!=null&&activeButton!=button)buttonClick(event, menuId);}
function depressButton(button){var x,y;button.className+=" WinKnopActive";
x=getPageOffsetLeft(button);y=getPageOffsetTop(button)+ button.offsetHeight;
if (browser.isIE){x+=button.offsetParent.clientLeft;
y+=button.offsetParent.clientTop;}
button.menu.style.left=x+"px";button.menu.style.top=y+"px";
button.menu.style.visibility="visible";}
function resetButton(button){removeClassName(button,"WinKnopActive");
if(button.menu!=null){closeSubMenu(button.menu);button.menu.style.visibility="hidden";}}
function menuMouseover(event){var menu;
if(browser.isIE)menu=getContainerWith(window.event.srcElement,"DIV","menu");
else menu=event.currentTarget;if(menu.activeItem!=null)closeSubMenu(menu);}
function WinItemMouseover(event,menuId){var item,menu,x,y;
if(browser.isIE)item=getContainerWith(window.event.srcElement,"A","WinItem");
else item=event.currentTarget;menu=getContainerWith(item,"DIV","menu");
if(menu.activeItem!=null)closeSubMenu(menu);menu.activeItem=item;
item.className+=" WinItemOplichten";
if(item.subMenu==null){item.subMenu=document.getElementById(menuId);
if(item.subMenu.initialized==null)menuInit(item.subMenu);}
x=getPageOffsetLeft(item)+item.offsetWidth;y=getPageOffsetTop(item);var maxX,maxY;
if(browser.isNS){maxX=window.scrollX+window.innerWidth;
maxY=window.scrollY+window.innerHeight;}
if(browser.isIE){maxX=(document.documentElement.scrollLeft!=0?
document.documentElement.scrollLeft:document.body.scrollLeft)
+(document.documentElement.clientWidth!=0?
document.documentElement.clientWidth:document.body.clientWidth);
maxY=(document.documentElement.scrollTop!=0?
document.documentElement.scrollTop:document.body.scrollTop)
+(document.documentElement.clientHeight!=0?
document.documentElement.clientHeight:document.body.clientHeight);}
maxX-=item.subMenu.offsetWidth;maxY-=item.subMenu.offsetHeight;
if(x
>maxX
)x
=Math
.max(0,x
-item
.offsetWidth
-item
.subMenu
.offsetWidth
+(menu
.offsetWidth
-item
.offsetWidth
));y
=Math
.max(0,Math
.min(y
, maxY
)); item.subMenu.style.left=x+"px";item.subMenu.style.top=y+"px";
item.subMenu.style.visibility="visible";
if(browser.isIE)window.event.cancelBubble=true;else event.stopPropagation();}
function closeSubMenu(menu){if(menu==null||menu.activeItem==null)return;
if(menu.activeItem.subMenu!=null){closeSubMenu(menu.activeItem.subMenu);
menu.activeItem.subMenu.style.visibility="hidden";menu.activeItem.subMenu=null;}
removeClassName(menu.activeItem,"WinItemOplichten");menu.activeItem=null;}
function menuInit(menu){
var itemList,spanList;var textEl,pijltjeEl;var itemWidth;var w,dw;var i,j;
if(browser.isIE){menu.style.lineHeight="2.5ex";
spanList=menu.getElementsByTagName("SPAN");
for(i=0;i< spanList.length; i++)
if(hasClassName(spanList[i],"WinItempijltje")){
spanList[i].style.fontFamily="Webdings";spanList[i].firstChild.nodeValue="4";}}
itemList=menu.getElementsByTagName("A");
if(itemList.length>0)itemWidth=itemList[0].offsetWidth;else return;
for(i=0; i < itemList.length; i++) {
spanList=itemList[i].getElementsByTagName("SPAN")
textEl=null
pijltjeEl = null;
for(j=0; j < spanList.length; j++) {
if(hasClassName(spanList[j],"WinItemText"))textEl=spanList[j];
if(hasClassName(spanList[j],"WinItempijltje"))pijltjeEl=spanList[j];}
if(textEl!=null&&pijltjeEl!=null)
textEl.style.paddingRight=(itemWidth-(textEl.offsetWidth+pijltjeEl.offsetWidth))+"px";}
if (browser.isIE){w=itemList[0].offsetWidth;
itemList[0].style.width=w+"px";dw=itemList[0].offsetWidth-w;w-=dw;
itemList[0].style.width=w+"px";}
menu.initialized=true;}
function getContainerWith(node,tagName,className){
while(node!=null){
if(node.tagName!=null&&node.tagName==tagName&&hasClassName(node,className))
return node;node=node.parentNode;}return node;}
function hasClassName(el,name){
for(i
=0;i
<list
.length
;i
++)if(list[i
]==name
)return true;return
false;} function removeClassName(el,name){
var i,curList,newList;if(el.className==null)return;
newList
=new Array();curList
=el
.className
.split(" ");for(i=0;i<curList.length;i++)
if(curList
[i
]!=name
)newList
.push
(curList
[i
]);el
.className
=newList
.join(" ");} function getPageOffsetLeft(el){var x;x=el.offsetLeft;
if(el.offsetParent!=null)x+=getPageOffsetLeft(el.offsetParent);return x;}
function getPageOffsetTop(el){var y;y=el.offsetTop;
if(el.offsetParent!=null)y+=getPageOffsetTop(el.offsetParent);return y;}
</script>
</head>
<body>
<div class="WinBalk" style="position:relative;width=100%;">
<!-- Tekst op de menubalk -->
<a class="WinKnop"
href="#"
onclick="return buttonClick(event, 'BestandMenu');"
onmouseover="buttonMouseover(event, 'BestandMenu');">
Bestand
</a>
<a class="WinKnop"
href="#"
onclick="return buttonClick(event, 'BewerkenMenu');"
onmouseover="buttonMouseover(event, 'BewerkenMenu');">
Bewerken
</a>
<a class="WinKnop"
href="#"
onclick="return buttonClick(event, 'BeeldMenu');"
onmouseover="buttonMouseover(event, 'BeeldMenu');">
Beeld
</a>
<a class="WinKnop"
href="#"
onclick="return buttonClick(event, 'ExtraMenu');"
onmouseover="buttonMouseover(event, 'ExtraMenu');">
Extra
</a>
<a class="WinKnop"
href="#"
onclick="return buttonClick(event, 'OptiesMenu');"
onmouseover="buttonMouseover(event, 'OptiesMenu');">
Opties
</a>
<a class="WinKnop"
href=""
onclick="return buttonClick(event, 'HelpMenu');"
onmouseover="buttonMouseover(event, 'HelpMenu');"
>Help
</a>
</div>
<!-- Maken van de hoofdmenu's. -->
<!-- Menu Bestand -->
<div id="BestandMenu" class="menu"
onmouseover="menuMouseover(event)">
<a class="WinItem" href="#">Bestand 1</a>
<!-- Hier komt een pijltje dat verwijst naar een submenu -->
<a class="WinItem" href="#"
onclick="return false;"
onmouseover="WinItemMouseover(event, 'BestandMenu2');">
<span class="WinItemText">Bestand 2</span>
<span class="WinItempijltje">▶</span></a>
<!-- Einde verwijzing naar submenu -->
<a class="WinItem" href="#">Bestand 3</a>
<a class="WinItem" href="#">Bestand 4</a>
<a class="WinItem" href="#">Bestand 5</a>
<!-- Hier komt een scheidingslijn -->
<div class="WinItemlijntje"></div>
<!-- Einde scheidingslijn -->
<a class="WinItem" href="#">Bestand 6</a>
</div>
<!-- Menu Bewerken -->
<div id="BewerkenMenu" class="menu"
onmouseover="menuMouseover(event)">
<a class="WinItem" href="#">Bewerken 1</a>
<div class="WinItemlijntje"></div>
<a class="WinItem" href="#">Bewerken 2</a>
<a class="WinItem" href=""
onclick="return false;"
onmouseover="WinItemMouseover(event, 'BewerkenMenu3');">
<span class="WinItemText">Bewerken 3</span>
<span class="WinItempijltje">▶</span></a>
<a class="WinItem" href="#">Bewerken 4</a>
<div class="WinItemlijntje"></div>
<a class="WinItem" href="#">Bewerken 5</a>
</div>
<!-- Menu Beeld -->
<div id="BeeldMenu" class="menu">
<a class="WinItem" href="#">Beeld 1</a>
<a class="WinItem" href="#">Beeld 2</a>
<a class="WinItem" href="#">Beeld 3</a>
</div>
<!-- Menu Extra -->
<div id="ExtraMenu" class="menu"
onmouseover="menuMouseover(event)">
<a class="WinItem" href="#"
onclick="return false;"
onmouseover="WinItemMouseover(event, 'ExtraMenu1');">
<span class="WinItemText">Extra 1</span>
<span class="WinItempijltje">▶</span></a>
<a class="WinItem" href="#">Extra 2</a>
<a class="WinItem" href="#">Extra 3</a>
<div class="WinItemlijntje"></div>
<a class="WinItem" href="#"
onclick="return false;"
onmouseover="WinItemMouseover(event, 'ExtraMenu4');">
<span class="WinItemText">Extra 4</span>
<span class="WinItempijltje">▶</span></a>
<a class="WinItem" href="#">Extra 5</a>
</div>
<!-- Menu Opties -->
<div id="OptiesMenu" class="menu">
<a class="WinItem" href="#">Opties 1</a>
<a class="WinItem" href="#">Opties 2</a>
<a class="WinItem" href="#">Opties 3</a>
</div>
<!-- Menu Help -->
<div id="HelpMenu" class="menu">
<a class="WinItem" href="#">Help 1</a>
<a class="WinItem" href="#">Help 2</a>
<div class="WinItemlijntje"></div>
<a class="WinItem" href="#">Help 3</a>
</div>
<!-- Bestand submenu's. -->
<div id="BestandMenu2" class="menu">
<a class="WinItem" href="#">Bestand 2.1</a>
<a class="WinItem" href="#">Bestand 2.2</a>
</div>
<!-- Bewerken submenu's. -->
<div id="BewerkenMenu3" class="menu"
onmouseover="menuMouseover(event)">
<a class="WinItem" href="#">Bewerken 3.1</a>
<a class="WinItem" href="#">Bewerken 3.2</a>
<div class="WinItemlijntje"></div>
<a class="WinItem" href="#"
onclick="return false;"
onmouseover="WinItemMouseover(event, 'BewerkenMenu3_3');">
<span class="WinItemText">Bewerken 3.3</span>
<span class="WinItempijltje">▶</span></a>
<a class="WinItem" href="#">Bewerken 3.4</a>
</div>
<div id="BewerkenMenu3_3" class="menu">
<a class="WinItem" href="#">Bewerken 3.3.1</a>
<a class="WinItem" href="#">Bewerken 3.3.2</a>
<a class="WinItem" href="#">Bewerken 3.3.3</a>
<div class="WinItemlijntje"></div>
<a class="WinItem" href="#">Bewerken 3.3.4</a>
</div>
<!-- Extra submenu's. -->
<div id="ExtraMenu1" class="menu">
<a class="WinItem" href="#">Extra 1.1</a>
<a class="WinItem" href="#">Extra 1.2</a>
<div class="WinItemlijntje"></div>
<a class="WinItem" href="#">Extra 1.3</a>
<a class="WinItem" href="#">Extra 1.4</a>
<div class="WinItemlijntje"></div>
<a class="WinItem" href="#">Extra 1.5</a>
</div>
<div id="ExtraMenu4" class="menu"
onmouseover="menuMouseover(event)">
<a class="WinItem" href="#">Extra 4.1</a>
<a class="WinItem" href="#">Extra 4.2</a>
<a class="WinItem" href="#"
onclick="return false;"
onmouseover="WinItemMouseover(event, 'ExtraMenu4_3');">
<span class="WinItemText">Extra 4.3</span>
<span class="WinItempijltje">▶</span></a>
</div>
<div id="ExtraMenu4_3" class="menu">
<a class="WinItem" href="#">Extra 4.3.1</a>
<a class="WinItem" href="#">Extra 4.3.2</a>
<a class="WinItem" href="#">Extra 4.3.3</a>
<a class="WinItem" href="#"
onclick="return false;"
onmouseover="WinItemMouseover(event, 'ExtraMenu4_3_4');">
<span class="WinItemText">Extra 4.3.4</span>
<span class="WinItempijltje">▶</span></a>
</div>
<div id="ExtraMenu4_3_4" class="menu">
<a class="WinItem" href="#">Extra 4.3.4.1</a>
<a class="WinItem" href="#">Extra 4.3.4.2</a>
<a class="WinItem" href="#">Extra 4.3.4.3</a>
<a class="WinItem" href="#">Extra 4.3.4.4</a>
</div>
</body>
</html>