Hey rookie.
Gælder det stadig, for så har jeg et lige til dig. Du skal bare bytte værdierne ud:
Jeg har rodet lidt med et
www.bratta.com's scripts så det kom til at se lidt pænere ud (centreret i dropdown-boxene):
<html>
<head>
<title>Menu</title>
<style>
body{background-color:#FFFFFF}
A{color:#FFFFCC; text-decoration:none}
A:hover{color:#FFFFCC; text-decoration:underline}
A:visited:{color:#CCCCFF; text-decoration:none}
TD{font-family:arial,helvetica; font-size:10pt}
</style>
<style>
A:hover{color:#FFFFCC; text-decoration:underline}
#divBg{position:absolute; width:630; top:0; left:0; visibility:hidden; height:100;}
#divBgColor{position:absolute; top:0; left:0; width:630; height:30; clip:rect(0,630,30,0);
background-color:#003366; layer-background-color:#003366}
DIV.clTop{position:absolute; font-family:arial,helvetica; text-align:center; font-weight:bold; font-size:13px;
color:#FFFFCC; visibility:visible; left:100; top:20; width:90;}
DIV.clSub{position:absolute; top:20; left:0; width:90; visibility:hidden; font-family:arial, helvetica;
font-weight:normal; font-size:12px; background-color:#003366; layer-background-color:#003366;
text-align:center; color:#FFFFCC; clip: rect(0 90 60 0)}
#divTop0{left:0; top:5}
#divTop1{left:90; top:5}
#divTop2{left:180; top:5}
#divTop3{left:270; top:5}
#divTop4{left:360; top:5}
#divTop5{left:450; top:5}
#divTop6{left:540; top:5}
</style>
<script language="JavaScript1.2">
/Browsercheck:*/
ie=document.all?1:0
n=document.layers?1:0
//Do you want it to move with the page if the user scroll the page?
var moveOnScroll=true
//How many menus do you have
numberOfMenus=7
//Do you want to hide all the other submenus when you click a new?
var hideAll=true
/********************************************************************************
Object constructor
********************************************************************************/
function makeMenuBar(obj,nest,vis){
nest=(!nest) ? ':'document.'+nest+'.'
this.css=(n) ? eval(nest+'document.'+obj):eval(obj+'.style')
this.hideIt=b_hideIt; this.showIt=b_showIt
if(ie && vis) this.css.visibility='hidden'
this.evnt=(n)? eval(nest+'document.'+obj):eval(obj);
this.go=0
this.height=n?this.css.document.height:eval(obj+'.offsetHeight')
this.top=b_gettop
this.obj = obj + "Object"; eval(this.obj + "=this")
}
//Get's the top position.
function b_gettop(){
var gleft=(n) ? eval(this.css.top):eval(this.css.pixelTop);
return gleft;
}
//The functions for showing and hiding
function b_showIt(){
this.css.visibility="visible"
}
function b_hideIt(){
this.css.visibility="hidden"
}
/********************************************************************************
Checking if the page is scrolled, if it is move the menu after
********************************************************************************/
function checkScrolled(){
if(!oMenu.go)oMenu.css.top=(!oMenu.state)?eval(scrolled):eval(scrolled)
if(n) setTimeout('checkScrolled()',30)
}
/********************************************************************************
Inits the page, makes the menu object, moves it to the right place,
show it..
********************************************************************************/
function menuBarInit(){
oSub=new Array()
oTop=new Array()
for(i=0;i<numberOfMenus;i++){
oTop[i]=new makeMenuBar('divTop'+i,'divBg')
oSub[i]=new makeMenuBar('divSub'+i,'divBg.document.divTop'+i,1)
oSub[i].evnt.onmouseout=evOut;
}
//Moving menuBar
oMenu=new makeMenuBar('divBg')
scrolled=n?"window.pageYOffset":"document.body.scrollTop"
oMenu.css.top=eval(scrolled)
oMenu.css.visibility='visible'
if(moveOnScroll) ie?window.onscroll=checkScrolled:checkScrolled();
}
/********************************************************************************
Shows and hides the submenus
********************************************************************************/
function evOut(){
if(ie)this.style.visibility='hidden'
else if(n) this.visibility='hidden'
}
//Canceling event bubbling in ie
function ieShow(num){
if(ie){
oSub[num].showIt()
window.event.cancelBubble=true
}
}
function extract(num){
if(hideAll){
for(i=0;i<oSub.length;i++){
if(num!=i) oSub[i].hideIt()
}
}
oSub[num].showIt();
}
onload=menuBarInit;
</script>
</head>
<body bgcolor="White">
<div id="divBg">
<div id="divBgColor"></div>
<div id="divTop0" class="clTop"><a href="#" onmouseover="extract(0)">Humor</a>
<div id="divSub0" class="clSub">
<a href="test.html" onmouseover="ieShow(0)" onmouseout="ieShow(0)">Menulink 1</a><br>
<a href="test.html" onmouseover="ieShow(0)" onmouseout="ieShow(0)">Menulink 2</a><br>
<a href="test.html" onmouseover="ieShow(0)" onmouseout="ieShow(0)">Menulink 3</a><br>
<br>
</div>
</div>
<div id="divTop1" class="clTop"> <a href="#" onmouseover="extract(1)">Artikler/hist.</a>
<div id="divSub1" class="clSub">
<a href="test.html" onmouseover="ieShow(1)" onmouseout="ieShow(1)">Menulink 1</a><br>
<a href="test.html" onmouseover="ieShow(1)" onmouseout="ieShow(1)">Menulink 2</a><br>
<a href="test.html" onmouseover="ieShow(1)" onmouseout="ieShow(1)">Menulink 3</a><br>
<br>
</div>
</div>
<div id="divTop2" class="clTop"> <a href="#" onmouseover="extract(2)">Dikt</a>
<div id="divSub2" class="clSub">
<a href="test.html" onmouseover="ieShow(2)" onmouseout="ieShow(2)">Menulink 1</a><br>
<a href="test.html" onmouseover="ieShow(2)" onmouseout="ieShow(2)">Menulink 2</a><br>
<a href="test.html" onmouseover="ieShow(2)" onmouseout="ieShow(2)">Menulink 3</a><br>
<br>
</div>
</div>
<div id="divTop3" class="clTop"> <a href="#" onmouseover="extract(3)">Parodier</a>
<div id="divSub3" class="clSub">
<a href="test.html" onmouseover="ieShow(3)" onmouseout="ieShow(3)">Menulink 1</a><br>
<a href="test.html" onmouseover="ieShow(3)" onmouseout="ieShow(3)">Menulink 2</a><br>
<a href="test.html" onmouseover="ieShow(3)" onmouseout="ieShow(3)">Menulink 3</a><br>
<br>
</div>
</div>
<div id="divTop4" class="clTop"> <a href="#" onmouseover="extract(4)">Linker</a>
<div id="divSub4" class="clSub">
<a href="test.html" onmouseover="ieShow(4)" onmouseout="ieShow(4)">Menulink 1</a><br>
<a href="test.html" onmouseover="ieShow(4)" onmouseout="ieShow(4)">Menulink 2</a><br>
<a href="test.html" onmouseover="ieShow(4)" onmouseout="ieShow(4)">Menulink 3</a><br>
<br>
</div>
</div>
<div id="divTop5" class="clTop"> <a href="#" onmouseover="extract(5)">Lister</a>
<div id="divSub5" class="clSub">
<a href="test.html" onmouseover="ieShow(5)" onmouseout="ieShow(5)">Menulink 1</a><br>
<a href="test.html" onmouseover="ieShow(5)" onmouseout="ieShow(5)">Menulink 2</a><br>
<a href="test.html" onmouseover="ieShow(5)" onmouseout="ieShow(5)">Menulink 3</a><br>
<br>
</div>
</div>
<div id="divTop6" class="clTop"> <a href="#" onmouseover="extract(6)">Annet</a>
<div id="divSub6" class="clSub">
<a href="test.html" onmouseover="ieShow(6)" onmouseout="ieShow(6)">Menulink 1</a><br>
<a href="test.html" onmouseover="ieShow(6)" onmouseout="ieShow(6)">Menulink 2</a><br>
<a href="test.html" onmouseover="ieShow(6)" onmouseout="ieShow(6)">Menulink 3</a><br>
<br>
</div>
</div>
</div>
</BODY>
</HTML>