Menu concreto... horizontal

[neodani]

Buenas,

Alguno ha visto alguna vez un menu horizontal que tiene una sola fila y que cuando pulsas un boton aparece una segunda fila con las categorias de dicho botón...?

Me explico. Tenemos

Deportes | Noticias | Personajes

Y que pulses en DEPORTES y abajo te aparezca

Deportes | Noticias | Personajes
Futbol | Tenis | Baloncesto | Béisbol | Formula 1

Sé que lo he visto en algun sitio, pero no soy capaz de encontrar el nombre que tiene este menu o alguna pagina que lo implemente.

Sabéis que tipo de menú os digo? Conocéis alguna web?¿?

Gracias de antemano!

[daPhyre]

Eso es un menú deplegable, Mikel hizo un excelente ejemplo aquí: http://www.forosdelweb.com/f53/menu-...00-css-595007/

Ahora, creo que solo seria cuestión de darle un inline o un float none para que te los despliegue horizontal. Si necesitas más ayuda, con gusto podremos ofrecertela. Suerte!

[neodani]

Iniciado por daPhyre

Eso es un menú deplegable, Mikel hizo un excelente ejemplo aquí: http://www.forosdelweb.com/f53/menu-...00-css-595007/

Ahora, creo que solo seria cuestión de darle un inline o un float none para que te los despliegue horizontal. Si necesitas más ayuda, con gusto podremos ofrecertela. Suerte!

Crees que solo cambiando la propiedad por inline ya bastaría :S

En alguna página lo vi arghhh que rabia no acordarme

[daPhyre]

Pues yo tengo esto en un CSS que hice con ese efecto, pero no estoy seguro si era solo eso o tenía que poner algo más.

#menu li{ float:left;}

Suerte!

[Mikmoro]

Hola, neodani.

Atendiendo a tu consulta, he hecho el mismo menú pero con el segundo nivel también en horizontal. Efectivamente no basta con el cambio del float left en el caso concreto de mi menú, quizá en otros casos sí.

Pásate por este hilo, que es donde lo he puesto para que esté junto con el otro por si le sirve de inspiración a más gente

Mikel.

[neodani]

Iniciado por Mikmoro

Hola, neodani.

Atendiendo a tu consulta, he hecho el mismo menú pero con el segundo nivel también en horizontal. Efectivamente no basta con el cambio del float left en el caso concreto de mi menú, quizá en otros casos sí.

Pásate por este hilo, que es donde lo he puesto para que esté junto con el otro por si le sirve de inspiración a más gente

Mikel.

Gracias Mikel

Solo una duda, a ver si se puede resolver en css o hay que tirar de javascript.

Resulta que me gustaría que cuando se pulsase en un botón del segundo nivel se mantuviera "pulsado", sabes? un recuadro o alguna forma que dijera que estas viendo esa sección.
Me explico? Marcar el menu que estas viendo.

Saludos!

[Mikmoro]

En este caso sólo funcionaría en IE6, porque es el único que usa un elemento "a" para desplegar el segundo nivel. El resto usan el elemento "li" para hacerlo, y desgraciadamente el "li" no acepta el foco, por lo tanto no sirve de nada ponerle la pseudo-clase :focus.

Quizá con javascript puedes hacer que "li" gane el foco, pero entonces igual te merece más la pena hacer el menú con javascript completo.

En dynamicdrive tienes muchos, seguro que alguno se ajusta a lo que buscas.

Mikel.

[neodani]

Iniciado por Mikmoro

En este caso sólo funcionaría en IE6, porque es el único que usa un elemento "a" para desplegar el segundo nivel. El resto usan el elemento "li" para hacerlo, y desgraciadamente el "li" no acepta el foco, por lo tanto no sirve de nada ponerle la pseudo-clase :focus.

Quizá con javascript puedes hacer que "li" gane el foco, pero entonces igual te merece más la pena hacer el menú con javascript completo.

En dynamicdrive tienes muchos, seguro que alguno se ajusta a lo que buscas.

Mikel.

Qué va, me los he repasado todos xD no hay ninguno que haga eso.

Pero si en lugar de hacerlo on focus hacemos que el menu que has creado, al pulsar sobre un boton de primer nivel haga aparecer el segundo nivel (me refiero que estuviera hidden y lo mostrase) Esa la primera parte.

La segunda parte... pulsando sobre un botón del segundo nivel... te llevase a la pagina en cuestión

Tercera parte... Una vez en la página, poner automaticamente el segundo nivel visible y con otra propiedad (que estuviera hidden) para mostrar ahora el elemento activo.

Me entendiste? xD

Como lo ves? es viable con css sin necesidad de javascript?

Salu2!

[Mikmoro]

Iniciado por neodani

Pero si en lugar de hacerlo on focus hacemos que el menu que has creado, al pulsar sobre un boton de primer nivel haga aparecer el segundo nivel (me refiero que estuviera hidden y lo mostrase) Esa la primera parte.

Es ahí donde está el problema. Tal y como está hecho, que es como se puede hacer que todo funcione para como está pensado, al hacer :hover sobre un elemento li el menú de segundo nivel aparece. Correcto. Pero el problema es que los elementos "li" no aceptan el foco, es decir, que no se les puede poner ni :focus ni :active porque no sirve de nada, y sin focus ni active disponibles no podemos hacer que al pulsar aparezca el segundo nivel excepto con un evento de javascript.

Habría una forma de hacerlo, pero no validaría, osea, que no sería válida en la W3C, por lo que no es factible.

Mikel.

[neodani]

Iniciado por Mikmoro

Es ahí donde está el problema. Tal y como está hecho, que es como se puede hacer que todo funcione para como está pensado, al hacer :hover sobre un elemento li el menú de segundo nivel aparece. Correcto. Pero el problema es que los elementos "li" no aceptan el foco, es decir, que no se les puede poner ni :focus ni :active porque no sirve de nada, y sin focus ni active disponibles no podemos hacer que al pulsar aparezca el segundo nivel excepto con un evento de javascript.

Habría una forma de hacerlo, pero no validaría, osea, que no sería válida en la W3C, por lo que no es factible.

Mikel.

Merci

[Mikmoro]

Voy a investigar sobre esto, porque he descubierto que un elemento "li" puede ganar el foco si se le coloca un tabindex, y se puede actuar sobre él so el selector está en el propio html y no en la css externa.

Si descubro algo te aviso, aunque para entonces ya te habrás apañado.

Mikel.

[kseso?]

Hola pareja de dos:
en la página de cssplay.co.uk hay toda una sección de "Menus - Multi-Level CSS Only" y quizás este modelo pueda servir para lo que buscáis "sliding doors with a drop line three"
Un saludo

[Mikmoro]

Hubiera sido buena idea, pero en realidad ese menú lo que hace es cargar otra página diferente. No sé si será lo que busca neodani, pero yo al menos estoy intentando hacer que el menú fije el segundo nivel al pulsar sin cambiar de página.

En realidad creo que el que propones se acerca más a la idea de los tres problemas que planteaba neodani, así que es probable que sea eso lo que busca.

Yo por mi parte, de momento he consegudo lo que busco para FF, IE6 y Opera, pero algo me falla en IE7 y Safari.

Mikel.

[neodani]

Iniciado por kseso?

Hola pareja de dos:
en la página de cssplay.co.uk hay toda una sección de "Menus - Multi-Level CSS Only" y quizás este modelo pueda servir para lo que buscáis "sliding doors with a drop line three"
Un saludo

Exacto era un estilo así.

Aunque de todas formas me tengo que comer con patatas lo de cargar de nuevo la página para cada "sección".

A no ser que se pueda trabajar en AJAX, si fuese ese menu y el contenido fuese por ejemplo vinculos "llamale sección Enlaces"

Tienes el menu que has puesto kseso, y cuando pulsas en el vinculo te carga debajo los "enlaces" de dicha categoria con sus respectivos comentarios y descripción....

[neodani]

U_U no se sacar el codigo de este menu.

http://www.cssplay.co.uk/menus/doors...ine_three.html

No veo por ningun lado nada para bajarlo. Y si lo copio tal cual de la página no me funciona lo de mantener la sección actual.

Alguien se lo puede bajar?

Gracias

[kseso?]

Iniciado por neodani

U_U no se sacar el codigo de este menu.
http://www.cssplay.co.uk/menus/doors...ine_three.html
No veo por ningun lado nada para bajarlo. Y si lo copio tal cual de la página no me funciona lo de mantener la sección actual.
Alguien se lo puede bajar?
Gracias

Mozilla FF-->Archivo-->Guardar página
Y después a dejar la parte del código que te interese, eso sí:

Código:

Copyright:1. If you are using this on a personal web site then please add a link back to CSSplay and retain any copyright comment in the stylesheet.
A donation to the 'Support CSSplay' fund would be appreciated. 

Suerte

[neodani]

Iniciado por kseso?

Mozilla FF-->Archivo-->Guardar página
Y después a dejar la parte del código que te interese, eso sí:

Código:

Copyright:1. If you are using this on a personal web site then please add a link back to CSSplay and retain any copyright comment in the stylesheet.
A donation to the 'Support CSSplay' fund would be appreciated. 

Suerte

Eso ya lo probé, y no funciona así.

Es decir, el menu se ve pero si quieres que cargue la una sección no funciona, siempre carga la misma por defecto.

[Mikmoro]

Lo debes cambiar tú en cada página. En este caso, está activo el menú correpondiente a marzo (march):

<ul class="select"><li><a href="doors_drop_line_three.html?current=two&amp;s ub=none"><b>February</b>
<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub">
<li><a href="doors_drop_line_three.html?current=two&amp;s ub=a">Sausages</a></li>
<li><a href="doors_drop_line_three.html?current=two&amp;s ub=b">Fried Bread</a></li>
<li><a href="doors_drop_line_three.html?current=two&amp;s ub=c">Fillet steak</a></li>
<li><a href="doors_drop_line_three.html?current=two&amp;s ub=d">Mushrooms</a></li>
</ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul>


<ul class="current"><li><a href="doors_drop_line_three.html?current=three&amp ;sub=none"><b>March</b>
</a></li></ul><ul class="sub_active"><li><a href="doors_drop_line_three.html?current=three&amp ;sub=a">Lager</a></li>
<li><a href="doors_drop_line_three.html?current=three&amp ;sub=b">Beer</a></li>
<li><a href="doors_drop_line_three.html?current=three&amp ;sub=c">Red wine</a></li>
<li><a href="doors_drop_line_three.html?current=three&amp ;sub=d">Crisps</a></li>
<li><a href="doors_drop_line_three.html?current=three&amp ;sub=e">Brandy</a></li>
</ul>

Es decir, en cada página, cambia esas clases en el menú que quieres que sea activo en ese momento.

Mikel.

[Mikmoro]

Ya he conseguido que este menú funcione como quería en FF 2 y 3b5, IE6 y 7 y Opera 9.50. En Safari windows no funciona el focus.

La cosa es que al pulsar sobre un elemento de primero nivel, el segundo nivel se mantenga deplegado, lo que era el primer problema de neodani.

Es este.

Mikel.

[neodani]

Iniciado por Mikmoro

Ya he conseguido que este menú funcione como quería en FF 2 y 3b5, IE6 y 7 y Opera 9.50. En Safari windows no funciona el focus.

La cosa es que al pulsar sobre un elemento de primero nivel, el segundo nivel se mantenga deplegado, lo que era el primer problema de neodani.

Es este.

Mikel.

Muy bueno Mikel, excelente

Ahora la parte de que en la siguiente página se mantenga "desplegado" el segundo nivel y marcada la opción seleccionada, se debe hacer como el ejemplo anterior, no veo otra solución.

[Mikmoro]

Claro, porque en la siguiente página usarás una copia del menú, osea, que no será el mismo que has pulsado sino otro igual. Supongo que se podría pasar un parámetro con javascript o así, pero lo más sencillo con diferencia es modificar el menú de cada página.

Mikel.