Comunidad de diseño web y desarrollo en internet online

menu desplegable

Citar            
MensajeEscrito el 16 Nov 2005 07:27 pm
Por favor, necesito que alguien me asesore urgéntemente en esto.
He encontrado una manera muy sencilla de hacer un navegador desplegable, con un submenú dentro de un <li> es decir:

<ul>
<li>bla bla...</li><!--menu principal-->
<ul>
<li>bla bla...</li><!--submenú desplegable-->
</ul>
</li>
</ul>


que junto a este <script>:

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
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", "");
}
}
}
}
}
window.onload=startList;


Funciona perfecto. El problema es que no se como desembarazarme de las propiedades del menú principal para el submenú. Por mas que pruebo meter otra clase o id, o se destroza, o no hace nada y no quiero, por ejemplo, imagen de fondo ni ese cuerpo de letra en el submenú. Aguien sabría como lo puedo hacer respetando esta forma?

Esta es la prueba que llevo hecha hasta ahora:

http://www.mu4us.com/prueba2.html

Muchas gracias!!

Por Carmen

.GAIA Developer

1055 de clabLevel


8 articulos

 

Madrid, España

msie
Citar            
MensajeEscrito el 16 Nov 2005 10:08 pm
es curioso, ese menú se ve totalmente distinto en opera y en IE y FF.
Has olvidado ver la parte de CSS del archivo

Código :

<style type="text/css">
ul {
   margin:0px;
   padding:0;   
   list-style:none; 
   }
li {
   float: left;
   position: relative;
   margin:0;
   }
li  a {
   display:block;
   color: #666; 
   text-decoration:none;
   color: #666; 
   padding-top:5px;
   width:98px; 
   height:13px; 
   text-align:center; 
   font-size:11px; 
   font-weight:bold; 
   background-image:url(/images/img_menu.png); 
   }
li a:hover {
   color:#09F; 
   text-decoration:none; 
   font-weight:bold; 
   width:98px; 
   height:13px; 
   background-image:url(/images/img_menu_on.png);
   }
li ul {
   display: none;
   position: absolute;
   left: 0;
   color:#fff; 
   text-decoration:none; 
   background-image:url(/images/img_menu_on.png);
   font-size:10px;
      }
li>ul { 
   top: auto;
   left: auto;
   }
li:hover ul, li.over ul { 
   display: block;
      }
</style>


creo que es suficientemente intuitivo una vez las estudias, ten en cuenta qué parte de codigo tiene cada propiedad y lo solucionarás, es decir, compara el html con el css, el js no te sirve para nada en cuestion de estilos...
por ejemplo

Código :

li  a { 
   display:block; 
   color: #666; 
   text-decoration:none; 
   color: #666; 
   padding-top:5px; 
   width:98px; 
   height:13px; 
   text-align:center; 
   font-size:11px; 
   font-weight:bold; 
   background-image:url(/images/img_menu.png); /*Imágen del fondo de la barra*/
   } 
li a:hover { 
   color:#09F; 
   text-decoration:none; 
   font-weight:bold; 
   width:98px; 
   height:13px; 
   background-image:url(/images/img_menu_on.png); /*Imágen de la barra de fondo al tener el puntero encima*/
   } 
li ul { 
   display: none; 
   position: absolute; 
   left: 0; 
   color:#fff; 
   text-decoration:none; 
   background-image:url(/images/img_menu_on.png); /*Aunque sea la misma imágen, esta es la que sale en los submenús*/
   font-size:10px; 
      }


En resumen, es en estos tres bloques de código donde tienes que modificar cosas, si no sabes CSS puedes ver algunos tutoriales que tenemos en la sección "tutoriales"->"otros"
PD: No está bien hacer Ctrl+C & Ctrl+V, se aprende mucho menos, y te lo digo porque yo era de esos... :wink:

Por Johnny

Claber

1589 de clabLevel

4 tutoriales

  Héroes

opera
Citar            
MensajeEscrito el 16 Nov 2005 10:14 pm
Por cierto, Bienvenida a Cristalab, lee las reglas del foro para obtener respuestas efectivas (aunque esta estaba bien hecha...) y hechale un vistazo a la seccion de tutoriales, vienen muy bien...
Saludos!!

Por Johnny

Claber

1589 de clabLevel

4 tutoriales

  Héroes

opera
Citar            
MensajeEscrito el 17 Nov 2005 04:10 am
Hmm.. el XHTML de esa lista está mal.

Código :

<ul> <!--menu principal-->
  <li>bla bla...
    <ul> <!--submenú desplegable-->
      <li>bla bla...</li>
    </ul>
  </li>
</ul>


Asi se arma una lista con niveles, debe estar dentro del li.

Aunque no estoy seguro si tu código en javascript funcione correctamente después de eso.

Mejor lees sobre cómo hacer un menú desplegable en A List Apart.

http://www.alistapart.com/articles/horizdropdowns/
http://www.alistapart.com/articles/dropdowns/

PD: Ahora que lo veo, parece que ese código en Javascript fue sacado del mismo articulo.

Por NEO_JP

BOFH

5724 de clabLevel

13 tutoriales
12 articulos

Genero:Masculino   Anime Bloggers Premio_Secretos Team Cristalab

Front-end Developer en Washington, DC

clabbrowser
Citar            
MensajeEscrito el 17 Nov 2005 10:17 am
cierto, sobra un "</li>"

Por Johnny

Claber

1589 de clabLevel

4 tutoriales

  Héroes

opera
Citar            
MensajeEscrito el 17 Nov 2005 10:27 am
Mucha gracias y sobre todo por el consejo de copiar. Sí es rápido, como tu has dicho, pero estoy intentando aprender como hacer bien las cosas. Gracias por las respuestas y vuestros tutoriales. Son una gran ayuda. en serio :)

Por Carmen

.GAIA Developer

1055 de clabLevel


8 articulos

 

Madrid, España

msie
Citar            
MensajeEscrito el 18 Nov 2005 11:59 am
Ya esta solucionada la parte visual!!:
http://www.mu4us.com/prueba2.html
Es mas o menos así como lo quería. Ahora el problema es que , cierto , en Opera el desplegable es horizontal, como si en firefox o explorer heredase el float: left del listado principal, no así en Opera (no lo he comprobado en más navegadores).

Se soluciona poniendo un position: relative en esta parte:

li:hover ul, li.over ul {
display:block;
position relative;

}
Pero es desastroso porque el resto del listado principal sufre un desplazamiento (Empieza donde termina el listado secundario).
Si conocéis alguna solución, por favor, decirme. Muchísimas gracias!

Por Carmen

.GAIA Developer

1055 de clabLevel


8 articulos

 

Madrid, España

msie
Citar            
MensajeEscrito el 18 Nov 2005 12:02 pm
Perdón. Así:

li:hover ul, li.over ul {
display:block;
position: relative;

}

Por Carmen

.GAIA Developer

1055 de clabLevel


8 articulos

 

Madrid, España

msie

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.