Menu vertical en Blogger

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 1	modelo 2	modelo 3	modelo 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.