AUXILOOOOOOOOOO Menu desplegable con javascript tengo un menu con css y javascript donde el segundo nivel se despliega con un click pero el tercero y el cuarto con mouse over....
necesito que el segundo nivel se despliegue, tambié, con mouse over....
aca el codigo
HTML
Código HTML:
<ul id="menu" name="menu"> <li class="arriba">Información Institucional <ul> <li><a href="#nogo">¿Quiénes Somos?</a></li> <li class="fly"><a href="#nogo" class="mitad" >Direccionamiento Estratégico</a> <ul> <li><a href="#nogo">Misión - Visión</a></li> <li><a href="#nogo">Principios y Valores</a> </li> <li><a href="#nogo">Planes Institucionales</a></li> </ul> </li> <li><a href="#nogo">Mapa de Procesos</a></li> <li class="fly"><a href="#nogo">Unidades Académicas</a> <ul> <li class="fly"><a href="#nogo">Escuelas</a> <ul> <li><a href="#nogo">Idiomas</a></li> <li><a href="#nogo">Interamericana de Bibliotecología</a></li> <li><a href="#nogo">Microbiología</a></li> <li><a href="#nogo">Nutrición y Dietética</a></li> </ul> </li> <li class="fly"><a href="#nogo">Facultades</a> <ul> <li><a href="#nogo">Artes</a></li> <li><a href="#nogo">Ciencias Agrarias</a></li> <li><a href="#nogo">Ciencias Económicas</a></li> <li><a href="#nogo">Ciencias Exactas y Naturales</a></li> <li><a href="#nogo">Ciencias Sociales y Humanas</a></li> <li><a href="#nogo">Comunicaciones</a></li> <li><a href="#nogo">Derecho y Ciencias Políticas</a></li> <li><a href="#nogo">Educación</a></li> <li><a href="#nogo">Enfermería</a></li> <li><a href="#nogo">Ingeniería</a></li> <li><a href="#nogo">Medicina</a></li> <li><a href="#nogo">Salud Pública</a></li> <li><a href="#nogo">Odontología</a></li> <li><a href="#nogo">Química Farmacéutica</a></li> </ul> </li> <li class="fly"><a href="#nogo">Institutos</a> <ul> <li><a href="#nogo">Educación Física y Deportes</a></li> <li><a href="#nogo">Estudios Políticos</a></li> <li><a href="#nogo">Estudios Regionales</a></li> <li><a href="#nogo">Filosofía</a></li> </ul> </li> </ul> </li> <li class="fly"><a href="#nogo">Unidades Administrativas</a> <ul> <li><a href="#nogo">South American</a></li> <li class="fly"><a href="#nogo">North American</a> <ul> <li><a href="#nogo">Diego Hernando López García aaaaaaaa a a aaaaaa aaaaaaa</a></li> <li><a href="#nogo">Green tree frog</a></li> <li><a href="#nogo">Spring peeper</a></li> </ul> </li> </ul> </li> <li class="fly"><a href="#nogo">Seccionales y Regionales</a> <ul> <li><a href="#nogo">South American</a></li> <li class="fly"><a href="#nogo">North American</a> <ul> <li><a href="#nogo">aaaaa aaaa a Diego Hernando López García</a></li> <li><a href="#nogo">Green tree frog</a></li> <li><a href="#nogo">Spring peeper</a></li> </ul> </li> </ul> </li> <li><a href="#nogo">Normatividad</a> </li> <li><a href="#nogo">UdeA en Cifras</a> </li> <li><a href="#nogo">Información de Contacto</a></li> </ul> </li> <li class="sub">Estudiar en </li> <li class="sub">Servicios y Productos <ul> <li><a href="http://en.wikipedia.org/wiki/Tree_frog">Wikipedia</a></li> <li><a href="#nogo11">Encyclopedia</a></li> </ul> </li> </ul>
Código:
/* ================================================================
This copyright notice must be untouched at all times.
The original version of this script and the associated (x)html
is available at http://www.stunicholls.com/menu/tree_frog_vertical.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This script and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
clickMenu = function(menu) {
var getEls = document.getElementById(menu).getElementsByTagName("LI");
var getAgn = getEls;
for (var i=0; i<getEls.length; i++) {
getEls[i].onclick=function() {
for (var x=0; x<getAgn.length; x++) {
getAgn[x].className=getAgn[x].className.replace("unclick", "");
getAgn[x].className=getAgn[x].className.replace("click", "unclick");
}
if ((this.className.indexOf('unclick'))!=-1) {
this.className=this.className.replace("unclick", "");;
}
else {
this.className+=" click";
}
}
getEls[i].onmouseover=function() {
this.className+=" click";
}
getEls[i].onmouseover=function() {
this.className+=" hover";
}
getEls[i].onmouseout=function() {
this.className=this.className.replace("hover", "");
}
}
}
css
Código:
/*menu secciones*/
#outer {position:relative;}
#outer #content {clear:left; position:absolute;z-index:10000}
/*--------*/
#menu ul,
#menu li.click ul ul,
#menu li.click ul li.hover ul ul {display:none;}
/*--------------*/
#menu { width:100%;font-size:12px; font-family: "Arial"; font-weight: normal; list-style-type: none; position:relative; left:0;background:#0F7A3C url(../img/mainMenu_bg.png) top left repeat-x;height:32px;color:#fff;cursor:pointer;padding:0;}
/*primer nivel*/
#menu ul {z-index:10000; width:100%; color:#fff; list-style-type:none;padding:0;}
#menu li {display: block; float: left;position:relative;background:url(../img/mmenu_link_bg.gif) right no-repeat;height:24px; padding:8px 6px 0 6px;}
#menu li a {color:#FFF;text-decoration:none; display:block;}
#menu li:hover, #menu li.click {color:#333; z-index:10000; background: #FFF url(../img/menu_over.gif) repeat-y right;}
#menu li:hover, #menu li.click a, #menu li:hover a, #menu li.click a:hover {color:#444; text-decoration:none;}
/*subniveles*/
#menu li.click ul {display:block;width:230px;position:absolute;left:-1px; top:33px; margin:4px 0 0 0;padding:0 ;border:1px solid #ccc;z-index:10000; background:url(../img/sub_bg.png) repeat-x #EEE}
#menu li.click ul li {background:none; height:25px}
#menu li.click ul li.fly {background:url(../img/li_bg.png) no-repeat 220px}
#menu li.click ul li, #menu li.click ul li.fly {position:relative; left:0px;top:0;width:230px;padding:2px 0 2px 0;margin:0;}
#menu li.click ul li.hover, #menu li.click ul li.fly.hover {padding:2px 0 2px 0;margin:0; background-color:#EAEAEA;}
#menu li.click ul li.hover, #menu li.click ul li.fly.hover a:hover {color:#333}
#menu li.click ul li a, #menu li.click ul li.fly a,#menu li.click ul li.hover a, #menu li.click ul li.fly.hover a {margin-left:5px; text-decoration:none; color:#333; padding-top:3px}
/*subnivel 3*/
#menu li.click ul {display:block;width:230px;top:29px;}
#menu li.click ul li.hover ul,
#menu li.click ul li.hover ul li.hover ul {display:block;
position:absolute;
left:220px; /*posición horizontal de todos los Subniveles*/
top:-1px;
border:1px solid #ccc;}
/**/
#menu ul li ul {}
/* ----------------------------------------------------- ensayo para subnivel derecho-------------------------------------------------------*/
/*subniveles*/
#menu .subbottom {right:0px}
#menu .subbottom li.click ul {display:block;width:230px;position:absolute;top:32px; background-color:#fff; margin:0;padding:0 ;border:1px solid #ccc;border-width:0 1px 1px 1px;z-index:20000; right:0px}
#menu .subbottom li.click ul li {background-image:none;}
#menu .subbottom li.click ul li.fly {background:#fff url(../img/menu/menu_li_bg.gif) no-repeat 221px 0; }
#menu .subbottom li.click ul li, #menu .subbottom li.click ul li.fly {background:#fff; position:relative; left:0px;top:0;width:230px;padding:2px 0 2px 0;margin:0; }
#menu .subbottom li.click ul li.hover, #menu .subbottom li.click ul li.fly.hover {background-color:#f3f4f5;padding:2px 0 2px 0;margin:0; }
#menu .subbottom li.click ul li a, #menu .subbottom li.click ul li.fly a,#menu .subbottom li.click ul li.hover a, #menu .subbottom li.click ul li.fly.hover a {margin-left:5px; text-decoration:none; color:#444; }
*/
/*subnivel 3*/
#menu .subbottom li.click ul {display:block;width:230px;top:29px;}
#menu .subbottom li.click ul li.hover ul,
#menu .subbottom li.click ul li.hover ul li.hover ul {display:block;
position:absolute;
left:-231px; /*posición horizontal de todos los Subniveles*/
top:-1px;
border:1px solid #ccc;
border-width:1px 1px 1px 0;}
/**/
he intentado pero no he podido lograrlo... sobre todo porque de javascript poco poco se....
muchas gracias por su ayuda
