Menú desplegable con color
Aunque hace tiempo que publiqué como hacer un menú desplegable para incluir enlaces, se me ha ocurrido gracias a un comentario de Friol que podría hacer esta entrada para explicar un poco como personalizar este tipo de menús.
[1] Menú desplegable sencillo.
Colocamos este código en un gadget HTMLJavascript:
<select onchange="if(options[selectedIndex].value){location = options[selectedIndex].value}" class="combobox" name="SiteMap" size="1">
<option selected/>TITULO
<option value="URL DE LA PAGINA"/>TITULO DE LA PAGINA
<option value="URL DE LA PAGINA"/>TITULO DE LA PAGINA
<option value="URL DE LA PAGINA"/>TITULO DE LA PAGINA
<option value="URL DE LA PAGINA"/>TITULO DE LA PAGINA
<option value="URL DE LA PAGINA"/>TITULO DE LA PAGINA
<option value="URL DE LA PAGINA"/>TITULO DE LA PAGINA
</select>
Y este sería el resultado:
[2] Menú desplegable con opción "Ir".
Colocamos este código en un gadget HTMLJavascript:
<script language="JavaScript">
function Ir_amigos(form) {var myindex=form.dest.selectedIndex
window.open(form.dest.options[myindex].value, target="_parent", "toolbar=yes,scrollbars=yes,location=yes"); }
</script>
<form name="mis_enlaces">
<select name="dest" class="combobox" SIZE=1>
<option class="amarillo" selected value="">BLOGS AMIGOS
<option class="rojo" value="URL DE LA PAGINA">LINK1
<option class="azul" value="URL DE LA PAGINA">LINK2
<option class="verde" value="URL DE LA PAGINA">LINK3
</select><input type="button" value="Ir" onClick="Ir_amigos(this.form)">
</form>
Y este sería el resultado:
[3] Menú desplegable con enlaces que abren en "página nueva".
Colocamos este código en un gadget HTMLJavascript:
<script language="JavaScript">
<!--
function sitios_enlaces(form) {
var myindex=form.destino.selectedIndex
window.open(form.destino.options[myindex].value,"main",""); }
//-->
</script>
<form name="miForma">
<select name="destino" size=1>
<option selected value=""> MIS FAVORITOS
<option value="URL DE LA PAGINA">LINK1
<option value="URL DE LA PAGINA">LINK2
<option value="URL DE LA PAGINA">LINK3
<option value="URL DE LA PAGINA">LINK4
<option value="URL DE LA PAGINA">LINK5
</select><input type="button" class="boton" value="Ir" onClick="sitios_enlaces(this.form)">
</form>
Y este sería el resultado:
Como veis los tres menús son sencillos de instalar y con distintas opciones según sean nuestras necesidades.
Supongo que os habréis fijado en que he destacado en negrita alguna parte de su código, en concreto son unas "clases" añadidas en cada menú para darles color mediante CSS.
En el primer menú, la clase añadida (class="combobox") controlará tanto la "cajita" como los enlaces una vez desplegados.
Si añadimos algo como esto en el CSS de nuestra plantilla (antes de ]]></b:skin>) "ordenamos" al menú que tenga un color de fondo y que su texto sea de color blanco:
.combobox {
background-color: #009900;
color: #ffffff;
}
El resultado sería este:
En el segundo menú, he mantenido la clase class="combobox" pero además he añadido una clase distinta a cada enlace, así que si añadimos algo como esto en el CSS de la plantilla, cada enlace del menú se mostrará de distinto color:
.azul {
background-color: #0000FF;
color: #ffffff;
}
.rojo {
background-color: #FF0000;
color: #ffffff;
}
.verde {
background-color: #009900;
color: #ffffff;
}
.amarillo{
background-color: #FFFF00;
color: #000000;
}
El resultado sería este:
En el tercer menú, lo que he hecho ha sido añadir una clase al botón imput (class="boton"), así que colocando estas líneas en el CSS, tendríamos un botón con el texto en negrita y de color amarillo, de fondo rojo y con un borde de color gris:
.boton {
color:yellow;
background-color:red;
font-weight: bold;
border: 2px solid #ddd;
}
Resultado:
Vitua Radio
Foro SpamLoco
Seguir el Escaparate
68 comentarios:
Como siempre Rosa, tu ayuda es buenísima. Gracias por tu ayuda. :)
Hola Rosa, en mi blog tienes un premio para ti (2 en realidad), pasa a recogerlo cuando quieras.
Tu blog me ha ayudado muchisimo a hacer el mio, eres una maquina :-P. Muchas gracias.
Un saludo
Rosa muchas gracias por toda la ayuda que me has brindado...
Queria pedirte un par de favores, uno era si me podias aconsejar alguna plantilla que tenga 3 columna( la centra d noticias y 2 laterales de gadgets) Porq xq mas q intento hacer o modificar una nunca me sale y se me descuadra... y lo otra pregunta q te tengo q es aveces pongo plantillas y se ven bien pero cuando le agrego algo minimo se borran los fondos o cosas asi por el estilo... me gustaria que me respondieras a luislara89@hotmail.com por favor...
Mi blog es www.estilourbano.org
Gracias
Algo asi me hacia falta. Gracias
Muchisimas gracias por tus posts que son de gran interés para todos nosotros. Es increiblke la cantidad que tienes para poder modificar las plantillas a nuestro gusto.
Sigo estando en la modificación de mi espacio, todavía no lo tengo claro, así que cuando crea que lo tengo medianamente acabado (aunque falten algunas cosillas) te lo digo para que me des tu opinión.+
Repito MUCHAS GRACIAS
Un truco muy bueno y lindo Rosa! :D la verdad es que decorar estos menús es divertido así son más lindos :-)
Hola Rosa, me encanta tu blog, gracias a ti fui cambiando el mio mira el resultado : Texto enlace
Estoy muy agradecida contigo, pero tengo una duda en la que tal ves tu me puedas ayudar, encontre en este blog : http://tejiendoenlavida.blogspot.com/ unas barras de progreso, en las que te dice en que proyectos estas y como va el avanze por decir tejido de cartera 40 % , no se si tu sabes como hacerlas y me podrias ayudar a ponerlas en mi blog me serian de mucha utilidad
Un beso desde Bolivia
maite
maite525@gmail.com
Muuuuuuuy bueno Rosa, como todo lo que pones obviamente. Ya me estoy poniendo a hacer esto, que es justo lo que quería para mi blog ya que con tantos widgets mi sidebar esta kilométrica.
Un abrazo.
Hola Rosi, los enlaces de colores se ven mas entretenidos así :) y el botón ir a es muy cómodo :)
Por cierto, no te había dicho que la abejita es genial se puso a volar sobre las hormigas ;)
Un abrazo y muchos besotes ronroneados :)
pd: el sábado estuve de cumple, así que imagina que comiste conmigo un rico trozo de torta de trufa :)
Hola Rosa, buen truco ;)
¿Los "contenidos del Escaparate" estan desde hace mucho o los hiciste hace poco?
Uff! Terminé amiga Rosa. Usé el 1 y el 3 con unas pequeñas modificaciones, todas en el mismo elemento html. Alineé uno al centro pero quiero alinear los otros a la derecha, ¿me das una manita? ¿cómo le hago?
Gracias.
MAITE, no es demasiado complicado de hacer, pero no es automático, es decir, cuando una labor o lo que sea avance, por ejemplo, esté en el 50% y quieras que se vea al 70%, tienes que cambiarlo tu "a mano" en el código.
Las barras simplemente son una imagen gif que se va "estirando" cuando tu lo indicas así en el código.
En el css de la plantilla, antes de ]]></b:skin> tienes que colocar esto:
.progressbar {
height: 20px;
display: block;
}
.progressbarback {
border: 1px solid #000;
background: transparent;
height: 20px;
width: 100px;
}
Luego el código va en un gadget HTML así:
<ul>
<li>Progreso de Sara :: 100%</li>
<li> <div class="progressbarback"><img alt="pg" src="http://img14.imageshack.us/img14/7604/barrama0.jpg" class="progressbar" width="100"></div></li>
</ul>
<ul>
<li>Progreso de mi manta de encuadradas 2008 :: 50%</li>
<li> <div class="progressbarback"><img alt="pg" src="http://img14.imageshack.us/img14/7604/barrama0.jpg" class="progressbar" width="50"></div></li>
</ul>
<ul>
<li>Progreso de manta zig zag :: 100%</li>
<li> <div class="progressbarback"><img alt="pg" src="http://img14.imageshack.us/img14/7604/barrama0.jpg" class="progressbar" width="100"></div></li>
</ul>
La imagen es la misma en los tres casos, la he subido a ImageShack, si quieres subela tu a el alojamiento que suelas usar.
Cambias el texto por el que vayas a poner. Cuando quieras que una de las barras avance tienes que cambiar el width, por ejemplo una labor al 50% pues pones width="50" ...
Yo te lo he dejado tal como lo he "tomado prestado" ;) de ese blog, menos la imágen claro, que la he subido a ImageShack para no "robarle" ancho de banda a esa chica.
Σ=o) Pau , me mató lo de la tarta de trufa...ainsss ¡que rica!!:D graciass!
Jaime Trujillo Escobedo , gracias!
Te incluí entre mis "Blogs de Ayuda" no lo había hecho antes, porque me gusta esperar y comprobar si el blog a enlazar continua trabajando "como debe ser";) te he estado siguiendo y he comprobado que te tomas las cosas en serio...¡sigue así!:D
Hola Rosa,
Hoy te voy a hacer una consulta distinta. Cuando cierro el blog desde Explorer aparece una ventana de error que pone exactamente lo que te transcribo:
...................................
Error en el script de esta página.
Línea: 53
Carácter: 3
Error: se require un objeto.
Código: 0
URL:http://ulises3000.blogspot.com
¿Desea ejecutando scripts en esta página?
...................................
¿Cómo lo resuelvo?
Gracias anticipadas.
Rosa Saludos y un placer de contar contigo, ya había intentado todo con otros blogs pero terminaba con terribles dolores de head por que no entendía como funcionaban los códigos, con mi nuevo blog la cosa ha sido diferente, gracias a vos, :) no soy buena con eleccion de colores y demas, soy hiper lenta, pero por hoy he aprendido varias cosas expuestas en el escaparate, aunque tengo varias dudas comunes después de que tu vas ensenando.
No me gustan las letras de la cabecera, y como hiciste para ponerlas abajo (casi en la linea) y sobre la barra del menu, hice uno como dijiste pero salia vertical entonces hice una mezcla pero cuando entro a cualquiera de ellos están vacío, o dicen no hay entradas para mostrar, te cuento que no modifique la plantilla sino que en elementos de pagina agregue un gadget y allí coloque el código que explicas, y me gustaria una barra como la del escaparate por ejemplo, pero no se bajo cual entrada colocaste los detalles.
otra cosa es: cuando explicas de la url de la imagen, como logro conseguir esa url?
Diossss, perdona tantas cosas juntas, no tienes porque contestar todo, pero estoy tan feliz, de encontrar primero al escaparate, después a una talentosa mujer waooo y tercero he aprendido hacerlo ayer era imposible.
Gracias
mi blog es: viverovirtualrd.blogspot
TRECARUNGA, ¿Qué contenidos? :-|
Fabiana, creo que lo que tendrías que hacer es meter los códigos de todos los menús entre <center> y </center> más bien...
Estos: http://elescaparatederosa.blogspot.com/2007/01/contenidos-del-escaparate.html
¿Es muy difícil Rosa? Es que yo quería que el botón de "Ir" me quedara alineado.
Bueno si no hay otra...
Gracias, un abrazo.
TRECARUNGA , aún estaba trabajando en ella...:D no te pierdes un detalle ¿eh?
Fabiana, entiendo que te gustaría que todas las cajitas de los menús tuviesen el mismo ancho...
Verás, estos menús se adaptan al ancho del contenido, si el texto que pones dentro (el principal, el que se ve cuando el menú está recogido) es más largo, la cajita también lo será.
Si pones en el primero por ejemplo "MANUALIDADES" esa palabra tiene 12 letras, si en el segundo menú colocas otra palabra o frase que ocupe el mismo espacio, el menú tendrá el mismo tamaño que el primero...¿entiendes?
Mucha gente usa un pequeño truquillo, coloca el título por ejemplo así --MANUALIDADES-- y los guiones llenan el espacio necesario para el ancho que quieren lograr.
Espero haberme hecho entender... a veces es difícil explicar este tipo de cosas con claridad.
Nicolás , a mi no me sale nada de eso con IExplorer7...es más, fíjate que el Escaparate en IE marca dos o tres errores (a lo que no hago ni caso) y Ulises no me marca ninguno...
El IE es que es una caquilla (con perdón) y en cuanto usas un script, un código para embeber algún slide o cosa parecida, ya se lía a lanzar errores...
¡Claro como el agua Rosa! :D
Es que yo trataba de que quedara adaptado al contenido :$ jiji, ahora sí entendí por qué.
Fabiana, se me olvidaba...la cajita de archivos la tienes incluida entre <center> y </center> si quitas esas etiquetas, se alineará con los otros menús, o al revés, si se las añades a los otros se alinearan con los archivos.
Ja ja, pasa que estoy constantemente viendo las entradas de tu blog y me tope con esa que nunca habia visto :)
Carol, las letras de mi título son una imagen no un texto. Está colocada en el header usando el gadget "Header" de la página de Diseño del panel del blog.
El menú del Escaparate puedes verlo en esta entrada (aunque el mio está ligeramente modificado):
http://elescaparatederosa.blogspot.com/2008/04/menu-con-imagenes.html
El menú, una vez colocado, para que encuentre algo, lo que tu quieras, hay que añadirle los enlaces en su código, donde dice <a herf=" ahí hay que colocar la url (dirección) con la que enlazará el menú.
La url de la imagen se consigue subiendo la imagen a algún alojamiento de Internet. Revisa estas entradas sobre el tema:
http://elescaparatederosa.blogspot.com/2008/10/usando-la-url-correcta-en-imageshack.html
http://elescaparatederosa.blogspot.com/2009/02/alojar-imagenes-en-blogger.html
:P Rosi bellísimos han quedado!!!, pude poner lo de LOS TOP COMENTARISTAS, sin problemas...muackkk
Hola Rosa, en un post te lo habia preguntado, pero telo vuelvo apreguntar, ¿estamos remodelando? ;)
Hola Rosa!
Tengo una duda... Ya puse los botones de mostrar y ocultar, y funcionan de maravilla. Pero que tengo que hacer para que abran con un efecto mas sutil?
Me explico...He visto en algunos blogs que los elementos se expanden y contraen con un efecto como "glide" o de "fade in". Eso me encanta! Pero no tengo la mas minima idea de como hacer eso! :O Se puede adaptar ese efecto para los menu desplegables, los botones imput, y otros?? Como lo hago? Puedes instruirme??
:D Gracias!!
~~Jessica
Rosa!!!!!!!! mil gracias por incluirme en tu lista!! que alegría!!!!! me encanta estar en tu maravilloso Escaparate :) un enorme Abrazo!!!!!!!!!!!!!!!!! :D :D
:P Rosa, GRACIAS me has hecho muy feliz, solo que ahora estoy :O, no me he parado de la pc, pero lo he logrado poco a poco con tu escaparate.
Pero como esto se convierte en un vicio y a medida que logramos algo queremos otra cosa y asi, jajaja, y por supuesto que he tratado de hacerlo antes de molestarte porque se que son muchas las preguntas para ti, pero es que burro viejo no aprende rápido, jejje. quisiera saber por favor, como puedo hacer para que... (Oh Dios mio no se como explicarte! :(
Lo siento si encuentro una idea para explicarte te aviso.
Saludos y Gracias otra vez.
TRECARUNGA , pues no. Solo algún cambio menor:D
Pero son cambios de todo forma ¿no? Está bueno cambiar un poco auque sean cambios menores ;)
Jessica , para eso tendrías que usar algún tipo de "librería" que se llama, como Jquery por ejemplo...no tengo demasiada experiencia en el uso de esas librerías, las conozco y las he probado en algunas cosillas pero nada más...
Pizcos de Pizcos Blog y Olobloggerpodrían ayudarte en esto seguro, han publicado varias cosas sobre el tema.
Si quieres decir que vas de mi parte, ningún problema:D
Hola rosa sólo me pasaba para agradecerte en todo lo que me haz ayudado, te deseo suerte y que sigas así! Me encanta tu blog y espero que me sigas informando de más "trucos" o hacks como le llaman, je. Un abrazo.
Cristian, gracias cielo. ¡Eres un encanto!:D
Bueno amiga Rosa, ya quedó como me gusta :D
Muchas gracias por tu atención y tu paciencia.
Hola Rosa!
Muy bueno el tutorial,,quizás lo use...
Estoy en duda todavia!
haha
Pero en realidad vengo para pedirte ayuda ya que siempre me funcionan tus tutoriales y consejos!!!
En realidad el problema que tengo esta vez no se trata de ningún widget ni nada....
Mi problema esta vez,es la fama!!!!
Hace mucho tiempo que tengo este blog,y quería que me dieras consejos sobre que como hacer famoso mi blog para que más gente entre y mede comentarios....
Mi blog es sobre info de mi banda favorita....
PLZ necesito de tus consejos....
Como por ejemplo,que hiciste vos para hacer famoso tu blog...
Es una duda que me carcome el cerebro!haha
PLZ AYUDA!
Sos mi esperanza...
Espero tu respuesta....
BYE!
Y Rosa...por cierto...
FUISTE NOMINADA EN MI Top-Ten-Blogs de lso mejores blogs!
PEDI QUE TE VOTEN!
http://wwwjbfansargentinaclub.blogspot.com/
BYE!
Muy bueno, como siempre.
Saludos.
jesgo23
Te he dedicado un post, que lo sepas.
Gracias por todo guapa :)
http://sinolocuento.blogspot.com
Saludos Rosa, tu blog de verdad es muy bueno, no se si te acuerdes pero hace como dos post te pregunte que si me podias decir como modificar las columnas de mi blog (convertir una plantilla de 3 columnas a 2) Pero me dijiste que para poder darme un consejo necesitabas ver la plantilla, asi que aqui esta:
Aqui te dejo el enlace de mi blog de prueba en donde esta la plantilla Plantilla en Blog de Pruebas
Y aqui te dejo el lugar de donde la conseguí:
Lugar de Plantilla
Sin mas por el momento te agradecería que me respondieras aqui en los commentes.
O si es una respuesta muy larga aqui te dejo mi e-mail
melee300@gmail.com
amz_sombra@hotmail.com
Cualquiera de los dos esta bien
Madre mía!!Cada vez me gusta más este blog y por eso, Entre Fantasmas y Buffyverso que tiene mucho que agradecer a este blog, le ha otorgado un premio a este blog, ven a recogerlo en esta dirección:
http://entrefantasmasybuffyverso.blogspot.com/2009/02/entre-fantasmas-y-buffyverso-recibe-el.html
Hola Rosa: No se donde pedirte esto, así que lo pongo aquí pues va de Scripts. Desde ayer, cuando accedo a mi blog, yo o alguien me sale una publicidad de Weborama, en modo flotante. Yo no he añadido nada, y he estado mirando la plantilla y no se encontrar donde puede estar el Script. ¿Te suena de algo? ¿Hay alguna forma de ver que hace cada script para ir probandolos uno a uno?
Gracias!!
Rosa, hola otra vez :) el otro dia no pude explicarte que me interesaba, es al crear una entrada y colocarle su etiqueta y guardarla la misma se reflejara en la sidebar en la caja de las etiquetas (catalogo), por ejemplo: veo en el escaparate que en el menu de arriba al acceder a -Comentarios- te envia a search/label/comentarios... y salen todos las entradas que tienen esa etiqueta, pero no sale en la sidebar o al menos no se ve y eso es lo que me gustaria, o sea quiero un menu que al acceder a una de las pestanas salgan las entradas pero no quiero que la pestanas salgan en la sidebar o que esa caja quede interna.
Ojala, y puedas entender....
Bueno, muy agradecida contigo he aprendido un monton con tus post eres genial explicando. Por cierto si tienes un tiempecito libre me gustaria que vieras todo lo que he logrado gracias a ti. bye
Gracias, Como siempre nos das muchas buenas herramientas. Oye quisiera consultarte algo, no se si ya te lo hayan preguntado, pero, quisiera saber porqué al momento de escribir mis entradas e insertar imágenes, SIEMPRE de los SIEMPRES me la inserta al inicio de mi entrada y yo tengo que ponerla en donde quiero, y eos no es todo, también me inserta muchos espacios (retornos), tienes algún otro método para insertar imágenes?. Desde ya! muchas gracias!
Bolo, he leído la entrada en la que hablas de ello. Mira, casi todos esos contadores gratuitos tienen publicidad encubierta...¿qué por que ahora si y antes no? sencillo, sus códigos está preparados para que la publicidad solo salte una vez la web donde está instalado haya alcanzado un número X de visitas.
Carol, cualquier menú puede tener esa función, para eso lo único que tienes que hacer es colocar en el enlace del menú la url de la etiqueta que quieres...
En cuanto a mi "nube de etiquetas" puede, una vez hecha, colocarse en la sidebar o donde se necesite...
Manolo, yo siempre accedo a mi panel de Blogger desde Blogger in Draft, su editor de entradas tiene más funciones, entre otras cosas, te coloca la imagen a subir donde marques tu con el ratón.
http://draft.blogger.com/home
buen aporte graxxias softonickfull.blogspot.com
Muy bueno el post y el blog en general me encanta :D
Rosa hola, como te ha ido?
Bueno solo vine a saludarte... continuo trabajando con tu ayuda. ;)
MALINA Puedes añadir el CSS en el mismo gadget, antes o después del código del menú.
Tienes que incluir el CSS entre las etiquetas:
<style type="text/css"> y </style>
Para controlar el tamaño y la fuente sería como cuando lo haces con el color, añadiendo la clase (class) en cada enlace y colocando algo así:
.rojo{font-size: 8px;font-family: Verdana, Arial, Helvetica, sans-serif;}
hola !!!tu pagina es buenisima !!
estoy desesperada necesito ayuda!!
bueno!!
me eh creado recientemente un blogger y quiero poner unos capitulos de libros pero en modo de
un menu que al hacer ckick aparescan en otra pagina cada capitulo!!
por fa!!!
necesito tu ayuda
respondeme
please!!
gracias y perdon por las molestias!!
crepusculo Mira si esto te orienta para hacer lo que dices:
http://elescaparatederosa.blogspot.com/2009/09/como-anadir-los-enlaces-en-un-menu.html
MUCHAS GRACIAS ES JUSTO LO QUE BUSCABA !!!
ERES LO MAXIMO DE VRDAD !
ESPERO QUE SIGAS CON ESTO ERES FENOMENAL!
MIL GRACIAS!!
MUAK;:_MUAK;:_
hola rosa !!espero que me puedas ayudar en esto!!
no se como crear un link para que otra personas puedan afiliarme!!
??
por fa !!
gracias!!:D
lo puse hace rato, y me quedo peeerfecto...
pero una duda, Rosa: hay forma de cambiarle el tipo de letra y la alineación??
gracias de por si, XD!!
...Y3s5 No lo he comprobado, pero quizá controles eso añadiendo lo necesario en el CSS usando la clase como hacemos para el color de fondo y demás...
.combobox {
background-color: #009900;
color: #ffffff;
}
funciono, Rosa!!! Lo hice mil veces hasta que me harte, y justo cuando estaba por quitar el menu... vi que ponia un (;) en lugar de (:), jaja.
Mil gracias!!! Ya te enlace en "my alcoholic friends", un beso!!
...Y3s5 Ja, ja, hasta que me harte...que gracia :D
Muchas gracias Rossy, como siempre ha sido tus consejos me han resultado geniales.
Ya agregué el menú en mi blog, acá lo puedes ver http://hagoyvendo.blogspot.com/
Gracias!!!
Gracias me sirvio de mucho el post saludos ...
Hola Rosa! te queria hacer una consulta, como le puedo cambiar el color cuando pasas el cursor? ya ves que el color es azul pues lo quiero rosa se puede hacer? Gracias!
¿como puedo hacer la caja mas ancha?
muchas gracias rosa.
PONTENOVA.ES En el CSS:
.combobox {
width: 220px;
}
muchas gracias rosa, perfecto
Publicar un comentario
Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja la url del blog a revisar (no enlace).
Los comentarios están siendo moderados.
Comentar con el formulario antiguo