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ú 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.

Discussion

3 discussions

  • rey este menu no funciona gracias por tu intencion

    Répondre à ce 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

    Répondre à ce message

  • 1

    la verdad no le entendi

    Répondre à ce message

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Qui êtes-vous ?
[Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom