Hallo, ik heb het volgende script voor een menu (verticaal vouwmenu)
Hier het script in de <head>
<style type="text/css">
DIV.clSlide{position:absolute; ;z-index:10; left:0; width:138; height:22; clip:rect(0,138,22,0); padding:3px;}
DIV.clSlideSub{position:absolute; ;z-index:10; padding:2px; clip:rect(0,127,20,0); width:127; height:20; left:8; visibility:hidden}
DIV.clSlideSub2{position:absolute; ;z-index:10; padding:2px; clip:rect(0,118,20,0); width:118; height:20; left:8; visibility:hidden}
#divSlideCont{position:absolute; z-index:10; left:0; top:100; height:600; width:170; visibility:hidden}
A.clSlideLinks{font-family:Verdana, Helvetica, Helv; font-size:11px; font-weight:bold; text-decoration:none; color:white}
A.clSlideSubLinks{font-family:Verdana, Helvetica, Helv; font-size:10px; text-decoration:none; color:Navy}
A.clSlideSub2Links{font-family:Verdana, Helvetica, Helv; font-size:9px; text-decoration:none; color:Navy}
</style>
<script language="Javascript" type="text/javascript">
/**********************************************************************************
SlideMenu
* Copyright (C) 2001 Thomas Brattli
* This script was released at DHTMLCentral.com
* Visit for more great scripts!
* This may be used and changed freely as long as this msg is intact!
* We will also appreciate any links you could give us.
*
* Made by Thomas Brattli
*
* script date: 08/01/2002 (keep this date to check versions)
*********************************************************************************/
function lib_bwcheck(){ //Browsercheck (needed)
this.ver=navigator.appVersion
this.agent=navigator.userAgent
this.dom=document.getElementById?1:0
this.opera5=(navigator.userAgent.indexOf("Opera")>-1 && document.getElementById)?1:0
this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0;
this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0;
this.ie4=(document.all && !this.dom && !this.opera5)?1:0;
this.ie=this.ie4||this.ie5||this.ie6
this.mac=this.agent.indexOf("Mac")>-1
this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0;
this.ns4=(document.layers && !this.dom)?1:0;
this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5)
return this
}
var bw=lib_bwcheck()
//Opera didn't seem to like the padding in the layers, it messes up the background-images, so here's a version without it.
if(bw.opera5) document.write("<style>DIV.clSlide{padding:0px; background-image:url(' ')}\nDIV.clSlideSub{padding:0px; background-image:url(' ')}\nDIV.clSlideSub2{padding:0px; background-image:url(' ')}</style>")
/************************************************************************************
Making cross-browser objects
************************************************************************************/
function makeMenuObj(obj,nest){
nest=(!nest) ? "":'document.'+nest+'.'
this.css=bw.dom? document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+"document.layers." +obj):0;
this.el=bw.dom?document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+'document.'+obj):0;
this.ref=bw.dom || bw.ie4? document:bw.ns4?eval(nest+"document.layers." +obj+".document"):0;
this.x=(bw.ns4 || bw.ns5)? this.css.left:this.css.offsetLeft;
this.y=(bw.ns4 || bw.ns5)? this.css.top:this.css.offsetTop;
this.hideIt=b_hideIt; this.showIt=b_showIt; this.movey=b_movey
this.moveIt=b_moveIt; this.moveBy=b_moveBy; this.status=0;
this.bgImg=b_bgImg; this.obj = obj + "Object"; eval(this.obj + "=this");
this.clipTo=b_clipTo;
return this
}
function b_showIt(){this.css.visibility="visible"; this.status=1}
function b_hideIt(){this.css.visibility="hidden"; this.status=0}
function b_movey(y){this.y=y; this.css.top=this.y}
function b_moveIt(x,y){this.x=x; this.y=y; this.css.left=this.x;this.css.top=this.y}
function b_moveBy(x,y){this.x=this.x+x; this.y=this.y+y; this.css.left=this.x;this.css.top=this.y}
function b_bgImg(img){if(bw.ie||bw.dom)this.css.backgroundImage="url("+img+")"
else this.css.background.src=img
}
function b_clipTo(t,r,b,l,w){if(bw.ns4){this.css.clip.top=t;this.css.clip.right=r
this.css.clip.bottom=b;this.css.clip.left=l
}else{this.css.clip="rect("+t+","+r+","+b+","+l+")"; if(w){this.css.width=r; this.css.height=b}}}
/********************************************************************************
Initiating page, making objects..
********************************************************************************/
function SlideMenuInit(){
oSlideMenu=new makeMenuObj('divSlideCont')
oSlideMenu.moveIt(menux,menuy)
oSlide=new Array()
for(i=0;i<menus.length;i++){
oSlide=new makeMenuObj('divSlide'+i,'divSlideCont')
oSlide.subs=menus.subs
oSlide.sub=new Array()
oSlide.moveIt(0,mainheight*i)
oSlide.starty=oSlide.y
if(bw.opera) oSlide.css.paddingLeft="10px"
if(!menus.seperator) oSlide.bgImg(level0_regular)
for(j=0;j<oSlide.subs;j++){
oSlide.sub[j]=new makeMenuObj('divSlideSub'+i+"_"+j,'divSlideCont')
oSlide.sub[j].moveIt(10,oSlide.y+subheight*j+between)
oSlide.sub[j].starty=oSlide.sub[j].y
oSlide[j]=new Array()
oSlide[j].subs=menus[j].subs
oSlide[j].sub=new Array()
img=level1_round
if(oSlide[j].subs!=0){
if(j!=oSlide.subs-1) img=level1_sub
else img=level1_sub_round
oSlide.sub[j].css.color="white"
}else{
if(j!=oSlide.subs-1)img=level1_regular
}
oSlide.sub[j].origimg=img
oSlide.sub[j].bgImg(img)
for(a=0;a<oSlide[j].subs;a++){
oSlide[j].sub[a]=new makeMenuObj('divSlideSub'+i+"_"+j+"_"+a,'divSlideCont')
oSlide[j].sub[a].moveIt(20,oSlide.sub[j].y+subheight*a+between-2)
oSlide[j].sub[a].starty=oSlide[j].sub[a].y
oSlide[j][a]=new Array()
oSlide[j][a].subs=menus[j][a].subs
oSlide[j][a].sub=new Array()
if(a!=oSlide[j].subs-1) img=level2_regular
else img=level2_round
oSlide[j].sub[a].origimg=img
oSlide[j].sub[a].bgImg(img)
}
}
}
oSlideMenu.showIt()
}
/********************************************************************************
Variables
********************************************************************************/
var active=-1;var going;var isthere; var sactive=-1; var sisthere=-1; var s2active=-1; var s2isthere=-1
/********************************************************************************
Switch menu function.
********************************************************************************/
function swmenu(num,snum,s2num){
if(snum!=-1){
if(oSlide[num][snum].subs==0) return
}
if(s2num!=-1){
if(oSlide[num][snum][s2num].subs==0) return
}
if((num!=active || snum!=sactive || s2num!=s2active) && !going){going=true;isthere=0;sisthere=0;moveUp(num,snum,s2num)}
}
/********************************************************************************
Moving the menus upward to their original position.
********************************************************************************/
function moveUp(num,snum){
if(snum==-1){
for(i=0;i<oSlide.length;i++){
if(oSlide.y>oSlide.starty+pxspeed && active!=i) oSlide.moveBy(0,-pxspeed)
else{if(active!=i) oSlide.moveIt(oSlide.x,oSlide.starty); isthere=i}
}
if(isthere<oSlide.length-1) setTimeout("moveUp("+num+","+snum+")",timspeed)
else swmenu2(num,snum)
}else{
if(num==oSlide.length-1) isthere=num
if(sactive!=-1){ //Is out!
//Slide subs
j=0
for(i=sactive+1;i<oSlide[num].sub.length;i++){
j++
if(oSlide[num].sub.y>oSlide[num].sub.starty+pxspeed) oSlide[num].sub.moveBy(0,-pxspeed)
else{oSlide[num].sub.moveIt(oSlide[num].sub.x,oSlide[num].sub.starty); sisthere=i}
}
//Slide main
for(i=num+1;i<oSlide.length;i++){
if(oSlide.y>oSlide.starty + oSlide[num].sub[sactive].y +subheight*j ) oSlide.moveBy(0,-pxspeed)
else{oSlide.moveIt(oSlide.x,oSlide.starty + oSlide[num].sub[sactive].y +subheight*j ); isthere=i}
}
}else{ //Slide to the one clicked
for(i=num+1;i<oSlide.length;i++){
if(oSlide.y>oSlide.starty + snum*between+between) oSlide.moveBy(0,-pxspeed)
else{oSlide.moveIt(oSlide.x,oSlide.starty + snum*between+between); isthere=i}
}
}
if(isthere<oSlide.length-1 || (sactive!=-1 && sisthere<oSlide[num].sub.length-1 && sactive!=oSlide[num].sub.length-1)) setTimeout("moveUp("+num+","+snum+")",timspeed)
else swmenu2(num,snum)
}
}
/********************************************************************************
Switch menu 2, stuff that happens before the menus are moved down again.
********************************************************************************/
function swmenu2(num,snum){
isthere=0;
sisthere=0;
if(active>-1 && snum==-1){
//Hiding submenus
for(j=0;j<oSlide[active].subs;j++){oSlide[active].sub[j].hideIt()}
oSlide[active].bgImg(level0_regular)
oSlide[active].moveIt(0,oSlide[active].starty)
}
if(sactive>-1){
//Hiding submenus
for(j=0;j<oSlide[active][sactive].sub.length;j++){oSlide[active][sactive].sub[j].hideIt()}
oSlide[active].sub[sactive].bgImg(oSlide[active].sub[sactive].origimg)
oSlide[active].sub[sactive].moveIt(10,oSlide[active].sub[sactive].starty)
//Move back to place
for(i=sactive+1;i<oSlide[active].sub.length;i++){
oSlide[active].sub.moveIt(oSlide[active].sub.x,oSlide[active].sub.starty)
}
}
active=num
//Showing submenus
if(snum>-1){
sactive=snum
for(j=0;j<oSlide[num][snum].sub.length;j++){oSlide[num][snum].sub[j].showIt()}
oSlide[num].sub[snum].moveBy(10,3)
oSlide[num].sub[snum].bgImg(level1_round2)
}else{
sactive=-1
for(j=0;j<oSlide[active].subs;j++){oSlide[active].sub[j].showIt()}
oSlide[num].moveBy(10,3)
oSlide[num].bgImg(level0_round)
}
if(num!=oSlide.length-1) moveDown(num,snum)
else{
isthere=num
moveDown(num,snum)
}
}
/********************************************************************************
Moving the menus down
********************************************************************************/
function moveDown(num,snum){
//if(num==oSlide.length-1) isthere=num
for(i=num+1;i<oSlide.length;i++){
if(snum==-1){
if(oSlide.y<(oSlide[num].subs-1)*subheight+oSlide.starty+between-pxspeed) oSlide.moveBy(0,pxspeed)
else{oSlide.moveIt(oSlide.x,(oSlide[num].subs-1)*subheight+oSlide.starty+between); isthere=i}
}else{
if(oSlide.y<(oSlide[num].subs-1)*subheight+oSlide.starty+between-pxspeed + (oSlide[num][snum].subs-1)*subheight+between) oSlide.moveBy(0,pxspeed)
else{oSlide.moveIt(oSlide.x,(oSlide[num].subs-1)*subheight+oSlide.starty+between + (oSlide[num][snum].subs-1)*subheight+between); isthere=i}
}
}
if(snum!=-1){
for(i=snum+1;i<oSlide[num].sub.length;i++){
if(oSlide[num].sub.y<(oSlide[num][snum].subs-1)*subheight+oSlide[num].sub.starty+between-pxspeed) oSlide[num].sub.moveBy(0,pxspeed)
else{oSlide[num].sub.moveIt(oSlide[num].sub.x,(oSlide[num][snum].subs-1)*subheight+oSlide[num].sub.starty+between); sisthere=i}
}
}
if(snum==-1){
if(isthere<oSlide.length-1) setTimeout("moveDown("+num+","+snum+")",timspeed)
else going=false
}else{
if(isthere<oSlide.length-1 || (sisthere<oSlide[num].sub.length-1 && snum!=oSlide[num].sub.length-1)) setTimeout("moveDown("+num+","+snum+")",timspeed)
else going=false
}
}
var test=0
/********************************************************************************
Functions to write out the layers...
********************************************************************************/
menus=new Array(); var a=0; var b=0; var c=0; var d=0
function makeMenu(type,text,lnk,target,end){
str=""; tg="";
if(target) tg='target="'+target+'"'
if(!lnk) lnk="#"
self.status=lnk
if(a==0) str='<div id="divSlideCont">\n'
if(type=="top"){
menus[a]=new Array();
if(text=="seperator"){
str+='\t<div id="divSlide'+a+'" class="clSlide"></div>\n'
menus[a].seperator=1
}else{
str+='\t<div id="divSlide'+a+'" class="clSlide"><a href="'+lnk+'" '+tg+' onclick="swmenu('+a+',-1,-1); if(bw.ie || bw.ns6) this.blur(); '
if(lnk=="#") str+='return false'
str+='" class="clSlideLinks"> '+text+'</a><br></div>\n'
}
menus[a].subs=0; a++; b=0
}else if(type=="sub"){
str+='\t\t<div id="divSlideSub'+(a-1)+'_'+(b)+'" class="clSlideSub"><a '+tg+' onclick="swmenu('+(a-1)+','+b+',-1); if(bw.ie || bw.ns6) this.blur(); '
if(lnk=="#") str+='return false'
str+='" href="'+lnk+'" class="clSlideSubLinks"> '+text+'</a><br></div>\n'
b++; menus[a-1].subs=b; menus[a-1][b-1]=new Array(); c=0; menus[a-1][b-1].subs=0
}else if(type=="sub2"){
str+='\t\t<div id="divSlideSub'+(a-1)+'_'+(b-1)+'_'+c+'" class="clSlideSub2"><a '+tg+' href="'+lnk+'" class="clSlideSub2Links"> '+text+'</a><br></div>\n'
c++; menus[a-1][b-1].subs=c; menus[a-1][b-1][c-1]=new Array(); d=0; menus[a-1][b-1][c-1].subs=0
}
if(end) str+="</div>"
document.write(str)
}
function preLoadBackgrounds(){
for(i=0;i<arguments.length;i++){
this=new Image()
this.src=arguments
}
return this
}
</script>
En hier die in de <body>
<script>
//Variables to set
between=28 //The pixel between the menus and the submenus
mainheight=25 //The height of the mainmenus
subheight=22 //The height of the submenus
pxspeed=13 //The pixel speed of the animation
timspeed=15 //The timer speed of the animation
menuy=80 //The top placement of the menu.
menux=0 //The left placement of the menu
//Images - Play with these
level0_regular="level0_regular.gif"
level0_round="level0_round.gif"
level1_regular="level1_regular.gif"
level1_round="level1_round.gif"
level1_sub="level1_sub.gif"
level1_sub_round="level1_sub_round.gif"
level1_round2="level1_round2.gif"
level2_regular="level2_regular.gif"
level2_round="level2_round.gif"
//Leave this line
preLoadBackgrounds(level0_regular,level0_round,level1_regular,level1_round,level1_sub,level1_sub_rou nd,level1_round2,level2_regular,level2_round)
//There are 3 different types of menus you can make
//top = Main menus
//sub = Sub menus
//sub2 = SubSub menus
//You control the look of the menus in the stylesheet
//makeMenu('TYPE','TEXT','LINK','TARGET', 'END (THE LAST MENU)')
//Menu 0
makeMenu('top','News')
makeMenu('sub','Newest news','/news/index.asp')
makeMenu('sub','News archive','/news/archive.asp')
//Menu 1
makeMenu('top','scripts')
makeMenu('sub','New scripts','/script/search.asp?new=1')
makeMenu('sub','All scripts','/script/index.asp')
makeMenu('sub','Categories')
makeMenu('sub2','Menu scripts','/script/search.asp?category=menu')
makeMenu('sub2','Text scripts','/script/search.asp?category=text')
makeMenu('sub2','Animation scripts','/script/search.asp?category=animation')
makeMenu('sub2','Other scripts','/script/search.asp?category=other')
//Menu 2
makeMenu('top','Tutorials')
makeMenu('sub','Tutorials','/tutorials/index.asp')
//Menu 3
makeMenu('top','Forums')
makeMenu('sub','Cool sites','forums/forum.asp?FORUM_ID=1&CAT_ID=1&Forum_Title=Cool+sites')
makeMenu('sub','CoolMenus','forums/forum.asp?FORUM_ID=2&CAT_ID=1&Forum_Title=CoolMenus')
makeMenu('sub','Crossbrowser','forums/forum.asp?FORUM_ID=3&CAT_ID=1&Forum_Title=Crossbrowser+DHTML')
makeMenu('sub','scripts','forums/forum.asp?FORUM_ID=4&CAT_ID=1&Forum_Title=DHTML+scripts')
makeMenu('sub','dhtmlcentral.com','forums/forum.asp?FORUM_ID=5&CAT_ID=1&Forum_Title=dhtmlcentral%2Ecom')
makeMenu('sub','General','forums/forum.asp?FORUM_ID=6&CAT_ID=1&Forum_Title=General+DHTML+issues')
makeMenu('sub','Off-topic','forums/forum.asp?FORUM_ID=9&CAT_ID=1&Forum_Title=Off%2Dtopic')
makeMenu('sub','Active topics','forums/active.asp')
//Menu 4
makeMenu('top','CoolMenus')
makeMenu('sub','Examples','coolmenus/examples/')
makeMenu('sub','Download','coolmenus/download.asp')
makeMenu('sub','Tutorial','coolmenus/tutorial.asp')
makeMenu('sub','FAQ','faq/index.asp')
//Menu 5
makeMenu('top','Resources')
makeMenu('sub','DHTML Links','resources/default.asp')
//Menu 6
makeMenu('top','dhtmlcentral')
makeMenu('sub','dhtmlcentral','dhtmlcentral/index.asp',"",1)
//Starting the menu
onload=SlideMenuInit;
</script>
--------------------------------------------------------------------
Maar.. als het menu uitklapt, gaan de aangeklikte knoppen een stukje naar rechts, hoe kan ik deze afstand aanpassen in het menu?
Hier het script in de <head>
<style type="text/css">
DIV.clSlide{position:absolute; ;z-index:10; left:0; width:138; height:22; clip:rect(0,138,22,0); padding:3px;}
DIV.clSlideSub{position:absolute; ;z-index:10; padding:2px; clip:rect(0,127,20,0); width:127; height:20; left:8; visibility:hidden}
DIV.clSlideSub2{position:absolute; ;z-index:10; padding:2px; clip:rect(0,118,20,0); width:118; height:20; left:8; visibility:hidden}
#divSlideCont{position:absolute; z-index:10; left:0; top:100; height:600; width:170; visibility:hidden}
A.clSlideLinks{font-family:Verdana, Helvetica, Helv; font-size:11px; font-weight:bold; text-decoration:none; color:white}
A.clSlideSubLinks{font-family:Verdana, Helvetica, Helv; font-size:10px; text-decoration:none; color:Navy}
A.clSlideSub2Links{font-family:Verdana, Helvetica, Helv; font-size:9px; text-decoration:none; color:Navy}
</style>
<script language="Javascript" type="text/javascript">
/**********************************************************************************
SlideMenu
* Copyright (C) 2001 Thomas Brattli
* This script was released at DHTMLCentral.com
* Visit for more great scripts!
* This may be used and changed freely as long as this msg is intact!
* We will also appreciate any links you could give us.
*
* Made by Thomas Brattli
*
* script date: 08/01/2002 (keep this date to check versions)
*********************************************************************************/
function lib_bwcheck(){ //Browsercheck (needed)
this.ver=navigator.appVersion
this.agent=navigator.userAgent
this.dom=document.getElementById?1:0
this.opera5=(navigator.userAgent.indexOf("Opera")>-1 && document.getElementById)?1:0
this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0;
this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0;
this.ie4=(document.all && !this.dom && !this.opera5)?1:0;
this.ie=this.ie4||this.ie5||this.ie6
this.mac=this.agent.indexOf("Mac")>-1
this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0;
this.ns4=(document.layers && !this.dom)?1:0;
this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5)
return this
}
var bw=lib_bwcheck()
//Opera didn't seem to like the padding in the layers, it messes up the background-images, so here's a version without it.
if(bw.opera5) document.write("<style>DIV.clSlide{padding:0px; background-image:url(' ')}\nDIV.clSlideSub{padding:0px; background-image:url(' ')}\nDIV.clSlideSub2{padding:0px; background-image:url(' ')}</style>")
/************************************************************************************
Making cross-browser objects
************************************************************************************/
function makeMenuObj(obj,nest){
nest=(!nest) ? "":'document.'+nest+'.'
this.css=bw.dom? document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+"document.layers." +obj):0;
this.el=bw.dom?document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+'document.'+obj):0;
this.ref=bw.dom || bw.ie4? document:bw.ns4?eval(nest+"document.layers." +obj+".document"):0;
this.x=(bw.ns4 || bw.ns5)? this.css.left:this.css.offsetLeft;
this.y=(bw.ns4 || bw.ns5)? this.css.top:this.css.offsetTop;
this.hideIt=b_hideIt; this.showIt=b_showIt; this.movey=b_movey
this.moveIt=b_moveIt; this.moveBy=b_moveBy; this.status=0;
this.bgImg=b_bgImg; this.obj = obj + "Object"; eval(this.obj + "=this");
this.clipTo=b_clipTo;
return this
}
function b_showIt(){this.css.visibility="visible"; this.status=1}
function b_hideIt(){this.css.visibility="hidden"; this.status=0}
function b_movey(y){this.y=y; this.css.top=this.y}
function b_moveIt(x,y){this.x=x; this.y=y; this.css.left=this.x;this.css.top=this.y}
function b_moveBy(x,y){this.x=this.x+x; this.y=this.y+y; this.css.left=this.x;this.css.top=this.y}
function b_bgImg(img){if(bw.ie||bw.dom)this.css.backgroundImage="url("+img+")"
else this.css.background.src=img
}
function b_clipTo(t,r,b,l,w){if(bw.ns4){this.css.clip.top=t;this.css.clip.right=r
this.css.clip.bottom=b;this.css.clip.left=l
}else{this.css.clip="rect("+t+","+r+","+b+","+l+")"; if(w){this.css.width=r; this.css.height=b}}}
/********************************************************************************
Initiating page, making objects..
********************************************************************************/
function SlideMenuInit(){
oSlideMenu=new makeMenuObj('divSlideCont')
oSlideMenu.moveIt(menux,menuy)
oSlide=new Array()
for(i=0;i<menus.length;i++){
oSlide=new makeMenuObj('divSlide'+i,'divSlideCont')
oSlide.subs=menus.subs
oSlide.sub=new Array()
oSlide.moveIt(0,mainheight*i)
oSlide.starty=oSlide.y
if(bw.opera) oSlide.css.paddingLeft="10px"
if(!menus.seperator) oSlide.bgImg(level0_regular)
for(j=0;j<oSlide.subs;j++){
oSlide.sub[j]=new makeMenuObj('divSlideSub'+i+"_"+j,'divSlideCont')
oSlide.sub[j].moveIt(10,oSlide.y+subheight*j+between)
oSlide.sub[j].starty=oSlide.sub[j].y
oSlide[j]=new Array()
oSlide[j].subs=menus[j].subs
oSlide[j].sub=new Array()
img=level1_round
if(oSlide[j].subs!=0){
if(j!=oSlide.subs-1) img=level1_sub
else img=level1_sub_round
oSlide.sub[j].css.color="white"
}else{
if(j!=oSlide.subs-1)img=level1_regular
}
oSlide.sub[j].origimg=img
oSlide.sub[j].bgImg(img)
for(a=0;a<oSlide[j].subs;a++){
oSlide[j].sub[a]=new makeMenuObj('divSlideSub'+i+"_"+j+"_"+a,'divSlideCont')
oSlide[j].sub[a].moveIt(20,oSlide.sub[j].y+subheight*a+between-2)
oSlide[j].sub[a].starty=oSlide[j].sub[a].y
oSlide[j][a]=new Array()
oSlide[j][a].subs=menus[j][a].subs
oSlide[j][a].sub=new Array()
if(a!=oSlide[j].subs-1) img=level2_regular
else img=level2_round
oSlide[j].sub[a].origimg=img
oSlide[j].sub[a].bgImg(img)
}
}
}
oSlideMenu.showIt()
}
/********************************************************************************
Variables
********************************************************************************/
var active=-1;var going;var isthere; var sactive=-1; var sisthere=-1; var s2active=-1; var s2isthere=-1
/********************************************************************************
Switch menu function.
********************************************************************************/
function swmenu(num,snum,s2num){
if(snum!=-1){
if(oSlide[num][snum].subs==0) return
}
if(s2num!=-1){
if(oSlide[num][snum][s2num].subs==0) return
}
if((num!=active || snum!=sactive || s2num!=s2active) && !going){going=true;isthere=0;sisthere=0;moveUp(num,snum,s2num)}
}
/********************************************************************************
Moving the menus upward to their original position.
********************************************************************************/
function moveUp(num,snum){
if(snum==-1){
for(i=0;i<oSlide.length;i++){
if(oSlide.y>oSlide.starty+pxspeed && active!=i) oSlide.moveBy(0,-pxspeed)
else{if(active!=i) oSlide.moveIt(oSlide.x,oSlide.starty); isthere=i}
}
if(isthere<oSlide.length-1) setTimeout("moveUp("+num+","+snum+")",timspeed)
else swmenu2(num,snum)
}else{
if(num==oSlide.length-1) isthere=num
if(sactive!=-1){ //Is out!
//Slide subs
j=0
for(i=sactive+1;i<oSlide[num].sub.length;i++){
j++
if(oSlide[num].sub.y>oSlide[num].sub.starty+pxspeed) oSlide[num].sub.moveBy(0,-pxspeed)
else{oSlide[num].sub.moveIt(oSlide[num].sub.x,oSlide[num].sub.starty); sisthere=i}
}
//Slide main
for(i=num+1;i<oSlide.length;i++){
if(oSlide.y>oSlide.starty + oSlide[num].sub[sactive].y +subheight*j ) oSlide.moveBy(0,-pxspeed)
else{oSlide.moveIt(oSlide.x,oSlide.starty + oSlide[num].sub[sactive].y +subheight*j ); isthere=i}
}
}else{ //Slide to the one clicked
for(i=num+1;i<oSlide.length;i++){
if(oSlide.y>oSlide.starty + snum*between+between) oSlide.moveBy(0,-pxspeed)
else{oSlide.moveIt(oSlide.x,oSlide.starty + snum*between+between); isthere=i}
}
}
if(isthere<oSlide.length-1 || (sactive!=-1 && sisthere<oSlide[num].sub.length-1 && sactive!=oSlide[num].sub.length-1)) setTimeout("moveUp("+num+","+snum+")",timspeed)
else swmenu2(num,snum)
}
}
/********************************************************************************
Switch menu 2, stuff that happens before the menus are moved down again.
********************************************************************************/
function swmenu2(num,snum){
isthere=0;
sisthere=0;
if(active>-1 && snum==-1){
//Hiding submenus
for(j=0;j<oSlide[active].subs;j++){oSlide[active].sub[j].hideIt()}
oSlide[active].bgImg(level0_regular)
oSlide[active].moveIt(0,oSlide[active].starty)
}
if(sactive>-1){
//Hiding submenus
for(j=0;j<oSlide[active][sactive].sub.length;j++){oSlide[active][sactive].sub[j].hideIt()}
oSlide[active].sub[sactive].bgImg(oSlide[active].sub[sactive].origimg)
oSlide[active].sub[sactive].moveIt(10,oSlide[active].sub[sactive].starty)
//Move back to place
for(i=sactive+1;i<oSlide[active].sub.length;i++){
oSlide[active].sub.moveIt(oSlide[active].sub.x,oSlide[active].sub.starty)
}
}
active=num
//Showing submenus
if(snum>-1){
sactive=snum
for(j=0;j<oSlide[num][snum].sub.length;j++){oSlide[num][snum].sub[j].showIt()}
oSlide[num].sub[snum].moveBy(10,3)
oSlide[num].sub[snum].bgImg(level1_round2)
}else{
sactive=-1
for(j=0;j<oSlide[active].subs;j++){oSlide[active].sub[j].showIt()}
oSlide[num].moveBy(10,3)
oSlide[num].bgImg(level0_round)
}
if(num!=oSlide.length-1) moveDown(num,snum)
else{
isthere=num
moveDown(num,snum)
}
}
/********************************************************************************
Moving the menus down
********************************************************************************/
function moveDown(num,snum){
//if(num==oSlide.length-1) isthere=num
for(i=num+1;i<oSlide.length;i++){
if(snum==-1){
if(oSlide.y<(oSlide[num].subs-1)*subheight+oSlide.starty+between-pxspeed) oSlide.moveBy(0,pxspeed)
else{oSlide.moveIt(oSlide.x,(oSlide[num].subs-1)*subheight+oSlide.starty+between); isthere=i}
}else{
if(oSlide.y<(oSlide[num].subs-1)*subheight+oSlide.starty+between-pxspeed + (oSlide[num][snum].subs-1)*subheight+between) oSlide.moveBy(0,pxspeed)
else{oSlide.moveIt(oSlide.x,(oSlide[num].subs-1)*subheight+oSlide.starty+between + (oSlide[num][snum].subs-1)*subheight+between); isthere=i}
}
}
if(snum!=-1){
for(i=snum+1;i<oSlide[num].sub.length;i++){
if(oSlide[num].sub.y<(oSlide[num][snum].subs-1)*subheight+oSlide[num].sub.starty+between-pxspeed) oSlide[num].sub.moveBy(0,pxspeed)
else{oSlide[num].sub.moveIt(oSlide[num].sub.x,(oSlide[num][snum].subs-1)*subheight+oSlide[num].sub.starty+between); sisthere=i}
}
}
if(snum==-1){
if(isthere<oSlide.length-1) setTimeout("moveDown("+num+","+snum+")",timspeed)
else going=false
}else{
if(isthere<oSlide.length-1 || (sisthere<oSlide[num].sub.length-1 && snum!=oSlide[num].sub.length-1)) setTimeout("moveDown("+num+","+snum+")",timspeed)
else going=false
}
}
var test=0
/********************************************************************************
Functions to write out the layers...
********************************************************************************/
menus=new Array(); var a=0; var b=0; var c=0; var d=0
function makeMenu(type,text,lnk,target,end){
str=""; tg="";
if(target) tg='target="'+target+'"'
if(!lnk) lnk="#"
self.status=lnk
if(a==0) str='<div id="divSlideCont">\n'
if(type=="top"){
menus[a]=new Array();
if(text=="seperator"){
str+='\t<div id="divSlide'+a+'" class="clSlide"></div>\n'
menus[a].seperator=1
}else{
str+='\t<div id="divSlide'+a+'" class="clSlide"><a href="'+lnk+'" '+tg+' onclick="swmenu('+a+',-1,-1); if(bw.ie || bw.ns6) this.blur(); '
if(lnk=="#") str+='return false'
str+='" class="clSlideLinks"> '+text+'</a><br></div>\n'
}
menus[a].subs=0; a++; b=0
}else if(type=="sub"){
str+='\t\t<div id="divSlideSub'+(a-1)+'_'+(b)+'" class="clSlideSub"><a '+tg+' onclick="swmenu('+(a-1)+','+b+',-1); if(bw.ie || bw.ns6) this.blur(); '
if(lnk=="#") str+='return false'
str+='" href="'+lnk+'" class="clSlideSubLinks"> '+text+'</a><br></div>\n'
b++; menus[a-1].subs=b; menus[a-1][b-1]=new Array(); c=0; menus[a-1][b-1].subs=0
}else if(type=="sub2"){
str+='\t\t<div id="divSlideSub'+(a-1)+'_'+(b-1)+'_'+c+'" class="clSlideSub2"><a '+tg+' href="'+lnk+'" class="clSlideSub2Links"> '+text+'</a><br></div>\n'
c++; menus[a-1][b-1].subs=c; menus[a-1][b-1][c-1]=new Array(); d=0; menus[a-1][b-1][c-1].subs=0
}
if(end) str+="</div>"
document.write(str)
}
function preLoadBackgrounds(){
for(i=0;i<arguments.length;i++){
this=new Image()
this.src=arguments
}
return this
}
</script>
En hier die in de <body>
<script>
//Variables to set
between=28 //The pixel between the menus and the submenus
mainheight=25 //The height of the mainmenus
subheight=22 //The height of the submenus
pxspeed=13 //The pixel speed of the animation
timspeed=15 //The timer speed of the animation
menuy=80 //The top placement of the menu.
menux=0 //The left placement of the menu
//Images - Play with these
level0_regular="level0_regular.gif"
level0_round="level0_round.gif"
level1_regular="level1_regular.gif"
level1_round="level1_round.gif"
level1_sub="level1_sub.gif"
level1_sub_round="level1_sub_round.gif"
level1_round2="level1_round2.gif"
level2_regular="level2_regular.gif"
level2_round="level2_round.gif"
//Leave this line
preLoadBackgrounds(level0_regular,level0_round,level1_regular,level1_round,level1_sub,level1_sub_rou nd,level1_round2,level2_regular,level2_round)
//There are 3 different types of menus you can make
//top = Main menus
//sub = Sub menus
//sub2 = SubSub menus
//You control the look of the menus in the stylesheet
//makeMenu('TYPE','TEXT','LINK','TARGET', 'END (THE LAST MENU)')
//Menu 0
makeMenu('top','News')
makeMenu('sub','Newest news','/news/index.asp')
makeMenu('sub','News archive','/news/archive.asp')
//Menu 1
makeMenu('top','scripts')
makeMenu('sub','New scripts','/script/search.asp?new=1')
makeMenu('sub','All scripts','/script/index.asp')
makeMenu('sub','Categories')
makeMenu('sub2','Menu scripts','/script/search.asp?category=menu')
makeMenu('sub2','Text scripts','/script/search.asp?category=text')
makeMenu('sub2','Animation scripts','/script/search.asp?category=animation')
makeMenu('sub2','Other scripts','/script/search.asp?category=other')
//Menu 2
makeMenu('top','Tutorials')
makeMenu('sub','Tutorials','/tutorials/index.asp')
//Menu 3
makeMenu('top','Forums')
makeMenu('sub','Cool sites','forums/forum.asp?FORUM_ID=1&CAT_ID=1&Forum_Title=Cool+sites')
makeMenu('sub','CoolMenus','forums/forum.asp?FORUM_ID=2&CAT_ID=1&Forum_Title=CoolMenus')
makeMenu('sub','Crossbrowser','forums/forum.asp?FORUM_ID=3&CAT_ID=1&Forum_Title=Crossbrowser+DHTML')
makeMenu('sub','scripts','forums/forum.asp?FORUM_ID=4&CAT_ID=1&Forum_Title=DHTML+scripts')
makeMenu('sub','dhtmlcentral.com','forums/forum.asp?FORUM_ID=5&CAT_ID=1&Forum_Title=dhtmlcentral%2Ecom')
makeMenu('sub','General','forums/forum.asp?FORUM_ID=6&CAT_ID=1&Forum_Title=General+DHTML+issues')
makeMenu('sub','Off-topic','forums/forum.asp?FORUM_ID=9&CAT_ID=1&Forum_Title=Off%2Dtopic')
makeMenu('sub','Active topics','forums/active.asp')
//Menu 4
makeMenu('top','CoolMenus')
makeMenu('sub','Examples','coolmenus/examples/')
makeMenu('sub','Download','coolmenus/download.asp')
makeMenu('sub','Tutorial','coolmenus/tutorial.asp')
makeMenu('sub','FAQ','faq/index.asp')
//Menu 5
makeMenu('top','Resources')
makeMenu('sub','DHTML Links','resources/default.asp')
//Menu 6
makeMenu('top','dhtmlcentral')
makeMenu('sub','dhtmlcentral','dhtmlcentral/index.asp',"",1)
//Starting the menu
onload=SlideMenuInit;
</script>
--------------------------------------------------------------------
Maar.. als het menu uitklapt, gaan de aangeklikte knoppen een stukje naar rechts, hoe kan ik deze afstand aanpassen in het menu?
