javascript menu

[anoniem]

<Script language="JavaScript"> <!-- function scrollit(seed) { var m1 = " "; var m2 = " "; var m3 = " "; var m4 = " "; var msg=m1+m2+m3+m4; var out = " "; var c = 1; if (seed > 100) { seed--; cmd="scrollit("+seed+")"; timerTwo=window.setTimeout(cmd,100); } else if (seed <= 100 && seed > 0) { for (c=0 ; c < seed ; c++) { out+=" "; } out+=msg; seed--; window.status=out; cmd="scrollit("+seed+")"; timerTwo=window.setTimeout(cmd,100); } else if (seed <= 0) { if (-seed < msg.length) { out+=msg.substring(-seed,msg.length); seed--; window.status=out; cmd="scrollit("+seed+")"; timerTwo=window.setTimeout(cmd,100); } else { window.status=" "; timerTwo=window.setTimeout("scrollit(100)",75); } } } //--> </SCRIPT> <script language="JavaScript"> function StatusFlash(yon) { if (yon == 'yes') { window.status = 'www.sipro.myweb.nl........ ' //Dit is de String die het eerst getoond wordt. setTimeout("StatusFlash('no')",1200) /*De 1200 staat voor het aantal milliseconden dat de String getoond wordt deze kan eventueel verandert worden...*/ } else { window.status = 'Veel, heel veel javascript ' //Dit is de tweede string, verander naar ' ' voor knipperen. setTimeout("StatusFlash('yes')",1200) //Ook hier kan het aantal milliseconden aangepast worden. } } </script> <STYLE type=text/css>DIV.clSlide { PADDING-RIGHT: 3px; PADDING-LEFT: 3px; Z-INDEX: 10; LEFT: 0px; PADDING-BOTTOM: 3px; WIDTH: 138px; CLIP: rect(0px 138px 22px 0px); PADDING-TOP: 3px; POSITION: absolute; HEIGHT: 22px } DIV.clSlideSub { PADDING-RIGHT: 2px; PADDING-LEFT: 2px; Z-INDEX: 10; LEFT: 8px; VISIBILITY: hidden; PADDING-BOTTOM: 2px; WIDTH: 127px; CLIP: rect(0px 127px 20px 0px); PADDING-TOP: 2px; POSITION: absolute; HEIGHT: 20px } DIV.clSlideSub2 { PADDING-RIGHT: 2px; PADDING-LEFT: 2px; Z-INDEX: 10; LEFT: 8px; VISIBILITY: hidden; PADDING-BOTTOM: 2px; WIDTH: 118px; CLIP: rect(0px 118px 20px 0px); PADDING-TOP: 2px; POSITION: absolute; HEIGHT: 20px } #divSlideCont { Z-INDEX: 10; LEFT: 0px; VISIBILITY: hidden; WIDTH: 170px; POSITION: absolute; TOP: 100px; HEIGHT: 600px } A.clSlideLinks { FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: white; FONT-FAMILY: Verdana, Helvetica, Helv; TEXT-DECORATION: none } A.clSlideSubLinks { FONT-SIZE: 10px; COLOR: navy; FONT-FAMILY: Verdana, Helvetica, Helv; TEXT-DECORATION: none } A.clSlideSub2Links { FONT-SIZE: 9px; COLOR: navy; FONT-FAMILY: Verdana, Helvetica, Helv; TEXT-DECORATION: none } </STYLE> <SCRIPT language=JavaScript type=text/javascript> function lib_bwcheck(){ //Browsercheck (needed) this.ver=navigator.appVersion this.agent=navigator.userAgent this.dom=document.getElementById?1:0 this.opera5=this.agent.indexOf("Opera 5")>-1 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=new 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[i]=new makeMenuObj('divSlide'+i,'divSlideCont') oSlide[i].subs=menus[i].subs oSlide[i].sub=new Array() oSlide[i].moveIt(0,mainheight*i) oSlide[i].starty=oSlide[i].y if(bw.opera) oSlide[i].css.paddingLeft="10px" if(!menus[i].seperator) oSlide[i].bgImg(level0_regular) for(j=0;j<oSlide[i].subs;j++){ oSlide[i].sub[j]=new makeMenuObj('divSlideSub'+i+"_"+j,'divSlideCont') oSlide[i].sub[j].moveIt(10,oSlide[i].y+subheight*j+between) oSlide[i].sub[j].starty=oSlide[i].sub[j].y oSlide[i][j]=new Array() oSlide[i][j].subs=menus[i][j].subs oSlide[i][j].sub=new Array() img=level1_round if(oSlide[i][j].subs!=0){ if(j!=oSlide[i].subs-1) img=level1_sub else img=level1_sub_round oSlide[i].sub[j].css.color="white" }else{ if(j!=oSlide[i].subs-1)img=level1_regular } oSlide[i].sub[j].origimg=img oSlide[i].sub[j].bgImg(img) for(a=0;a<oSlide[i][j].subs;a++){ oSlide[i][j].sub[a]=new makeMenuObj('divSlideSub'+i+"_"+j+"_"+a,'divSlideCont') oSlide[i][j].sub[a].moveIt(20,oSlide[i].sub[j].y+subheight*a+between-2) oSlide[i][j].sub[a].starty=oSlide[i][j].sub[a].y oSlide[i][j][a]=new Array() oSlide[i][j][a].subs=menus[i][j][a].subs oSlide[i][j][a].sub=new Array() if(a!=oSlide[i][j].subs-1) img=level2_regular else img=level2_round oSlide[i][j].sub[a].origimg=img oSlide[i][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[i].y>oSlide[i].starty+pxspeed && active!=i) oSlide[i].moveBy(0,-pxspeed) else{if(active!=i) oSlide[i].moveIt(oSlide[i].x,oSlide[i].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[i].y>oSlide[num].sub[i].starty+pxspeed) oSlide[num].sub[i].moveBy(0,-pxspeed) else{oSlide[num].sub[i].moveIt(oSlide[num].sub[i].x,oSlide[num].sub[i].starty); sisthere=i} } //Slide main for(i=num+1;i<oSlide.length;i++){ if(oSlide[i].y>oSlide[i].starty + oSlide[num].sub[sactive].y +subheight*j ) oSlide[i].moveBy(0,-pxspeed) else{oSlide[i].moveIt(oSlide[i].x,oSlide[i].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[i].y>oSlide[i].starty + snum*between+between) oSlide[i].moveBy(0,-pxspeed) else{oSlide[i].moveIt(oSlide[i].x,oSlide[i].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[i].moveIt(oSlide[active].sub[i].x,oSlide[active].sub[i].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[i].y<(oSlide[num].subs-1)*subheight+oSlide[i].starty+between-pxspeed) oSlide[i].moveBy(0,pxspeed) else{oSlide[i].moveIt(oSlide[i].x,(oSlide[num].subs-1)*subheight+oSlide[i].starty+between); isthere=i} }else{ if(oSlide[i].y<(oSlide[num].subs-1)*subheight+oSlide[i].starty+between-pxspeed + (oSlide[num][snum].subs-1)*subheight+between) oSlide[i].moveBy(0,pxspeed) else{oSlide[i].moveIt(oSlide[i].x,(oSlide[num].subs-1)*subheight+oSlide[i].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[i].y<(oSlide[num][snum].subs-1)*subheight+oSlide[num].sub[i].starty+between-pxspeed) oSlide[num].sub[i].moveBy(0,pxspeed) else{oSlide[num].sub[i].moveIt(oSlide[num].sub[i].x,(oSlide[num][snum].subs-1)*subheight+oSlide[num].sub[i].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[i]=new Image() this[i].src=arguments[i] } return this } </SCRIPT> </HEAD> <BODY bgColor=#ffffff marginheight="0" marginleft="0" onLoad="StatusFlash('yes')" onLoad="scrollit(100)"> <center>Klik <a href="hoofdmenu.zip"> hier</a> om deze script te downloaden. </center><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_round,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','Home') makeMenu('sub','hoofdpagina', 'home.htm', target="mainFrame") makeMenu('sub','javascript','javascript.htm') //Menu 1 makeMenu('top','Javascripts') makeMenu('sub','menu 1','javascript.htm') makeMenu('sub','menu 2','javascript2.html') makeMenu('sub','Menu 3','javascript3.html') makeMenu('sub','Menu 4','javascript4.html') makeMenu('sub','Menu 5','javascript5.html') makeMenu('sub','Menu 6','javascript6.html') makeMenu('sub','Menu 7','javascript7.html') makeMenu('sub','Menu 8','javascript8.html') //Menu 2 makeMenu('top','Downloads') makeMenu('sub','klik hier','explosion.htm', target="mainFrame") makeMenu('sub','klik hier','', target="mainFrame") makeMenu('sub2','klik hier','explosion.htm', target="mainFrame") //Menu 3 makeMenu('top','Verdien Geld') makeMenu('sub','Stappenplan','Geldverdienen.html', target="mainFrame") //Menu 4 makeMenu('top','html - codes') makeMenu('sub','alle html-codes', 'htmlcodes.html', target="mainFrame") //Menu 5 makeMenu('top','Vragen') makeMenu('sub','Uitleg', 'vragen.html', target="mainFrame") makeMenu('sub','mail', 'mail.html', target="mainFrame") //Menu 6 makeMenu('top','Gastenboek') makeMenu('sub','Plaats je mening','http://pub.alxnet.com/guestbook?id=2269378', target="mainFrame") //Starting the menu onload=SlideMenuInit; </SCRIPT><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR> <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"> var MyName = 'sipro'; var MyHeight = 22; var MyWidth = 22; var MyAlign = ''; var MyTarget = '_blank'; </SCRIPT> Ik heb dit menu gebruikt alleen hoe kan je er voor zorgen dat het menu van grote verandert als het scherm van grote verandert. Ik maak gebruik van tabellen.

[anoniem]

ten eerste: plaats in het vervolg gewoon een link naar je pagina waar dit opstaat, het wordt zo wel een heel erg lang topic... en ik heb hem niet doorgelezen ofzo, maar ik weet wel dat je met % moet werken. als ik bijvoobeeld de breedte van iets opgeef, stel ik niet 600px, maar bijvoorbeeld 80%. wat doet de browser dan? hij meet de breedte (of hoogte, hangt ervanaf hoe je het gebruikt) van het actuele scherm, en neemt daar 80 % van. werkt altijd! (voorbeeld: ik pas het zelf ook toe op [url=http://members.home.nl/piercings]mijn site[/url], speel maar eens met de afmetingenen van het browservenster, zul je zien dat alles meegaat)