Menús desplegables en CSS

NOTA IMPORTANTE:
Esta contrib no está suficientemente testeada.
Yo la he probado con firefox en mac y windows y no me ha dado problemas.
En explorer de windows hace lo que quiere y se desmadra todo.
Sin embargo, la he colocado en “propuesto a la publicación” para que esté accesible a más personas por si alguien quiere probarla, acabarla, o le sirve de base de trabajo para crear menús desplegables. Yo ando ahora mal de tiempo para ello.
Saludos.

Partiendo del estupendo trabajo de Patrick Griffiths y Dan Webb en alistapart he adaptado y “aligerado” su menú vertical y su menú horizontal para utilizarlos con SPIP.

Aquí tienes unos ejemplos...

Menú vertical
Menú vertical

 

Menú horizontal
Menú horizontal

Para verlo funcionar puedes ir a:
-  Menú vertical
-  Menú horizontal

Son dos menús escritos en CSS que utilizan muy poco javascript y que funcionan con bastantes navegadores.

La instalación es muy simple.

-  Se bajan y descomprimen los archivos.
-  Se colocan en la raíz del sitio.
-  Se pone un <INCLURE(menuv.php)> o <INCLURE(menuh.php)> donde queramos que aparezcan
-  Hecho.

Para personalizar se modifica el archivo css correspondiente (menuv.css o menuh.css)

El vertical es bastante fácil de modificar, pero el horizontal presenta problemas ya que son anchos fijos lo que no permite una “automatización” del mismo. Cada vez que queramos añadir o quitar secciones tendremos que modificarlo de nuevo “a mano”.

El horizontal de muestra lo he dejado en cinco secciones en el primer nivel y un ancho máximo de 760 píxels.

En el horizontal he utilizado el criterio {id_rubrique IN 25,13,2,3,36} para seleccionar que secciones quiero que aparezcan. Esto sólo funcionará a partir de la 1.8 (me parece). En versiones anteriores tendías que utilizar {id_rubrique=25|13|2|3|36}

Por lo demás, se pueden añadir “líneas” “estáticas” si se quiere.

updated on 29 March 2006

Discussion

3 discussions

  • rey este menu no funciona gracias por tu intencion

    Reply to this message

  • 1

    Amigazo, buena la intención, pero no funciona como es debido en IE 6.0

    Cuando se postean este tipo de soluciones se deben incluir los hacks asi el menu será accesible y no se confunde al usuario novel.

    Saludos cordiales

    Miguel Flores

    Pixelperu.Net

    • Gracias por el comentario.

      Pero como aviso al principio esto no está acabado y lo propongo por si alguien quiere testearlo y pulirlo. Yo ando mal de tiempo para ello y pienso que el trabajo colectivo está bien. Así que si te animas, todo tuyo.

      Un saludo

    Reply to this message

  • 1

    la verdad no le entendi

    Reply to this message

Comment on this article

Who are you?
  • [Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom