otro menú desplegable
bueno, ya que sus poneis laboriosos con los menús allá va otra. viendo que los desplegables se me dan tan bien, estoy intentando hacer uno horizontal con menús desplegables de 2 niveles más del estilo de los de inditex. funciona bien en IE y Mozilla (en Opera se descuajaringa), pero me falla una cosa: en IE no se me despliega el tercer nivel. jugando con "!important" he logrado que lo haga, pero entonces se me despliegan todos los de tercer nivel a la vez. conclusión: soy un paquete con los menús, por eso pido una ayudita para un ex-leproso.
y ya puestos ¿cómo hago para que se me vayan quedando seleccionadas las opciones superiores según el menú que se haya desplegado? me refiero a la pestaña superior y en caso de exisitir tres niveles, cómo se queda activo el de segundo nivel que en ese momento muestre sus opciones. no me explico... :?
<code>
<div id="menu">
<ul id="opcionesMenu">
<li><a href="#" onclick="return false;" title="Gestión de ofertas" accesskey="1" rel="section">Gesti&oacute;n de ofertas</a>
<ul>
<li><a href="#" onclick="return false;" title="Nueva oferta" rel="section">Nueva oferta</a></li>
<li><a href="#" onclick="return false;" title="Listado ofertas en edición" rel="section">Listado ofertas en edici&oacute;n</a></li>
<li><a href="#" onclick="return false;" title="Listado ofertas edición cerrada" rel="section">Listado ofertas edición cerrada</a></li>
<li><a href="#" onclick="return false;" title="Listado ofertas publicadas" rel="section">Listado ofertas publicadas</a></li>
<li><a href="#" onclick="return false;" title="Listado ofertas terminadas" rel="section">Listado ofertas terminadas</a></li>
</ul>
</li>
<li><a href="#" onclick="return false;" title="Gestión de avisos" accesskey="2" rel="section">Gesti&oacute;n de avisos</a>
<ul>
<li><a href="#" onclick="return false;" title="Nuevo" rel="section">Nuevo</a></li>
<li><a href="#" onclick="return false;" title="Listado avisos" rel="section">Listado avisos</a></li>
</ul>
</li>
<li><a href="#" onclick="return false;" title="Reclutamiento" accesskey="3" rel="section">Reclutamiento</a>
<ul>
<li class="submenu"><a href="#" onclick="return false;" title="" rel="section">Descarga de solicitudes</a>
<ul>
<li><a href="#" onclick="return false;" title="" rel="section">Programar descargas</a></li>
<li><a href="#" onclick="return false;" title="" rel="section">Ejecutar descargas</a></li>
</ul>
</li>
<li class="submenu"><a href="#" onclick="return false;" title="" rel="section">Filtrado</a>
<ul>
<li><a href="#" onclick="return false;" title="" rel="section">B&uacute;squeda general</a></li>
<li><a href="#" onclick="return false;" title="" rel="section">Definir requisitos b&aacute;sicos</a></li>
<li><a href="#" onclick="return false;" title="" rel="section">Recuperar requisitos b&aacute;sicos</a></li>
<li><a href="#" onclick="return false;" title="" rel="section">Recuperar listado</a></li>
</ul>
</li>
<li class="submenu"><a href="#" onclick="return false;" title="" rel="section">Valoraci&oacute;n</a>
<ul>
<li><a href="#" onclick="return false;" title="" rel="section">Definir criterios</a></li>
<li><a href="#" onclick="return false;" title="" rel="section">Recuperar criterios</a></li>
<li><a href="#" onclick="return false;" title="" rel="section">Valorar listado</a></li>
<li><a href="#" onclick="return false;" title="" rel="section">Recuperar listado valorado</a></li>
<li><a href="#" onclick="return false;" title="" rel="section">Fotos TCP's</a></li>
</ul>
</li>
<li class="submenu"><a href="#" onclick="return false;" title="" rel="section">Preselecci&oacute;n</a>
<ul>
<li><a href="#" onclick="return false;" title="" rel="section">Recuperar listado</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#" onclick="return false;" title="Selección" accesskey="4" rel="section">Selecci&oacute;n</a></li>
<li><a href="#" onclick="return false;" title="Contratación" accesskey="5" rel="section">Contrataci&oacute;n</a></li>
</ul>
</div>
</code>
<code>
/********** GENERALES **********/
body {
margin: 0;
padding: 0;
font-family: Georgia, Tahoma, Verdana, Arial, Helvetica, Geneva, sans-serif;
font-size: 11px;
color: #808080;
background-color: #ffffff;
background-image: url(../img/fondo_cuadros.gif);
}
/********** MENÚ **********/
#menu {
border-top: 1px #d0d0d0 solid;
border-bottom: 1px #d0d0d0 solid;
background-color: #f5f5f5;
padding: 5px 10px;
}
#menu ul {
position: relative;
list-style: none;
margin: 0;
padding: 0;
}
#menu ul li {
display: inline;
position: relative;
}
#menu ul a {
border-left: 1px #f5f5f5 solid;
border-right: 1px #f5f5f5 solid;
color: #808080;
padding: 5px 10px;
text-decoration: none;
}
#menu ul a:hover {
border-left: 1px #d0d0d0 solid;
border-right: 1px #d0d0d0 solid;
background-color: #eaeff5;
}
#menu li ul {
position: absolute;
visibility: hidden;
top: 24px;
left: 0;
width: 202px;
border-bottom: 1px #d0d0d0 solid;
}
#menu li > ul {
top: 19px;
}
#menu li ul li {
display: block;
position: relative;
}
#menu li ul a {
display: block;
width: 180px;
height: 1%;
border: 1px #d0d0d0 solid;
border-bottom: 0;
background-color: #fbfbfb;
margin: 0;
padding: 3px 10px;
}
#menu li ul a:hover {
background-color: #eaeff5;
}
#menu li li.submenu a {
background: #fbfbfb url(../img/flechaDerecha.gif) 100% 50% no-repeat;
}
#menu li li.submenu a:hover {
background: #eaeff5 url(../img/flechaAbajo.gif) 100% 50% no-repeat;
}
#menu li:hover ul, #menu li.over ul {
visibility: visible;
}
#menu li:hover ul ul, #menu li.over ul ul {
visibility: hidden;
}
#menu li li:hover ul, #menu li li.over ul {
visibility: visible;
}
#menu li li ul {
position: absolute;
visibility: hidden;
top: 0;
left: 201px;
}
#menu li li li a {
background-image: none !important;
}
/* Fix IE. Hide from IE Mac \*/
* html ul ul li { float: left; height: 1%; }
* html ul ul li a { height: 1%; }
/* End */
</code>
<code>
window.onload = function() {
startList();
}
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("opcionesMenu");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
</code>
zigotica
estooo, puedes poner un enlace? ahora mismo copiar/pegar me parece demasiado dificil o algo ;)
cbp
jejeje, normal :P
estoy trabajando en local y no puedo subir nada a mi web, problemas de proxy... pero si te hace ilu y te apetece te lo mando por correo y tan felices. además, así ves el diseño y te metes con él. y si no, no pasa ná, ahora viene Xr-V a echarme una mano, que me lo ha dicho en el otro hilo :P
zigotica
bueno, asi a bote pronto y solo por tocar las bolas, claro:
1. añade un namespace para que tus funciones no se mezclen con otras posibles funciones.
2. añade el addOnload que he puesto antes, para no interferir con otros posibles onload's
3. ya te dijimos que o todo css o todo js, es mas mejor ;)
cbp
respuesta
1. ¿lo cualo? ¿namespace? :?
2. fale, ahora lo miro.
3. es todo css excepto el jodío .js que he tenido que meter para que el señor IE haga bien lo de coger el :hover en algo distinto a un enlace, en este caso un "li". haré bien las cosas cuando los programadores de Microsoft hagan su trabajo o el IE no tenga una cuota tan alta :evil:
como tocadura de bolas está bien, pero a ver si podemos hacer algo con lo que he pedido ¿eh? :P
zigotica
1. mirate el anterior ejemplo, ahi explico lo de los literales. bueno no lo explico, lo aplico (LISTERINE = { ...), pero se entiende facil y sino preguntas ;)
para lo que quieres mejor si usas :hover a saco para cambiar el color de fondo, por ejemplo, deberia chutar.
cbp
ya puestos con las críticas del otro hilo, todo esto tampoco tendría sentido si el IE tuviera un soporte de CSS decente y entendiera todos los selectores y no la mierda que hace ahora :evil:
zigotica
ya...
cbp
juer, si no me habeis propuesto ninguna solución :(
por cierto, Sergi, he estado mirándome lo del namespace y el addOnload y no me funciona ¿dónde tengo que meter mi función? he probado justo después de "starter = function(id)" ¿y cómo haría para ejecutar más de una función cuando se cargue la página? ¿dónde pongo el código de cada función que añada y cómo la llamo? eso te pasa por decirme que pregunte :P
una cosa más: rotundo éxito de tu variable LISTERINE en mi oficina :D
XrV
cbp
una cosa más: rotundo éxito de tu variable LISTERINE en mi oficina :D
haylos con una perspectiva sobre el sentido del humor muy amplia (jejeje :P)
zigotica
cbp
por cierto, Sergi, he estado mirándome lo del namespace y el addOnload y no me funciona ¿dónde tengo que meter mi función? he probado justo después de "starter = function(id)"
vale, ¿que codigo tienes ahora que no te funciona? asi a bote pronto pueden ser muchas cosas.
cbp
¿y cómo haría para ejecutar más de una función cuando se cargue la página? ¿dónde pongo el código de cada función que añada y cómo la llamo?
<code>
LISTERINE.addLoadEvent(function() {alert("hola 1")});
LISTERINE.addLoadEvent(function() {alert("hola 2")});
LISTERINE.addLoadEvent(function() {alert("hola 3")});
</code>
cbp
rotundo éxito de tu variable LISTERINE en mi oficina
:shock:
cbp
pues ya lo he borrado y ahora mismo no me hace falta, pero me quedo con la manera de hacer las llamadas a cada función y cuando me haga falta te recupero el post en un momento :D
no sé de qué te sorprendes, tu humor tiene mucho éxito entre los programadores :P
zigotica
vale, ya me avisaras.
jaja, es que somos unos cachondos mentales. o no.
cbp
no, no, la broma ha sido tuya, no quieras compartir ahora responsabilidades...
zigotica
vale, vale, ya vendrás con tu caballo cansado a mi rancho a pedir agua...
cbp
:roll:
naniero niero...
cbp
a todo esto, viendo que no era capaz de arreglar el fallo en IE, he encontrado esto en la página de un serbio que me viene mu bien (el código, no el serbio).
aunque me sigue picando el que había hecho yo a partir del menú de ALA...