Horizontaal menu3

Wehkamp, 's Lands grootste webwinkel! Opleiding Webdesign Verdien aan je site met Tradedoubler!

HOME SCRIPTS Java applets Javascripts PHP scripts Overige scripts GIF PLAATJES Animaties Bullets Lijnen Pijlen ACHTERGRONDEN Baksteen Gebladerte Water Voedsel Gras Stenen Metaal Papier Hout Objecten Ruimte Lucht Weefsels Marmer Gemengd Rots Kalk Spiralen Verschillend GENERATOREN FAQs-pagina Metatag Tabellen Dropdownmenu Popup DIVERSEN Design Documentatie HTML tags Entiteiten Starten met PHP Scripttaal PHP MySQL Praktijk van PHP Games Partners Links Awards Partners Toplijsten Vakanties Computers-inet Telecom Dating Tips Verdien geld HTML editors FTP, filesharing Browsers Zoekmachines Toplijst OPLEIDINGEN CONTACT Forum Gastenboek Email Banners Nieuwsbrief Webcam ZOEKEN
	Binnen 1 minuut uw link op LinkPages.nl !

Bestand Bewerken Beeld Extra Opties Help

Een horizontaal menu, gemaakt door BrainJar (http://www.brainjar.com).
Lijkt sterk op de menubalk van windows.

Onderstaand gedeelte moet je tussen de <HEAD> tags van je pagina plaatsen.

/* Het uitzicht van het gebruikte lettertype op de menubalk */
div.WinBalk,
div.WinBalk a.WinKnop,
div.menu,
div.menu a.WinItem { 
  font-family: "MS Sans Serif", Arial, sans-serif;
  font-size: 8pt;
  font-style: normal;
  font-weight: normal;
  color: white; }
/* De achtergrondkleur van de bovenste menubalk */
div.WinBalk { 
  background-color: #0000ff;
  border: 2px solid;
  border-color: #0000aa #0000cc #0000cc #0000aa;
  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;
  border: 1px solid #0000ff;
  color: white;
  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: transparent;
  border-color: #0000aa #0000cc #0000cc #0000aa;
  color: yellow;}
/* De kleur van de actieve (= aangeklikte) tekst op de bovenste menubalk */
div.WinBalk a.WinKnopActive,
div.WinBalk a.WinKnopActive:hover {
  background-color: #0000cc;
  border-color: #0000aa #0000cc #0000cc #0000aa;
  color: white;
  left: 1px;
  top: 1px;}
/* De achtergrondkleur van de submenu's */
div.menu {
  background-color: #0000ff;
  border: 2px solid;
  border-color: #0000aa #0000cc #0000cc #0000aa;
  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: white;
  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: white;
  color: #0000ff;}
div.menu a.WinItem span.WinItemText {}
div.menu a.WinItem span.WinItempijltje {
  margin-right: -.75em;}
div.menu div.WinItemlijntje {
  border-top: 1px solid #0000aa;
  border-bottom: 1px solid #0000cc;
  margin: 4px 2px;}
</style>

<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){
var i,list;list=el.className.split(" ");
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>

Volgend gedeelte moet je tussen de <BODY> tags plaatsen.

<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>

<div id="BestandMenu" class="menu"
     onmouseover="menuMouseover(event)">
<a class="WinItem" href="#">Bestand 1</a>

<a class="WinItem" href="#"
   onclick="return false;"
   onmouseover="WinItemMouseover(event, 'BestandMenu2');">
   <span class="WinItemText">Bestand 2</span>
   <span class="WinItempijltje">?</span></a>
 
<a class="WinItem" href="#">Bestand 3</a>
<a class="WinItem" href="#">Bestand 4</a>
<a class="WinItem" href="#">Bestand 5</a>

<div class="WinItemlijntje"></div> 

<a class="WinItem" href="#">Bestand 6</a>
</div>

<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>

<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>

<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>

<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>

<div id="BestandMenu2" class="menu">
<a class="WinItem" href="#">Bestand 2.1</a>
<a class="WinItem" href="#">Bestand 2.2</a>
</div>

<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>

<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>