Menú Vertical Desplegable con CSS y JavaScript
Para obtener este efecto vamos a utilizar html, css, y javascript que cree la animación, este menú funciona tanto en Internet Explorer como en Firefox.
EL EVENTO ONLOAD Y LA LISTA HTML
El archivo html va a ser el que muestre el menú, por lo que en primer lugar colocamos un evento onload al body que nos cargue una función javascript, luego creamos una capa div y la nombramos “sidebar”, dentro de esta capa crearemos nuestra lista sin ordenar, recuerden que para crearla se utiliza la etiqueta “ul” para indicar que se trata de una lista sin ordenar y las etiquetas “li” para indicar que se trata de un item de la lista… ojo que nos es necesario que se cierren estas etiquetas “li”, pero si lo desarrollan en xhtml deben cerrarlas. Ahora bien, para crear esta aplicación vamos a anidar una lista dentro de un item de otra lista a fin de crear el menú desplegable.
Un esquema del orden seria el siguiente:
<body onLoad="menu_init(0,12,1,-20,10)">
<div id="sidebar">
<ul id="menunav">
<li><a href="#">Inicio</a></li>
<li><a href="#" class="menutrg">Botón 1</a>
<ul>
<li><a href="#">Botón 1 - 1</a></li>
<li><a href="#">Botón 1 - 2</a></li>
<li><a href="#">Botón 1 - 3</a></li>
</ul>
</li>
<li><a href="#" class="menutrg">Boton 2</a>
<ul>
<li><a href="#">Botón 2 - 1</a></li>
<li><a href="#">Botón 2 - 2</a></li>
<li><a href="#">Botón 2 - 3</a></li>
<li><a href="#">Botón 2 - 4</a></li>
</ul>
</li>
<li><a href="#" class="menutrg">Botón 3</a>
<ul>
<li><a href="#" class="menutrg">Botón 3 - 1</a>
<ul>
<li><a href="#">Botón 3 - 1 - 1</a></li>
<li><a href="#">Botón 3 - 1 - 2</a></li>
<li><a href="#">Botón 3 - 1 - 3</a></li>
<li><a href="#">Botón 3 - 1 - 4</a></li>
</ul>
</li>
<li><a href="#" class="menutrg">Botón 3 - 2</a>
<ul>
<li><a href="#">Botón 3 - 2 - 1</a></li>
<li><a href="#">Botón 3 - 2 - 2</a></li>
<li><a href="#">Botón 3 - 2 - 3</a></li>
</ul>
</li>
<li><a href="#" class="menutrg">Botón 3 - 3</a>
<ul>
<li><a href="#">Botón 3 - 3 - 1</a></li>
<li><a href="#">Botón 3 - 3 - 2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Botón 4</a></li>
</ul>
</div>
</body>
SOBRE EL CSS Y LAS DOS IMAGENES
Una vez creado el documento del contenido de nuestro menú vertical, debemos elaborar el código para poder darle forma de menú a nuestra lista, para ello crearemos un archivo css, al que llamaremos "menu.css", y en él escribiremos el código necesario para que nuestro menú pueda ser visto en distintos navegadores.
body {
background-color: #ffffff;
font-family: Arial, Helvetica, sans-serif;
margin: 100px 0 3em 0;
padding: 0;
font-size: 16px;
font-weight: bolder;
}
#menunav {
margin: 0;
padding:0;
}
#menunav li {
list-style-type: none;
margin: 0;
padding: 0;
background-image: url(img/debajo_btn.jpg);
/* background-repeat: repeat-x; */
border-bottom: 1px solid #0074E3;
background-color: #0074E3;
}
#menunav ul {
border-top: 1px solid #eeeeee;
margin: 0;
padding: 0;
z-index: 10000;
}
#menunav ul li {
border-left: 1px solid #FFFFFF;
border-bottom: 1px solid #333333;
}
#menunav a {
display: block;
text-decoration: none;
background-color: transparent;
padding: 4px 12px 4px 10px;
color: #ffffff;
border-top: 1px solid #0061BD;
border-right: 1px solid #0061BD;
border-bottom: 0;
border-left: 4px solid #0061BD;
line-height:1;
}
/*controla la botonera */
#menunav a:hover, #menunav a:active, #menunav a:focus,
#menunav .menuon, #menunav .menuon:hover,
#menunav .menuon:active {
color: #333333;
background-color: #0061BD;
letter-spacing: 0.01px;
border-top: 1px solid #0061BD;
border-right: 1px solid #0061BD;
border-left: 4px solid #0061BD;
background-image: url(img/encima_btn.jpg);
background-repeat: repeat-x;
}
#menunav .menumark, #menunav .menumark:hover {
font-weight: bold;
}
/*Controlan los links y la imagen de flecha */
/*the normal trigger link */
#menunav .menutrg, #menunav .menutrg:hover, #menunav .menutrg:active {
background-image: url(img/flecha.gif);
background-repeat: no-repeat;
background-position: right center;
}
#menunav .menutrg:hover {
background-position: right center;
background-image: url(img/encima_btn.jpg);
background-repeat: repeat-x;
}
/*controla el desplazamiento y alcance de los submenus */
#menunav .menuhide {
left: -9000px;
border: 0;
}
#menunav .menushow {
left: auto;
z-index: 20000;
}
/*modifica el menu madre */
#sidebar {
position: absolute;
top: 150px;
left: 10px;
width: 11em;
font-size: 0.85em;
}
DEL JAVASCRIPT
Teniendo el contenido y el diseño de nuestro menú, ahora nos falta crear su efecto de apertura, desplazamiento y cierre de los submenus. Para esto crearemos un archivo javascript al que llamamos "menu.js" el que contendra 11 funciones las que controlan todo el complejo efecto, todas las funciones estan ligadas por lo que si bien pongo comentarios para su comprensión, en realidad todas las funciones son necesarias para el funcionamiento de la animación.
/* modifica las caracteristicas de los menus hijos */
function menu_set(){
var i,d='',h="<sty"+"le type=\"text/css\">",tA=navigator.userAgent.toLowerCase();if(window.opera){
if(tA.indexOf("opera 5")>-1||tA.indexOf("opera 6")>-1){return;}}if(document.getElementById){
for(i=1;i<20;i++){d+='ul ';h+="\n#menunav "+d+"{position:absolute;left:-9000px;width:11em;}";}
document.write(h+"\n<"+"/sty"+"le>");}}menu_set();
/* modifica caracteristicas de apertura de menus */
function menu_init(){
var i,g,tD,tA,tU,pp,lvl,tn=navigator.userAgent.toLowerCase();if(window.opera){
if(tn.indexOf("opera 5")>-1||tn.indexOf("opera 6")>-1){return;}}else if(!document.getElementById){return;}
menup=arguments;menuct=new Array;tD=document.getElementById('menunav');
if(tD){tA=tD.getElementsByTagName('A');
for(i=0;i<tA.length;i++){tA[i].menucl=menuct.length;
menuct[menuct.length]=tA[i];g=tA[i].parentNode.getElementsByTagName("UL");
tA[i].menusub=(g)?g[0]:false;ev=tA[i].getAttribute("onmouseover");
if(!ev||ev=='undefined'){tA[i].onmouseover=function(){
menu_trig(this);};}ev=tA[i].getAttribute("onfocus");
if(!ev||ev=='undefined'){tA[i].onfocus=function(){menu_trig(this);};}
if(tA[i].menusub){pp=tA[i].parentNode;
lvl=0;while(pp){if(pp.tagName&&pp.tagName=="UL"){lvl++;}pp=pp.parentNode;}
tA[i].menulv=lvl;}}tD.onmouseout=menu_close;menu_open();}
}
function menu_trig(a){
var b,t;if(document.menut){clearTimeout(document.menut);}document.menua=1;
b=(a.menusub)?'menu_show(':'menu_tg(';
t='document.menut=setTimeout("'+b+a.menucl+')",160)';eval (t);
}
/*muestra los menus */
function menu_show(a,bp){
var u,lv,oft,ofr,uw,uh,pp,aw,ah,adj,mR,mT,wW=0,
wH,w1,w2,w3,sct,pw,lc,pwv,xx=0,yy=0,wP=true;
var iem=(navigator.appVersion.indexOf("MSIE 5")>-1)?true:false,dce=document.documentElement,dby=document.body;
document.menua=1;
if(!bp){menu_tg(a);}u=menuct[a].menusub;
if(u.menuax&&u.menuax==1){return;}u.menuax=1;
lv=(menup[0]==1&&menuct[a].menulv==1)?true:false;
menuct[a].className=menuct[a].className.replace("menutrg","menuon");oft=parseInt(menup[3]);
ofr=parseInt(menup[4]);
uw=u.offsetWidth;uh=u.offsetHeight;pp=menuct[a];aw=pp.offsetWidth;ah=pp.offsetHeight;while(pp){xx+=(pp.offsetLeft)?pp.offsetLeft:0;
yy+=(pp.offsetTop)?pp.offsetTop:0;if(window.opera||navigator.userAgent.indexOf("Safari")>-1){
if(menuct[a].menulv!=1&&pp.nodeName=="BODY"){yy-=(pp.offsetTop)?pp.offsetTop:0;}}pp=pp.offsetParent;}
if(iem&&navigator.userAgent.indexOf("Mac")>-1){yy+=parseInt(dby.currentStyle.marginTop);}adj=parseInt((aw*ofr)/100);mR=(lv)?0:aw-adj;
adj=parseInt((ah*oft)/100);mT=(lv)?0:(ah-adj)*-1;w3=dby.parentNode.scrollLeft;if(!w3){w3=dby.scrollLeft;}w3=(w3)?w3:0;
if(dce&&dce.clientWidth){wW=dce.clientWidth+w3;}else if(dby){wW=dby.clientWidth+w3;}if(!wW){wW=0;wP=false;}wH=window.innerHeight;
if(!wH){wH=dce.clientHeight;if(!wH||wH<=0){wH=dby.clientHeight;}}sct=dby.parentNode.scrollTop;if(!sct){sct=dby.scrollTop;if(!sct){
sct=window.scrollY?window.scrollY:0;}}pw=xx+mR+uw;if(pw>wW&&wP){mR=uw*-1;mR+=10;if(lv){mR=(wW-xx)-uw;}}lc=xx+mR;if(lc<0){mR=xx*-1;}
pw=yy+uh+ah+mT-sct;pwv=wH-pw;if(pwv<0){mT+=pwv;}u.style.marginLeft=mR+'px';u.style.marginTop=mT+'px';
if(menup[2]==1){if(!iem){menu_anim(a,20);}}u.className="menushow";
}
/* oculta los menus */
function menu_hide(u){
var i,tt,ua;u.menuax=0;u.className="menuhide";
ua=u.parentNode.firstChild;ua.className=ua.className.replace("menuon","menutrg");
}
function menu_tg(a,b){
var i,u,tA,tU,pp;tA=menuct[a];pp=tA.parentNode;while(pp){if(pp.tagName=="UL"){break;}pp=pp.parentNode;}if(pp){
tU=pp.getElementsByTagName("UL");for(i=tU.length-1;i>-1;i--){if(b!=1&&tA.menusub==tU[i]){continue;}else{menu_hide(tU[i]);}}}
}
function menu_close(evt){
var pp,st,tS,m=true;evt=(evt)?evt:((event)?event:null);st=document.menua;if(st!=-1){if(evt){
tS=(evt.relatedTarget)?evt.relatedTarget:evt.toElement;if(tS){pp=tS.parentNode;while(pp){if(pp&&pp.id&&pp.id=="menunav"){m=false;
document.menua=1;break;}pp=pp.parentNode;}}if(m){document.menua=-1;if(document.menut){clearTimeout(document.menut);}
document.menut=setTimeout("menu_clr()",360);}}}
}
function menu_clr(){
var i,tU,tUU;document.menua=-1;tU=document.getElementById('menunav');if(tU){tUU=tU.getElementsByTagName("UL");if(tUU){
for(i=tUU.length-1;i>-1;i--){menu_hide(tUU[i]);}}}
}
/* crea la animación */
function menu_anim(a,st){
var g=menuct[a].menusub,sp=30,inc=20;st=(st>=100)?100:st;g.style.fontSize=st+"%";if(st<100){st+=inc;setTimeout("menu_anim("+a+","+st+")",sp);}
}
function menu_mark(){document.menuop=arguments;}
function menu_open(){
var i,x,tA,op,pp,wH,tA,aU,r1,k=-1,kk=-1,mt=new Array(1,'','');if(document.menuop){mt=document.menuop;}op=mt[0];if(op<1){return;}
tA=document.getElementById('menunav').getElementsByTagName("A");wH=window.location.href;r1=/index\.[\S]*/i;for(i=0;i<tA.length;i++){
if(tA[i].href){aU=tA[i].href.replace(r1,'');if(op>0){if(tA[i].href==wH||aU==wH){k=i;kk=-1;break;}}if(op==2){if(tA[i].firstChild){
if(tA[i].firstChild.nodeValue==mt[1]){kk=i;}}}if(op==3 && tA[i].href.indexOf(mt[1])>-1){kk=i;}if(op==4){for(x=1;x<mt.length;x+=2){
if(wH.indexOf(mt[x])>-1){if(tA[i].firstChild&&tA[i].firstChild.data){if(tA[i].firstChild.data==mt[x+1]){kk=i;break;}}}}}}}k=(kk>k)?kk:k;
if(k>-1){pp=tA[k].parentNode;while(pp){if(pp.nodeName=="LI"){pp.firstChild.className="menumark"+" "+pp.firstChild.className;}
pp=pp.parentNode;}}if(kk>-1){document.menuad=1;}menu_adma();menu_admb();
}
ORGANIZANDO LOS ARCHIVOS
Habiendo creado todos los archivos necesarios para esta aplicación solo nos queda organizarlos en el servidor y vincularlos.
La organización será la siguiente:
Un primer nivel con el archivo "index.html" y una carpeta llamada "menu".
Un segundo nivel, dentro de la carpeta "menu" colocaremos los archivos "menu.css" y "menu.js" y crearemos una carpeta llamada "img".
Y en el tecer nivel, dentro de la carpeta "img" colocaremos nuestras tres imagenes: los botones "debajo_btn.jpg" y "encima_btn.jpg" y el icono de flecha "flecha.gif".
Para finalizar, solo nos queda vincular los archivos al "index.html", para esto lo único que se tiene que hacer es copiar el siguiente codigo dentro de las etiquetas <head></hed>. El código es el siguiente:
<script type="text/javascript" src="menu/menu.js"></script>
<link href="menu/menu.css" rel="stylesheet" type="text/css">
Ver ejemplo
Para descargar el código fuente completo, primero registrate e inicia sesión. Luego regresa a esta página.
Actualizado: Ahora que ya sabemos como crear este menú, veamos como crear un Menú Horizontal Desplegable con background transparente.
Un poco feo el resultado. Conoces alg
- responder
Enviado por David Lozano Lucas (no verificado) el Vie, 03/09/2007 - 14:42.A mi me ha ido de muerte. Me parece una aplicación bastante secncilla y muy muy muy funcional. El único inconveniente que veo es que te limita a la hora de aplicar (:visited). Alguien sabe como solucionar este problema???
Graciass
- responder
Enviado por Anonymous (no verificado) el Jue, 06/19/2008 - 09:36.Hola me parece un ejemplo sencillo y util para comprender la creacion de menus...
El link "descargar el codigo fuente" tiene un error, una pregunta - el resultado que muestran no utiliza las imagenes...?
Alex
- responder
Enviado por alex (no verificado) el Mar, 06/10/2008 - 23:39.Gracias por el código!
- responder
Enviado por Implantes dentales inmediatos (no verificado) el Jue, 07/24/2008 - 09:08.Hola. Todo me parece bien y me despliega bien. Tengo un inconveniente, Cuando intento introducirlo dentro de tablas se desconfigura todo y no me deja visualizarlo en el sitio exacto de la tabla (lado izquierdo) donde yo quiero visualizarlo. Que hago? TEngo el inconveniente de que si no trabajo con tablas al abrir la pagina en diferentes resoluciones de pantalla todo se descuadra. Gracias
- responder
Enviado por Alberto Ortiz S (no verificado) el Sáb, 08/02/2008 - 23:04.Barranquilla es Noticia. COM
document.write('');
iescroller.onmouseover=new Function("iescroller.scrollAmount=0");
iescroller.onmouseout=new Function("iescroller.scrollAmount=2");
document.write('')
document.write('Dólar (TRM) $1.785,17 Euro $2.785,09 BolÃvar $826,41 UVR $178,94 Café US$1,45 DTF (EA) 9,63% ');
document.write('');
document.write('');
- responder
Enviado por Anonymous (no verificado) el Dom, 08/03/2008 - 10:33.esta bueno el codigo pero solo me funciona para el index.html, si quiero usarlo para otras paginas no me funciona, podrian decirme como solucionarlo?
de antemano muchas gracias
- responder
Enviado por Anonymous (no verificado) el Sáb, 09/13/2008 - 14:10.ola.tengo una duda.cuando veo el ejemplo los botones son celestes y normales.¿no abria alguna manera de darles algun efecto como 3d o algo parecido?.desde ya muchas gracias.hasta luego.
ERIC!!!
- responder
Enviado por ERIC (no verificado) el Sáb, 10/04/2008 - 11:18.Para quitar el error elimina menu_adma();menu_admb(); que se encuentra en la ultima linea del js
- responder
Enviado por dz (no verificado) el Mié, 10/15/2008 - 02:06.Demasiado codigo para poco resultado
- responder
Enviado por diegoqiospe (no verificado) el Lun, 11/17/2008 - 11:58.Me parece perfec, me ha ido de maravilla era justo lo q necesitaba
- responder
Enviado por maryan (no verificado) el Vie, 02/20/2009 - 17:37.voy a mirar a ver que tal
- responder
Enviado por lucho0929 el Jue, 04/09/2009 - 22:15.Muy bueno, sencillo y se ve muy bien, te falto colocar las imagenes que usa el menu a la vista pero del resto muy bueno, gracias lo necesitaba
- responder
Enviado por JohanCa (no verificado) el Mié, 04/29/2009 - 13:25.me tira error en mnu_adma(); y menu_admb();
- responder
Enviado por Anonymous (no verificado) el Mar, 05/05/2009 - 15:35.Me gusto mucho encontrar este sitio y el contenido que en el teneis esta muy bien, francamente bien, nos ayuda mucho a los que andamos maquetando webs y necesitamos de ideas, pero me he registrado y no logro descargar ningun ejemplo. Supongo que no recibire respuesta, solo era para vuestro conocimiento. Me he registrado y estoy logeado pero no me sale la descarga, me dice que me registre y que vuelva a esta pagina, y lo que no entiendo es que en la parte derecha, en la franja negra, me dice que estoy logeado. No lo entiendo. Muchas gracias de todos modos. Un cordial saludo.
- responder
Enviado por tonimb el Mié, 05/06/2009 - 02:05.lo voy a probar a ver que tal gracias de antemano
- responder
Enviado por copco el Mié, 05/20/2009 - 17:35.Brother por q no me funciona en el firefox 3.0.10?
- responder
Enviado por van_Diego el Lun, 06/01/2009 - 17:30.ddd ta muy bueno el menu
- responder
Enviado por Anonymous (no verificado) el Mié, 07/29/2009 - 04:53.hola, hice el menu hi esta moy bien 10/9
- responder
Enviado por hola hice el menu hi esta de hostias (no verificado) el Mié, 07/29/2009 - 04:54.amigos cuando guarden una pagina con botones depegables guardenlo como mhtml, y analicen sus codigos haciendo clic derecho View Source, solo analizalo y copien codigo.
- responder
Enviado por Pks (no verificado) el Mar, 08/11/2009 - 21:34.A mi me funciono muy bien, ademas es muy ligero, muy util!
- responder
Enviado por diseño web (no verificado) el Lun, 10/26/2009 - 18:18.EXCELENTE CODIGO. ESTOY APRENDIENDO A PROGRAMAR Y CODIGOS DE ESE TIPO SON MUY BUENOS EJEMPLOS PARA APRENDER.
SE AGRADECE.
- responder
Enviado por J SILVA (no verificado) el Mié, 11/11/2009 - 14:01.Hola Alex, para descargar el ejemplo completo tienes que registrarte. Luego regresa a esta página y verás un enlace para descargarlo.
- responder
Enviado por baluart el Mié, 06/11/2008 - 03:19.alguien podria explicarme que significa esto :menu_init(0,12,1,-20,10)Entiendo la funcion pero no se como la funcion utiliza los parametros que se le pasan ya que la propia funcion con tal no indica que pueda recibir esos paramertros
- responder
Enviado por jose (no verificado) el Sáb, 05/05/2007 - 16:30.ay un error en la ultima linea menu_adma();menu_admb();error: object expectedalguien me puede ayudar?
- responder
Enviado por chikalin (no verificado) el Jue, 05/31/2007 - 12:39.Sip, el tuto parece muy bueno pero no hay ejemplo :( tira 404 saludos!
- responder
Enviado por Jorge (no verificado) el Mar, 10/02/2007 - 13:18.Lo estoy x probar ahora, espero q funcione xq me estoy volviendo loca
- responder
Enviado por Gabi (no verificado) el Mar, 11/27/2007 - 09:11.POR FAVOR ARREGLEN EL EJEMPLO!!ESTA MUY BUENO GRACIAS POR LA EXPLICACION!!
- responder
Enviado por YOP (no verificado) el Mar, 11/27/2007 - 10:21.Estoy checando el C.F. y me funciona bien tanto en firefox 2.10 como en Explorer 7, cosa que con otros menus, me era imposible...bueno el menu y buena la manera de organizar las descargas...muy util...
- responder
Enviado por pistemas (no verificado) el Mié, 11/28/2007 - 10:27.Bien tu ejemplo....muchas graciasss men___:D
- responder
Enviado por fER_ (no verificado) el Vie, 12/07/2007 - 13:54.Deja tu comentario