Sencillo menú desplegable | Oloblogger Vamos a explicar como hacer un menú en el que, con una sola línea, podemos tener una gran cantidad de enlaces. O L O S I T I O S Cosicas Ol...

3 de diciembre de 2007

Sencillo menú desplegable

Vamos a explicar como hacer un menú en el que, con una sola línea, podemos tener una gran cantidad de enlaces.


Para construir uno como éste, tenemos que incorporar un nuevo Elemento HTML en el lugar de la página dónde queramos colocarlo.

El código es el siguiente:

<div align="center">
<form>
<select name="urldestino"><option>O L O S I T I O S</option><option value="http://oloman-cosicas.blogspot.com">Cosicas</option><option value="http://oloblogger.blogspot.com">Oloblogger</option><option value="http://olografias.blogspot.com">Olografias</option><option value="http://olojuegos.blogspot.com">Olojuegos</option></select><input onclick="location.href=this.form.urldestino.value;" type="button" value="IR" name="button"></form>
</div>


La palabra O L O S I T I O S, se cambiará por cualquier otra que queramos poner como título: ---M E N U---, ESCOJA OPCION, MIS BLOGS,... en fin, la que nos parezca más oportuna.

Pondremos tantas líneas
<option value="http://oloman-cosicas.blogspot.com">Cosicas</option>
como opciones necesitemos. En cada una hay que sustituir la dirección URL por aquella que queremos enlazar ("http://oloman-cosicas.blogspot.com") e indicar el nombre del enlace ("Cosicas").

¿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

35 comentarios :

  1. ya van dos ayudas publicadas correctamente, gracias oloman

    ResponderEliminar
  2. esta es de las q me gustan jeje gracias oloman.
    te propongo un deasafio,aunq creo q en un blog es imposible.
    en muchas paginas,antes de entrar te encuentras una imagen o pre-pagina de presentacion con tan solo una foto,logo o simplemente una bienvenida.
    esto es algo q desde q inicie mi blog siempre he hechado de menos,y como oloman me lo arregla todo,todo y todo(como decia el anuncio...)
    vamos, q gracias de nuevo por la gran ayuda de tu blog.

    ResponderEliminar
  3. Lo tengo (casi) solucionado antes incluso de que me lo preguntaras, porque me has pillado a mitad de desarrollar una idea que requiere algo parecido.
    ¿Quieres saber Cuándo es Semana Santa?
    ¿Algo así?
    Je,je...

    ResponderEliminar
  4. hola oloman
    me podrias decir como es el codigo html EXACTO
    para poder tener este menu desplegable
    en mi blog WWW.videobytefilm.blogspot.com
    ,tengo una coleccion de videos con estas entradas CON ESTAS ETIQUETAS: BODAS, 15 AÑOS,ETC ETC
    Y DONDE INSERTO ESTE CODIGO
    y tambien en lugar de un video por linea , me gustaria ,mostrar de videos por lineas en cada seccion , se puede?

    GRACIAS POR TU AYUDA
    saludos
    af
    vbyte@hotmail.com
    hace tiempo que quiero hacer esto , pero mi ignorancia sobre el tema me lo impide

    ResponderEliminar
  5. Buenas Videobyte.

    En tu caso, el código EXACTO :) es este

    <div align="center"><form><select name="urldestino"><option selected="selected">V I D E O S</option><option value="http://videobytefilm.blogspot.com/2008/08/mis-15-en-el-club-hipico-de-nuez.html">FIESTA DE 15</option><option value="http://videobytefilm.blogspot.com/2008/08/cumpleaos-infantiles.html">INFANTILES</option><option value="http://videobytefilm.blogspot.com/2008/08/bodas.html">BODAS</option><option value="http://videobytefilm.blogspot.com/2008/08/aniversarios-y-cumpleaos-adultos.html">ANIVERSARIOS</option>
    ... (AQUI HAY QUE SEGUIR PONIENDO EL RESTO DE ENLACES QUE NECESITAS, AÑADIENDO ETIQUETAS <OPTION> SEGUN SE HA HECHO CON LAS ANTERIORES)

    </select><input value="IR" name="button" onclick="location=this.form.urldestino.value" type="button"></form></div>

    Tienes que ponerlo como un NUEVO ELEMENTE HTML desde el menú ELEMENTOS DE PAGINA. Seguramente en lugar de las etiquetas que tienes actualmente.

    Y no, no puedes poner varios por línea con este sistema. Prueba con este otro menú, pero te advierto que es más complicado que el que se muestra en esta entrada.

    ResponderEliminar
  6. exelente oloman, es la forma mas facil que he vistio de hacer el menu desplegable

    ResponderEliminar
  7. hE HECHO TODO LO QUE PONES AQUI, PERO COMO SOY MUY TORPE COMO DICE TU SECCIÓN A MI ME APARECE, SE ME DESPLIEGA PERO NO ME VA A NINGÚN ENLACE DE LOS QUE TENGO PUESTOS ¿POR QUÉ?

    ResponderEliminar
  8. Si me pudieras ayudar te lo agradecería
    Esmorga75@gmail.com

    ResponderEliminar
  9. Noemí, repasa el código que pusiste porque he visto que te saltaste el OPTION SELECTED, además de tener otros errores de tecleo. Copia y pega el código que se da de muestra y luego sustituye las direcciones y las palabras de enlace por las tuyas.

    Si sigues teniendo problemas, dímelo y te lo redacto entero, aunque si lo intentas tú, lo aprenderás para siempre.

    Un saludo,

    ResponderEliminar
  10. Bueno, muchas gracias...., Ya se ve que el que sabe...pues sabe...
    Y yo soy un poquito negada que le vamos a hacer.
    En fin que ya sale bien la cosa.
    Muchas gracias por tu ayuda.
    Por cierto tu blog es fantástico.

    ResponderEliminar
  11. HOLA ME HA ENCANTADO TU BLOG.
    YO TENGO UNO www.alquilerdeyates.net COMO VERAS HAY UN LISTADO QUE CADA VEZ OCUPA MAS SITIO
    COMO PUEDO CREAR UN LISTADO DESPLEGABLE COMO EL QUE TIENE EN TU SIDEBAR , COMO POR EJEMPLO EL DE "DONDE ESTAMOS"

    ResponderEliminar
  12. MUCHAS GRACIAS POR RESPONDER AUNQUE LA VERDAD ES QUE SE ME ESCAPA UN POCO. NO HAY ALGUNO MAS SENCILLO DE HACER Y QUE RESPETE LO QUE TENGO EN LA ACTUALIDAD :
    LAS VERAS EN WWW.ALQUILERDEYATES.NET
    PARA NO TENER QUE MODIFICAR 200 LINEAS ??

    MUCHAS GRACIAS POR TU PACIENCIA

    AUNQUE NO SE SI PODRIAS HACERLO TU COBRANDOME??

    ResponderEliminar
  13. QUE ME COBRARIAS POR HACERLO TU ??

    ResponderEliminar
  14. Je, je. BarcosdeBarcelona, no cobro nada por ayudar, pero no mantengo páginas web. Quizás tengas que recurrir a un profesional.

    En un principio, lo ideal sería mostrar una nube de etiquetas para que desde ahí se pudiera entrar a la elección de tus lectores.

    El principal problema es que Blogger no permite dos clasificaciones para las etiquetas y eso es lo que tú tienes: unas para la eslora y otras para la zona de navegación. Por tanto no puedes automatizar un menú que comprenda ambas etiquetas por separado. Evidentemente, si puedes hacer uno que incluya los dos, aunque no por el orden que tu seguramente quieres (eslora).

    Creo que lo más fácil para solucionar tu problema sería poner cuatro apartados:

    1. Un buscador interno Google, tal y como ves en este blog. Eso serviría para cualquier tipo de búsqueda (eslora, zona, nombre...)
    http://oloblogger.blogspot.com/2008/05/nuevo-artilugio-buscador.html

    2. Un menú con las esloras. Ya no serían 200 enlaces a mano, sino sólo 4, mediante el cual se podría acceder por el tamaño deseado.
    http://oloblogger.blogspot.com/2007/12/sencillo-men-desplegable.html

    3. Un Archivo del Blog. Cómo los buques coinciden con el título de cada post, en él te saldrían todos ellos, aunque ordenados por fecha de publicación.
    http://oloblogger.blogspot.com/2008/03/todas-tus-entradas-archivo-del-blog.html

    4. Una nube de etiquetas, en las que te saldrían automáticamente las zonas de navegación. Eso sí, tal y como lo tienes estructurado, también te saldrían las etiquetas de eslora.
    http://oloblogger.blogspot.com/2009/03/blogumus-para-cualquier-tipo-de-enlace.html

    Con esos cuatro gadgets, muy fáciles de crear, creo que cualquiera encontraría en tu web lo que necesita.

    ResponderEliminar
  15. hola Oloman!
    Me gusta esta aplicacion, solo quiciera saber como se le puede dar otra presentacion como la que tienes el la seccion de \ciber-cafe, claro pudiendo cambiar el fondo , ademas como consigues que aparezcan ese sombreado blanco al poner el mouse sobre ciber-cafe ,me gusta!
    Mil gracias, te vas a ir al cielo!
    karla.

    ResponderEliminar
  16. Son dos trucos en uno Karla. El de desplegar lo puedes hacer de dos maneras:
    1. Más fácil: http://oloblogger.blogspot.com/2008/02/elementos-que-aparecen.html
    2. Algo menos fácil:http://oloblogger.blogspot.com/2008/05/desplegar-partes-del-blog.html

    Con respecto al efecto al pasar el puntero por encima de un enlace (o botón), se llama ROLLOVER y aquí se explica:
    http://oloblogger.blogspot.com/2008/09/botones-en-movimiento-rollover.html

    ResponderEliminar
  17. Esta bueno muchisimas gracias, de paso impresionante el estilo de tu blog muy bonito

    ResponderEliminar
  18. Hola!

    Genial la explicación, y muy sencillo de aplicar el código.

    Me encanta este blog, siempre resuelve mis dudillas de principiante en esto de blogger... xD
    Te has ganado un sitio en mi blog :D

    Saludos!

    ResponderEliminar
  19. Me gustaria saber como puedo hacer para que las etiquetas salgan con sombreado.. me gustaria cambiarle el color de texto y ponerle un sombreado.
    mi blog es http://sleepinginthe-nothing.blogspot.com/ recien estoy empezando.. si alguien puede ayudarme :)

    ResponderEliminar
  20. ¿Qué etiquetas, Cristian? Si son las de las categorías de los posts, echa un vistazo aquí. Luego cambia los parámetros a los que te gusten.

    ResponderEliminar
  21. WOOOOOOOW! Quede impresionado, es el blog mejor elaborado que he visto en mi vida xD

    Esta super bien

    Felicidadess!!!

    ResponderEliminar
  22. Muy mejorable. Es muy mejorable. Para algunos, incluso es absolutamente "reconstruible"... pero gracias.

    ResponderEliminar
  23. Quisiera Hacer Un Menú Como El Que Estas Explicando Acá En Esta Entrada, Pero Quiero Cambiarlo. Mira Quiero Hacerlo Sin El Botón Ir Y Que Cuando Seleccionen Un Nombre Salga Una Imagen En La Misma Ventana Sin Re Direccionar A Nada Solo Que Salga Una Imagen En La Parte Inferior.

    ResponderEliminar
  24. Momonmonky, eso es para nota :D. Esto simplemente es un formulario con un menú desplegable y funciona tal y como ves.

    Para hacer eso que dices habría que crear un script específico para eso. No sé si es la idea, pero quizás deberías buscar algún artilugio para galería de imágenes.

    Si no encuentras nada, puedes probar con este truco, haciendo las miniaturas de un tamaño más pequeño que en el ejemplo.

    ResponderEliminar
  25. No hay manera. No sé dónde poner el código. Lo he intentado en varios sitios y siempre me sale "The element type "input" must be terminated by the matching end-tag". No sé encontrar el final de las etiquetas, que és lo que me parece que dice. Como veis, de torpes hay de muchas categorias.
    Éste es mi blog: http://posatlesbotes.blogspot.com/

    Por lo que he visto todo lo que explicas és más sencillo de lo que se ve por ahí. Gracias por ayudar.
    Pondremos tu link si te parece bien.

    ResponderEliminar
  26. Alfred, no te vuelvas loco. Había un error en el código, en el enlace que llevaba el ONCLICK. Ahora puedes probar de nuevo porque ya lo he comprobado.

    ResponderEliminar
  27. me sirvio mucho gracias, pero quisiera saber kmo, al darle click al boton redireccionar a otro frame
    ¿?
    por favor

    ResponderEliminar
  28. Camilo para abrir en ventana nueva, que supongo que es a lo que te refieres, tendrías que usar window.open(URL) en lugar de location.href=URL.

    ResponderEliminar
  29. Hola Aloman.

    Mi problema es que quiero poner en cada entrada un menú desplegable, y no donde localizar el sitio para poner el código de arriba.

    Mi correo es r_ramon_16@hotmail.com

    ResponderEliminar
    Respuestas
    1. No hay un sitio especial... directamente en la entrada. Eso sí, intentando no dejar saltos de línea en el código, es decir, escribiéndolo todo seguido.

      Eliminar
  30. Acabo de descubrir tu blog y me encanta. Tengo una duda. Existe un menú desplegable utilizando páginas? Ahora tengo el menú con un gadget de hlml pero necesito poder modificar mi plantilla para que en la página principal solo aparezcan entradas de una categoría. Tienes algún post que me sirva para lo que necesito?
    Muchas gracias!

    ResponderEliminar
    Respuestas
    1. Hola Sabrina. No se si es esto lo que buscas...

      Eliminar