Rob's Domein
LinkSite.eu - Link toevoegen of aanmelden (eu)
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
CONTACT
Forum
Gastenboek
Email
Banners
Nieuwsbrief
Webcam
ZOEKEN
Binnen 1 minuut uw link op LinkPages.nl !
LinkPages.nl - Link toevoegen of aanmelden (nl)
Bestand
Bewerken
Beeld
Extra
Opties
Help
Bestand 1
Bestand 2
?
Bestand 3
Bestand 4
Bestand 5
Bestand 6
Bewerken 1
Bewerken 2
Bewerken 3
?
Bewerken 4
Bewerken 5
Beeld 1
Beeld 2
Beeld 3
Extra 1
?
Extra 2
Extra 3
Extra 4
?
Extra 5
Opties 1
Opties 2
Opties 3
Help 1
Help 2
Help 3
Bestand 2.1
Bestand 2.2
Bewerken 3.1
Bewerken 3.2
Bewerken 3.3
?
Bewerken 3.4
Bewerken 3.3.1
Bewerken 3.3.2
Bewerken 3.3.3
Bewerken 3.3.4
Extra 1.1
Extra 1.2
Extra 1.3
Extra 1.4
Extra 1.5
Extra 4.1
Extra 4.2
Extra 4.3
?
Extra 4.3.1
Extra 4.3.2
Extra 4.3.3
Extra 4.3.4
?
Extra 4.3.4.1
Extra 4.3.4.2
Extra 4.3.4.3
Extra 4.3.4.4
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.
<style type="text/css"> /* 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: "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.
<div class="WinBalk" style="position:relative;width=100%;"> <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> <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 </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="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> <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>