excelente menú desplegable con categorías.
<html>
<head>
<title> slidemenu </title>
<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
*********************************************************************************/
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[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">
<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="ejemplos/level0_regular.gif"
level0_round="ejemplos/level0_round.gif"
level1_regular="ejemplos/level1_regular.gif"
level1_round="ejemplos/level1_round.gif"
level1_sub="ejemplos/level1_sub.gif"
level1_sub_round="ejemplos/level1_sub_round.gif"
level1_round2="ejemplos/level1_round2.gif"
level2_regular="ejemplos/level2_regular.gif"
level2_round="ejemplos/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','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>
<br>
para de descargar este menú en forma completa debes hacer clic! <a href="ejemplos/slide.zip"> aca</a>.
</body>
</html>
Download Script
Ver ejemplo javascript
