Foros del Web » Creando para Internet » CSS »

Menu concreto... horizontal

Estas en el tema de Menu concreto... horizontal en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 13/06/2008, 11:06
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 10 años, 9 meses
Puntos: 20
Menu concreto... horizontal

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!
  #2 (permalink)  
Antiguo 13/06/2008, 11:28
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: Menu concreto... horizontal

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!
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #3 (permalink)  
Antiguo 13/06/2008, 12:31
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 10 años, 9 meses
Puntos: 20
Respuesta: Menu concreto... horizontal

Cita:
Iniciado por daPhyre Ver Mensaje
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
  #4 (permalink)  
Antiguo 13/06/2008, 13:08
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: Menu concreto... horizontal

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!
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #5 (permalink)  
Antiguo 13/06/2008, 16:33
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Menu concreto... horizontal

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.
  #6 (permalink)  
Antiguo 15/06/2008, 16:25
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 10 años, 9 meses
Puntos: 20
Respuesta: Menu concreto... horizontal

Cita:
Iniciado por Mikmoro Ver Mensaje
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!
  #7 (permalink)  
Antiguo 15/06/2008, 16:43
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Menu concreto... horizontal

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.
  #8 (permalink)  
Antiguo 15/06/2008, 17:18
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 10 años, 9 meses
Puntos: 20
Respuesta: Menu concreto... horizontal

Cita:
Iniciado por Mikmoro Ver Mensaje
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!
  #9 (permalink)  
Antiguo 15/06/2008, 18:33
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Menu concreto... horizontal

Cita:
Iniciado por neodani Ver Mensaje
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.
  #10 (permalink)  
Antiguo 16/06/2008, 00:57
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 10 años, 9 meses
Puntos: 20
Respuesta: Menu concreto... horizontal

Cita:
Iniciado por Mikmoro Ver Mensaje
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
  #11 (permalink)  
Antiguo 16/06/2008, 02:56
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Menu concreto... horizontal

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.
  #12 (permalink)  
Antiguo 16/06/2008, 06:52
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Menu concreto... horizontal

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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #13 (permalink)  
Antiguo 16/06/2008, 07:50
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Menu concreto... horizontal

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.

Última edición por Mikmoro; 16/06/2008 a las 08:56
  #14 (permalink)  
Antiguo 16/06/2008, 09:46
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 10 años, 9 meses
Puntos: 20
Respuesta: Menu concreto... horizontal

Cita:
Iniciado por kseso? Ver Mensaje
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....
  #15 (permalink)  
Antiguo 16/06/2008, 11:40
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 10 años, 9 meses
Puntos: 20
Respuesta: Menu concreto... horizontal

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
  #16 (permalink)  
Antiguo 16/06/2008, 12:02
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Menu concreto... horizontal

Cita:
Iniciado por neodani Ver Mensaje
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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #17 (permalink)  
Antiguo 16/06/2008, 12:24
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 10 años, 9 meses
Puntos: 20
Respuesta: Menu concreto... horizontal

Cita:
Iniciado por kseso? Ver Mensaje
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.
  #18 (permalink)  
Antiguo 16/06/2008, 12:41
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Menu concreto... horizontal

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.
  #19 (permalink)  
Antiguo 16/06/2008, 13:24
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Menu concreto... horizontal

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.
  #20 (permalink)  
Antiguo 16/06/2008, 15:00
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 10 años, 9 meses
Puntos: 20
Respuesta: Menu concreto... horizontal

Cita:
Iniciado por Mikmoro Ver Mensaje
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.
  #21 (permalink)  
Antiguo 16/06/2008, 16:18
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Menu concreto... horizontal

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.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 14:58.