En el siguiente tutorial se nos explica detalladamente como hacer un practico y atractio menu para nuestro blogger......
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.<div id="outer-wrapper"><div id="wrap2">
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>
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 1 modelo 2 modelo 3 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);
position: relative;
top: 0px;
left: 5px;
}#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);
}#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;
}#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;
}
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' );
}
Menu vertical en Blogger
Posted on 16 dic 2009 at 21:13
in
Trucos Blogger
by
Diseño Interactivo
Agregar un menú vertical a Blogger es una tarea simple pero tiene sus bemoles.
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:
esto es, incluso antes del bloque del header. De esta manera, con las propiedad margin de podemos controlar su posición exacta.
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.
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
CSS modelo 2
CSS modelo 3
CSS modelo 4
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.
donde top: expression ....... : document.body.scrollTop) + 'px' ); debe ir en una sola línea.
Suscribirse a:
Enviar comentarios (Atom)
0 comentarios:
Publicar un comentario