Phiên bản đầy đủ: jsB@nk » Trình đơn » Định hướng » Menu hai cấp
URL: https://www.javascriptbank.com/cool-menu-index.html
Đoạn mã này sẽ hiển thị một trình đơn hai cấp ở phía bên trái của trang web và rất dễ chỉnh sửa. Rất hữu ích trong các website dùng frame.
Phiên bản đầy đủ: jsB@nk » Trình đơn » Định hướng » Menu hai cấp
URL: https://www.javascriptbank.com/cool-menu-index.html
<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><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><script language="JavaScript" type="text/javascript">function lib_bwcheck(){ //Browsercheck (needed)this.ver=navigator.appVersionthis.agent=navigator.userAgentthis.dom=document.getElementById?1:0this.opera5=this.agent.indexOf("Opera 5")>-1this.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.ie6this.mac=this.agent.indexOf("Mac")>-1this.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}//Copyright (c) 2002 Coyotee Labs Romania (www.coyoteelabs.go.ro)//This script can be used freely as long as all copyright messages are intact.//Visit WWW.COYOTEELABS.GO.RO for more scriptsvar bw=new lib_bwcheck()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 objectsfunction 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_moveythis.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=rthis.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].subsoSlide[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].yoSlide[i][j]=new Array()oSlide[i][j].subs=menus[i][j].subsoSlide[i][j].sub=new Array()img=level1_roundif(oSlide[i][j].subs!=0){if(j!=oSlide[i].subs-1) img=level1_subelse img=level1_sub_roundoSlide[i].sub[j].css.color="white"}else{if(j!=oSlide[i].subs-1)img=level1_regular}oSlide[i].sub[j].origimg=imgoSlide[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].yoSlide[i][j][a]=new Array()oSlide[i][j][a].subs=menus[i][j][a].subsoSlide[i][j][a].sub=new Array()if(a!=oSlide[i][j].subs-1) img=level2_regularelse img=level2_roundoSlide[i][j].sub[a].origimg=imgoSlide[i][j].sub[a].bgImg(img)}}}oSlideMenu.showIt()}//Variablesvar 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=numif(sactive!=-1){ //Is out!//Slide subsj=0for(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 mainfor(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 clickedfor(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 submenusfor(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 submenusfor(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 placefor(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 submenusif(snum>-1){sactive=snumfor(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=-1for(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=nummoveDown(num,snum)}}//Moving the menus downfunction moveDown(num,snum){//if(num==oSlide.length-1) isthere=numfor(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=0function makeMenu(type,text,lnk,target,end){str=""; tg=""; if(target) tg='target="'+target+'"' if(!lnk) lnk="#" self.status=lnkif(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><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><script>//Variables to setbetween=28 //The pixel between the menus and the submenusmainheight=25 //The height of the mainmenussubheight=22 //The height of the submenuspxspeed=13 //The pixel speed of the animationtimspeed=15 //The timer speed of the animationmenuy=10 //The top placement of the menu.menux=0 //The left placement of the menu//Imageslevel0_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 linepreLoadBackgrounds(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','News')makeMenu('sub','Test demo','#')makeMenu('sub','Test demo','#')//Menu 1makeMenu('top','Coyotee Labs')makeMenu('sub','Main Page','http://www.javascriptbank.com','_blank')makeMenu('sub','E-Mail Us','mailto:[email protected]')makeMenu('sub','Other') makeMenu('sub2','Vote us','http://www.top100.ro/cgi-bin/vote.cgi?id=13334','_blank') makeMenu('sub2','Mailling list','http://signup.postmasterdirect.com/affiliates?owner=Site_Meter&affiliate=coyoteelabs')//Menu 2 makeMenu('top','Tutorials') makeMenu('sub','Not available','#')//Menu 3makeMenu('top','Forums') makeMenu('sub','Our forum','http://www.fido7.net/cgi-bin/forumi.fpl?user=Coyotee','_blank') makeMenu('sub','Test demo','#')//Menu 4 makeMenu('top','Test') makeMenu('sub','Test','#') makeMenu('sub','Test','#') makeMenu('sub','Test','#') makeMenu('sub','Test','#',"end") // the last menu//Starting the menuonload=SlideMenuInit;</script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->http://javascriptbank.com/javascript/menu/Cool_Menu/Cool_Menu_images.zip