JMiur [E]

Agregar un menú vertical a Blogger es una tarea simple pero tiene sus bemoles.

Hay dos modelos básicos que podemos implementar, un menú standard o uno fijo. El primero, se ubicará en alguna parte de la página como cualquier otro elemento; el segundo, permanecerá fijo en su posición cuando hagamos scroll. En ambos casos, el código HTML será el mismo y lo que variará serán sus propiedades CSS.

El primer problema a resolver es determinar en que parte de la página se ubicará. A mi juicio, lo mejor es colocarlo en el bloque principal de la plantilla, inmediatamente después de:
<div id="outer-wrapper"><div id="wrap2">
esto es, incluso antes del bloque del header. De esta manera, con las propiedad margin de podemos controlar su posición exacta.

Sin embargo, hay otras posibilidades y, muchas de ellas dependerán del tipo de plantilla donde se quiera aplicar.

El código HTML genérico será algo así:
<div id="indicevertical">
<p><a href="URL_destino1"><img src="URL_imagen1"></a></p>
<p><a href="URL_destino2"><img src="URL_imagen2"></a></p>
.......
<p><a href="URL_destinoN"><img src="URL_imagenN"></a></p>
</div>
donde deberemos colocar una línea para cada imagen y, por supuesto, colocar las direcciones URL de destino de cada item y de cada imagen.

Para crear un menú standard las propiedades CSS elementales serían estas:
#indicevertical { /* el bloque del menú */
position:absolute;
/* un valor negativo superior o igual al ancho de las imágenes */
margin-left: valorpx;
/* un valor positivo superior o igual al alto del header */
margin-top:valorpx;
}

#indicevertical p { /* cada item */
margin: valorpx; /* distancia entre las imágenes */
padding: 0;
}

#indicevertical a img { /* los vínculos son imágenes */
border: none;
[... otras propiedades iniciales si las requiere ...]
}

#indicevertical a:hover img { /* efecto cuando se coloca el cursor del ratón encima */
[... otras propiedades si se utilizan efectos ...]
}

modelo 1modelo 2modelo 3modelo 4


La diferencia entre ellos son las propiedades que les damos a los vínculos las que producen efectos diferentes al pasar el cursor del ratón sobre ellas:

CSS modelo 1
#indicevertical a img {
opacity: 1; -moz-opacity: 1; filter:alpha(Opacity=100);
width: 32px;
}

#indicevertical a:hover img {
opacity : 0.7; -moz-opacity: 0.7; filter:alpha(Opacity=70);
position: relative;
top: 0px;
left: 5px;
}
CSS modelo 2
#indicevertical a img {
opacity: 1; -moz-opacity: 1; filter:alpha(Opacity=100);
}

#indicevertical a:hover img {
opacity: 0.7; -moz-opacity: 0.7; filter:alpha(Opacity=70);
}
CSS modelo 3
#indicevertical a img {
opacity: 1; -moz-opacity: 1; filter:alpha(Opacity=100);
width: 32px;
}

#indicevertical a:hover img {
opacity: 0.7; -moz-opacity: 0.7; filter:alpha(Opacity=70);
position: relative;
top: 0px;
left: 8px;
width: 48px;
}
CSS modelo 4
#indicevertical a img {
opacity: 1; -moz-opacity: 1; filter:alpha(Opacity=100);
width: 32px;
}

#indicevertical a:hover img {
opacity: 0.7; -moz-opacity: 0.7; filter:alpha(Opacity=70);
width: 48px;
position: relative;
top: 4px;
left: 14px;
}
Hacer que un elemento quede fijo y no se desplace cuando hacemos scroll se resuelve dándole a la propiedad position el valor fixed. Pero, hay un inconveniente, Internet Explorer (excepto la versión 7) no soporta este valor y, por lo tanto, no funciona.

Una posible solución al problema la encontré en un artículo publicado en Monki y en algún post posterior me dedicaré a analizarla con más detalles. Por ahora, me limitaré a utilizarla sin demasiadas explicaciones.

El código CSS sería algo así:
#indicevertical { /* el bloque del menú */
position:fixed; /* la propiedad para cualquier navegador */
/* un valor negativo superior o igual al ancho de las imágenes */
margin-left: valorpx;
/* un valor positivo superior o igual al alto del header */
margin-top:valorpx;
}

#indicevertical p { /* cada item */
margin: valorpx; /* distancia entre las imágenes */
padding: 0;
}

#indicevertical a img { /* los vínculos son imágenes */
border: none;
[... otras propiedades iniciales si las requiere ...]
}

#indicevertical a:hover img { /* efecto cuando se coloca el cursor del ratón encima */
[... otras propiedades si se utilizan efectos ...]
}

/* este es el hack a utilizar para IE 6 o inferior */
* html #indicevertical {
position: absolute;
top: 0px;
top: expression( 0 + (ignorar = document.documentElement.scrollTop
? document.documentElement.scrollTop
: document.body.scrollTop) + 'px' );
}
donde top: expression ....... : document.body.scrollTop) + 'px' ); debe ir en una sola línea.

40 comentarios:

Darwin  

Es genial!!!. Soy novato en el mundillo HTML o CSS pero sin duda alguna un menú así quedaría chévere en cualquier web o blog.

Buen trabajo!!!

Responder
JMiur  

Gracias, Darwin. Si no lo tiene, te recomiendo que crees un blog de pruebas donde puedas experimentar.

Responder
ICARO NOCTURNO  

Gracias por el código,era algo que estaba buscando como implementar, voy a probar,espero que resulte...
Viene como anillo al dedo

Responder
JMiur  

En Firefox es bastante simple de implementar pero en IE las cosas son complicadas. Aún no estoy muy convenido del tema, espero que consigas algo hacer algo interesante :)

Responder
Quique  

Hola! Yo he podido meter un menu CCS vertical desplegable en un unico elemento y sin problemas... bueno, solo los tipicos problemas que ocasionan las incompatibilidades explorer/firefox, vamos lo de siempre!
Aqui lo tienes por si quieres echar un vistazo: http://www.viajablog.com

Responder
JMiur  

Buen trabajo, Quique y muy buen blog :)

Responder
PoloShaggy  

Buenas tardes, después de mucho mirar en tú página, he encontrado cosas muy interesantes para poner en le mía, sobre todo el menú
Dejaré un enlace de tu página en la mía, para agradecer la ayuda.

Mi página es http://poloshaggy.bloggspot.com

Responder
JMiur  

Gracias, Polo, muy agradecido :)

Responder
precio  

hola! no entendi nada.. pero debe ser bueno! (vale aclarar que soy un cuadrado para esto, NO es porq no sepas explicar) saludos!

Responder
JMiur  

Lo menues verticales son complejos de armar así que, no te preocupes :D

Responder
SHARCK_BLOODER  

Hola, espero que puedas leer esto, no se en que parte puede ir, pero como lei lo que nesesito en este post, lo pongo aca, bueno lo que "saque" de aca fue lo de la position:fixed , lo que nesesito es que al ponerla en un elemento que este arriba del titulo este no se intercale con el titulo, cuando lo pondo como que se baja y se queda ensima del titulo, buenoo esto no lo encontre por ningun lado y como vos sabes una banda creo que me podes ayudar, grasias de antemano, tu blog esta exelnte.

PD: Por si queres ver el html de mi blog te dejo la dirección: http://algoquenoteniasmusica.blogspot.com

Responder
JMiur  

Lo que veo en tu sitio son menús hechos con Flash; tendrías que explicarme un poco más.

Responder
Diego Linares  

Hola JMiur me gustaria saber como hago para poner un menu superior en mi blog como el tuyo. Solo ocupo inicio, intro y obras. a ver si me das una mano!!! Gracias

Responder
JMiur  

Diego, el menú que utilizo, está explicado en ESTE POST.

Responder
SHARCK_BLOODER  

bueno , espero ser claro, creo que hs notado que hay un reproductor (bastante bueno si tienes wmp 11), bueno al aplicarle a este elemento la propiedad position:fixed se pocisiona arriba del titulo (la imagen que tengo de titulo), mi problema es basicamente ese. Se me ocurrio aplicarle la propiedad margin o padding al titulo lo para que aparesca mas abajo y se disimule ese bugg, no funciona porque se aplica a todos los elementos que estan posicionados arriba de este.
El efecto que quiero dar es que se quede en elmismo lugar aunque mueva la pagina, y el problema el que te plantie, espero que me pudar dar una mano, impecable el blog, segui asi.

Responder
JMiur  

Es complicado peor, lo primero que haría sería quitar ese reproductor de adentro del bloque del header y hacer que sea un DIV independiente. Fixed no "fija" algo en una posición sino que hace que nos se mueva; es decir que si hay algo "despues" y eso se mueve, lo tapará; por eso, en general, las cosas fijas se colocan al final e la página; para que sean el elemento que esté por encima del resto.

Pensando así, podría ponerse al final y experimentar con otras propiedades como position:absolute, top y left que colocan los elementos es lugares exactos de la pantalla.

No es algo muy sencillo de ver online porque estamos hablando de un objeto de Flash.

Responder
Taddeo  

hola pon algun tutorial para menu horizontal desplegable... se necesita eso...mira mi blog aun no lo puedo hacer... http://tadiuss.blogspot.com notificame a mi correo la respuesta...tadius-cool-man@hotmil.com

Responder
El Aventurero  

Hola JMiur, aquí estamos aprendiendo/configurando mi plantilla de blogger. Te quería preguntar: ¿has escrito un post sobre cómo poner en blogger un menú como el que tienes debajo de la cabecera? Es que he buscado pero sólo he encontrado este menú desplegable.

Muchas gracias y saludos ;)

David

Responder
JMiur  

Fíjate en este post, allí está explicado.

Responder
Sr.Polanco  

Saludos JMIUR es que soy novato en esto de los blogger y estoy tratando de configurar el mio propio tengo dificultad tanto en lo que son los botones como en poner un menú vertical espero que me puedas ayudar con esto.

Responder
JMiur  

Sr.Polanco:
No he experimentado con el tema mucho más allá que este post pero si explicas un poco las dificultades, tal vez puedan encontrarse soluciones.

Responder
Sr.Polanco  

Quiero poner un menú vertical pero no se donde poner los codigos e imagenes mas o menos como el que explicas en el modelo 4 o a menos que tengas otros modelos, en cuanto a lo de los botones al hacer click encima de uno de ellos me lleve a algun lado Ejemplo tengo una donde le llamo historia hay quiero poner varias historia este es el que estoy creando

http://programadoresonline.blogspot.com/

Responder
Sr.Polanco  

a diferencia que este tienes los botone debajo de la cabesera y los quiero vertical al lado Izquierdo y que me haga algo al pasarle el mause por encima lo que sea hasta que cambie de color

Gracias!!!

Responder
JMiur  

Deberías intentar colocarlo y lue, entonces podría ver si hay algún problema o error. Lo que no puedo hacer es diseñarlo desde cero.

Responder
Sr.Polanco  

Hola como estas, aca he colocado uno pero el problema es que quiero agregarle una imagen en la cabezera bajar mas el menu y cambiarle el color de fondo por uno blaco me puedes ayudar

Aaah y que el efecto de los botones sea como el que tienes aca en el modelo #4.

Responder
JMiur  

Sr.Polanco:
Enviame un mail porque sino se hará engorroso escribir códigos aquí.

Responder
miguel jimenez  

hola, me gustaria que me ayudaran con algo, he intentado mucho poner un menu en mi blog utilizando css, pero no me sale, solo salen las palabras y no las imagenes, o aveces slen las imagenes pero no se ven...que puedo cambiar .


por favor si quieren ayudarme envienme un mail a migue.hit@hotmail.com


gracias

Responder
JMiur  

Deberías indicarme el blog para verlo online.

Responder
butcher bay  

buenisimo!!!!!

Responder
flaquiyanqee  

OYE QUIERO QUE ME AYUDES en mi pagina por favor, visitala pincha aqui
y me dices XD

Responder
JMiur  

¿Y cuál es tu duda?

Responder
elblockmusic.com  

si puede me puede enviar un video crear el menu mi msn es manrique-00@hotmail.com

Responder
JMiur  

¿Es un chiste? :-|

Responder
flaquiyanqee  

hola quiero que me ayudes necesito poner un menu en mi blog pero aun no se como "pokefan-15bvs-flaquiyanqee.blogspot.com"XD

Responder
JMiur  

Tendrías que decir qué has hecho y cuál es el problema.

Responder
roberto  

HOLA, ME AYUDo MUCHO TU TUTORIAL
SI QUIEREN PASARSE POR MI BLOG DE CINE ONLINE

www.cinedifusion.blogspot.com


MUCHAS GRACIAS

Responder
Manu  

Lo intenté paso por paso, pero no logré que el menú sea visible.
http://www.manutoons.blogspot.com

=(

Responder
JMiur  

Revisa las imágenes porque, como ninguna es accesible, el menú esá vaci; en todas, lo que se muestra es un error 404 de página no encontrada:
http://img171.imageshack.us/i/foobarclassic.png

Responder
Henry Villamizar  

Jmiur Me Puedes Dar Los Codigos De el Modelo 2 ya Listo que solamente para copiar y pegar te lo agradezco de corazon estoy empezando y me falta por aprender mucho .. mi Blog es rewindthesong.tk

Responder
JMiur  

El código del CSS es el que está indicado en la entrada.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR