Menú flotante desplegable | Oloblogger El diseño de los "botones" es configurable si se te da medianamente bien el diseño (al final se explica), pero con la imagen que ...

2 de mayo de 2008

Menú flotante desplegable


El diseño de los "botones" es configurable si se te da medianamente bien el diseño (al final se explica), pero con la imagen que aquí se facilita, la cosa queda desplegada como en la imagen de arriba. Si quieres verlo en funcionamiento, aquí o en la imagen de arriba, tienes el enlace... y si te gusta, ésto es lo que tienes que hacer:

En primer lugar, hay que crear unas nuevas clases que llamaremos MENU y que recogen las distintas posibilidades de expansión del idem. Para ello, hay que copiar todo este código que sigue, justo antes de ]]></b:skin>

VER CODIGO

Una vez hecho ésto, nuestro menú se genera con con las instrucciones de listas, encerradas entre dos DIV de clase MENU

<div class="menu">

<ul> <li> ENLACE </li> <li> ENLACE </li> ... </ul>

</div>

Para las sub-opciones, simplemente anidamos una lista completa dentro de un elemento LI, tal y como se ve en el siguiente código:

<div class="menu">
<ul><li><a href="URLopcion1">Opción 1</a></li>
<li><a href="URLopcion2">Opcion 2</a></li>
<li><a href="#">Submenú</a>
<ul><li><a href="URLsubopcion1">Subopcion 1</a></li>
<li><a href="URLsubopcion2">Subopcion 2</a></li>
<li><a href="URLsubopcion3">Subopcion 3</a></li>
<li><a href="URLsubopcion4">Subopcion 4</a></li></ul></li></ul></div>

Para Blogger, lo mejor es copiarlo tal cual se muestra, porque si no, se os meterán líneas en blanco por aquí y por acullá y se os descuadrará un poco la cosa.

Evidentemente, hay que sustituir URLopcionX por la dirección del enlace a dónde quereis que lleve el botón.

La imagen que se ha usado en este código es ésta

Image Hosted by ImageShack.us

HAZLO TU MISM@: Para crear botones a vuestro gusto, sin tener que retocar el código correspondiente a la hoja de estilo, el tamaño total de la imagen tiene que ser de 150x90 pixeles y cada "botón", debe tener 30px de alto. Se recomienda formato GIF y dejar un pixel transparente arriba y otro abajo del espacio destinado a cada "botón", para que se aprecie como éstos "flotan". De esta manera, tendrán 28 pixeles.

La parte superior de la imagen será la que corresponda al botón sin pulsar; la de enmedio la del botón pulsado y la de abajo, la de un botón desplegado.

Una vez construida la imagen, la alojais (en Blogger mismo) y sustituis en el primer código facilitado (CSS), todas las referencias a
http://img353.imageshack.us/img353/5524/botonesvf9.gif
poniendo en su lugar la dirección de vuestra imagen.

Como siempre, echarle imaginación.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

23 comentarios :

  1. Bueno, comentarte me he agenciado las imagenes de los lapicitos para utilizarlas en mi blog con unas ligeras modificaciones, espero que no te importe (ya me he tomado la libertad de hacerlo por lo de ningún derecho reservado, pero en cualquier caso puedes contactar conmigo a traves de mi blog).

    Y felicitarte por tu gran trabajo, lo que he ido viendo me ha resultado muy util, creo que vendré a menudo (de hecho ya te he enlazado).

    Saludos!

    ResponderEliminar
  2. perdoname, como hago para cambiar de imagen del menu?

    ResponderEliminar
  3. Lee a partir de "HAZLO TU MISMO"

    ResponderEliminar
  4. Oloman buen día!!!, te he puesto en blog tecnológico. Bien cariño...hice los botoncitos, los alojé en blogger...no entiendo...en la sidebar qué código vá para que aparezca???, gracias

    ResponderEliminar
  5. Primero tienes que grabar el código CSS (el primero que se cita y que está oculto).

    Una vez hecho eso, tienes que construir (a mano) todo el menú con sus opciones y sub-opciones, en la forma en que se puede ver en el último cuadro de código.

    En este caso no basta con copiar y pegar, hay que currar un poco porque cada menú será diferente.

    ResponderEliminar
  6. bien me pongo a hacerlo, te digo cómo ha quedado. Sí pegué el CSS...chauuu y gracias!!!

    ResponderEliminar
  7. hola otra vez oloman, leyendo este tutorial, se me estaba ocurriendo aplicar esto al menú horizontal que tengo en mi blog, es posible hacerlo?
    Un saludo!

    ResponderEliminar
  8. Claro que sí Esther, pero mejor te recomiendo usar lo que se explica en esta otra entrada.

    ResponderEliminar
  9. ah, vale. luego pruebo a ver como me funciona.
    Gracias otra vez ;)

    ResponderEliminar
  10. Buenas de nuevo. Me ha molado esto del menu despegable y me gustaria usarlo en mi blog. El problema es que lo quiero poner en la barra horizontal, pero con unos botones que he creado yo.

    La cuestion es la siguiente ¿como hago para poner que se desplieguen hacia abajo?. Te pongo a continuacion un boton que he generado:

    No me deja poner el codigo html de mi boton

    Quiero que al pasar el puntero se abra aparte de hacer cambiar la imagen del boton como ya tengo, se genere hacia abajo los botones que yo quiera.

    No se si me explico bien, pero bueno... Gracias de antemano

    ResponderEliminar
  11. Te pongo de todas maneras mi blog para que lo veas, ya que no me deja ponerte el codigo que he generado en el boton.

    http://cutfanzine.blogspot.com/

    ResponderEliminar
  12. Chucky, el menú que aquí se explica es en formato vertical. Tú lo tienes en horizontal, por lo que no te vale.

    Prueba a ver el post sobre cómo crear fácilmente un menú. Luego elige el estilo que te cuadre y lo instalas. Por último, cambia las imágenes por tus botones.

    ResponderEliminar
  13. hOL, me gustaria saber como podria cambiar el lapiz por una guitarra...¿¿¿ gracias

    ResponderEliminar
  14. Bájate la imagen que se facilita y con un editor de imágenes y respetando las dimensiones, la modificas a tu antojo. Incluso sólo respetando las dimensiones, puedes usar los colores y formas que quieras.

    ResponderEliminar
  15. Saludos! Esto es algo parecido a lo que busco, una barra-menu flotante y estatica, asi como lo tiene el moma en la parte de abajo, tipo facebook o ese servicio de wiribuya (bueno ese ya es bastante complejo. Estoy buscando algo asi pero personalizable y com opciones de menu asi--->http://www.moma.org/
    ¿Se puede hacer así? Gracias, ójala se pueda incorporar a blogger.Saludos

    ResponderEliminar
  16. Sí se puede hacer Kasafia. Tendrías que crearte un menú al gusto con HTML y encerrarlo en un DIV con una clase (usa el nombre que quieras). Luego a esa clase, en la parte CSS se le pone la propiedad POSITION:FIXED; y un BOTTOM:0PX;

    Si no te aclaras a ver si en un par de semanas preparo un post sobre esto.

    ResponderEliminar
  17. Hola Oloman

    Ya tengo insertado este menú, aún me queda personalizarlo un poco, pero no me funciona bien del todo.
    Solo tengo un botón que se despliega y al mover el ratón hacia el panel desplegable, solo me deja pasar sobre el primer botón, si intento bajar al siguiente botón el menú se repliega otra vez.

    Ya lo borré y lo volví a insertar varias veces por si había hecho algo mal, pero nada. Donde puede estar el error?

    http://memorialmanuelsantos.blogspot.com/2010/04/iv-memorial-manuel-santos-2009.html

    Gracias, un saludo

    ResponderEliminar
  18. Bike ou non vai, creo que el problema está sólo en unos saltos de línea que hay dentro del código del menú. Cuando se redacta código en una entrada, este tiene que ir sin saltos de línea. Copié tal cual tu código y me funcionó cuando le quité dicho saltos.

    <div class="menu"><ul><li><a href="http://memorialmanuelsantos.blogspot.com/2010/04/plano-y-fotos-del-recorrido.html">PLANO Y RECORRIDO</a></li><li><a href="http://memorialmanuelsantos.blogspot.com/search/label/Fotos%20IV%20Memorial%202009">FOTOS DÍA DE LA MARCHA</a><ul><li><a href="http://memorialmanuelsantos.blogspot.com/2010/04/inscripciones-y-salida.html">Inscripciones y salida</a></li><li><a href="http://memorialmanuelsantos.blogspot.com/2010/04/en-ruta-1-parte.html">En ruta 1ª Parte</a></li><li><a href="http://memorialmanuelsantos.blogspot.com/2010/04/en-ruta-2-parte.html">En ruta 2ª Parte</a></li><li><a href="http://memorialmanuelsantos.blogspot.com/2010/04/en-ruta-3-parte.html">En ruta 3ª Parte</a></li><li><a href="http://memorialmanuelsantos.blogspot.com/2010/04/avituallamiento-en-cabo-udra.html">Avituallamiento Cabo Udra</a></li><li><a href="http://memorialmanuelsantos.blogspot.com/2010/04/llegada.html">Llegada</a></li></ul></li><li><a href="http://memorialmanuelsantos.blogspot.com/2010/04/videos.html">VÍDEOS</a></li><li><a href="http://memorialmanuelsantos.blogspot.com/2010/04/reportaje-canal-via.html">REPORTAJE CANAL VÍA</a></li><li><a href="http://memorialmanuelsantos.blogspot.com/2010/04/notas-de-prensa.html">NOTAS DE PRENSA</a></li></ul></div>

    ResponderEliminar
  19. Pues sigue sin funcionarme. Ya había pensado que podia ser cosa de los espacios, pero sigue igual. Pegué el código que pusiste y hace los mismo.

    ResponderEliminar
  20. Tiene que ser entonces algo de la plantilla que interfiere en este menú, porque como te decía el código que te pegué funcionó cuando lo puse en una entrada de un blog de pruebas. He estado echando un vistazo, pero no encuentro qué es lo que puede ser.
    Así que tienes dos opciones: o cambias la plantilla o cambias el menú... y evidentemente, lo segundo es lo más fácil. Date una vuelta por esta entrada y escoge cualquier otro. Hay varios diseños que seguro que te cuadran. A grandes males, grandes remedios.

    ResponderEliminar
  21. ok. Creo que me decidiré por la 2ª opción, es lo más lógico, jeje.
    Muchas gracias.

    ResponderEliminar
  22. Hola Oloman. Intento visualizar el código arriba y al clicar me sale mensaje que mi cuenta no tiene acceso ¿que será?

    ResponderEliminar
    Respuestas
    1. No eres tú. Es un fallo mío en la entrada, derivado del último cambio de plantilla que hice. Seguro que hay más errores similares en otros posts. Ya lo he arreglado.

      Eliminar