novato: alguien me ayuda a desplegar este menu horizontal

javitxin10 · #1 (**permalink**) 03/04/2009, 02:59

soy muy novato en css y tengo este menú horizontal creado.

mi codigo aspx es este:

<ul id="menu">
<li><a class="current" href="">¿Quiénes somos?</a></li>
<li><a href="servicios.aspx">Servicios</a></li>
<li><a href="galeria.aspx">Obras</a></li>
<li><a href="presupuestoTerm.aspx">Presupuestos</a></li>
<li><a href="ahorro.aspx">Consejos</a></li>
<li><a href="ofertas.aspx">Ofertas</a></li>
<li><a href="noticias.aspx">Noticias</a></li>
<li><a id="last" href="#">Contacto</a></li>
</ul>

y el css es el siguiente:

#menu { margin: 0 0 50px; }
#menu li { list-style: none; float: left; }
#menu li a { cursor: pointer; font: Verdana; padding: 5px 27px; line-height: 25px; background: #8C2E2E; margin: 0 1px 0 0; color: #B4B4B4; }
#menu li a:hover { background: #FF8787; color: #000; }
#menu li a.current { background: #66A3CF; color: #fff; }
#menu li a#last { margin: 0; padding: 5px 35px 5px 34px; }

.third { font-size: .9em; float: left; width: 800px; margin: 0 30px 30px 30px; }
.last { float: right; margin: 0 10px 10px 0; }

necesito que cuando el raton este sobre "consejos" se desplieguen hacia abajo 4 opciones más. Es esto difícil de conseguir? con los tutoriales no consigo gran cosa, nunca habia visto css.

muchas gracias al que pueda ayudarme!

subirol · #2 (**permalink**) 03/04/2009, 03:43

Para hacer eso tienes que utilizar una libreia de java script, que se llama jquery, aqui puedes ver como se hace
http://www.anieto2k.com/2006/11/15/e...eon-de-jquery/

Si si visitas la web de mi firma tambien veras como lo he implementado yo.

Un saludo.

javitxin10 · #3 (**permalink**) 03/04/2009, 04:27

creo que yo busco algo aún más simple. Estoy intentando basarme en esto:

htmldog.com/articles/suckerfish/dropdowns/

pero no consigo adaptarlo a mi código. Alguien podría echarme un cable en qué cosas de mi css debo modificar?

el codigo html supongo que deberá ser algo asi:

<ul id="menu">
<li><a class="current" href="">¿Quiénes somos?</a></li>
<li><a href="servicios.aspx">Servicios</a></li>
<li><a href="galeria.aspx">Obras</a></li>
<li><a href="presupuestoTerm.aspx">Presupuestos</a></li>
<li><a href="ahorro.aspx">Consejos</a>
<ul>
<li><a href="servicios.aspx">Sublink1</a></li>
<li><a href="galeria.aspx">Sublink2</a></li>
<li><a href="servicios.aspx">Sublink3</a></li>
</ul>
</li>
<li><a href="ofertas.aspx">Ofertas</a></li>
<li><a href="noticias.aspx">Noticias</a></li>
<li><a id="last" href="#">Contacto</a></li>
</ul>

kseso? · #4 (**permalink**) 03/04/2009, 09:21

Pásate por la página de Mikmoro
http://www.araudi.net/ejemplos/menus...ables_CSS.html
Ahí tienes unos cuantos menús sólo con css, validados y multinavegador (incluido el ie6)

javitxin10 · #5 (**permalink**) 03/04/2009, 09:34

solo veo los ejemplos de los menus funcionando, pero donde puede ver el código?

gorkreg · #6 (**permalink**) 03/04/2009, 09:35

Más sencillo que todo eso. Los menus desplegables funcionan con listas anidadas que es exactamente lo que has hecho. Tu código HTML está bien..

Luego en la hoja de estilos tienes que crear las siguientes reglas:

# menu a {
display: block; /*en caso de que quieras añadir imágenes de fondo
width: ???px;
}
# menu li {
float: left; /*coloca los items del menú en horizontal
width: ???px;
}
#menu li ul { /*Esta es la lista anidada, el submenú desplegable
position: absolute;
width: ???px;
left: -1000 cm; /*para que desaparezca de la pantalla (puedes darle cualquier cantidad siempre que sea muuuucho)
}
#menu li:hover {
left: auto; /*para que vuelva a parecer el submenú al posarse sobre "consejos"
}

La anchura (width) depende de si todas las cajas y el desplegable tienan la misma. Si es así, procura darla a esos tres elementos.

Es básicamente lo mismo, o muy parecido, que lo que hacen en el ejemplo que mostrabas. Ahora te funcionará excepto en Explorer, que no admite pseudoclases a elementos que no sean anclas. Para que vaya bien, añade este código al <head>:




Suerte

kseso? · #7 (**permalink**) 03/04/2009, 09:40

Varias opciones:
"guardar página completa como..."
También puedes seleccionar "ver código" y en el "head" verás esta referencia:

Cita:

sustituye en la barra de navegación el nombre del archivo: "..../archivo.html" por lo que te aparece en el href y tendrás también el código css.

Edito:
Hola Gorkreg
¿por qué el uso de js cuando javtxin no lo contempla en su pregunta inicial?
Creo que se va a liar más, pues si desconoce cómo obtener el css y html de una página cargada, no quiero pensar si le añadimos otras técnicas.
Cualquiera de los menús indicados funcionan perfectamente con ie6 y mayores.
Un saludo

javitxin10 · #8 (**permalink**) 03/04/2009, 10:11

muchas gracias a los dos, probaré con todo lo que me habeis aportado y sin tengo alguna duda, volveré a preguntar. gracias!

jomaruro · #9 (**permalink**) 03/04/2009, 14:31

Cita:

Iniciado por kseso?

¿por qué el uso de js cuando javtxin no lo contempla en su pregunta inicial?
Creo que se va a liar más, pues si desconoce cómo obtener el css y html de una página cargada, no quiero pensar si le añadimos otras técnicas.
Cualquiera de los menús indicados funcionan perfectamente con ie6 y mayores.
Un saludo

Hola:

Totalmente de acuerdo.

Saludos.

javitxin10 · #10 (**permalink**) 06/04/2009, 09:51

hola de nuevo! me sirvió de mucha ayuda el menu horizontal desplegable de 3 niveles de la pagina que me recomendaste con contenidos interesantes sacados del foro. Tras cambiar pequeñas cosas para que el menu tengo los colores que yo quiero, etc. sigo teniendo problemas ya que no se me ve exactamente igual en Internet Explorer que en Firefox. He aqui dos pantallazos:

img168.imageshack.us/my.php?image=menuenfirefox.jpg

img520.imageshack.us/my.php?image=menuenie.jpg

Logicamente yo quiero que el resultado sea como en Firefox, pero como veis IE solapa el boton del nivel2 del menu, y si añado un 3º nivel, ese boton aparece más separado.

podríais ayudarme a arreglar esto? Que parte del css debería tocar?

muchas gracias

jomaruro · #11 (**permalink**) 06/04/2009, 12:16

Cita:

Iniciado por javitxin10

solo veo los ejemplos de los menus funcionando, pero donde puede ver el código?

Hola:

En tu navegador -> Ver -> Código Fuente

Saludos.

javitxin10 · #12 (**permalink**) 07/04/2009, 00:59

Cita:

Iniciado por jomaruro

Hola:

En tu navegador -> Ver -> Código Fuente

Saludos.

si, ya me di cuenta de que tenía que verlo así, ahora mi problema es el que comento en el mensaje anterior. gracias de todas formas