Menú Vertical CSS con movimiento

PRÓXIMAMENTE VIDEOTUTORIAL

El siguiente menú maneja efectos CSS, los cuales permiten generar un movimiento sobre cada botón cambiando de color cada vez que el visitante coloque el puntero del mouse/ratón sobre ellos. Si se presta atención es muy fácil de configurar (cambiar los colores, tipo de fuente, color del fondo del menú, y el ancho del mismo). Como ejemplo pueden ver el menú de la derecha de Charkleons.com. Una gran ventaja de este menú es que funciona con dispositivos móviles, cosa que no hace uno basado en Flash. Para usar este menú debemos agregar un estilo a la plantilla, y los enlaces de las categorías en un Gadget HTML.

IMPORTANTE: El menú aplicará los colores para los enlaces dependiendo del tipo de plantilla, puede tomar los que están definidos en Blogger (Plantilla / Personalizar / Avanzado / Enlaces de gadgets), que por lo general son tres (enlace normal, enlace visitado, y enlace señalado), o usar solo los dos del estilo. Si no puedes cambiar los colores de los enlaces desde "Enlaces de gadgets", por favor visita el tema: "Cómo cambiar el color de los Links/enlaces de los Gadgets" donde explico el procedimiento para hacer el cambio directamente desde la plantilla.

Lo primero que debemos hacer es agregar el estilo a la Plantilla, la ruta sería: Plantilla / Editar HTML, y lo colocamos sobre la etiqueta </head>. Si no quieren agregar el código en la plantilla lo pueden agregar en un gadget HTML-Javascript junto al código para el título de los botones y sus enlaces. Las partes que se pueden editar tienen su debida explicación a la derecha.

-----------------------------------------
<style>

ul.svertical{
width: 250px; /* ancho del menú ajústalo a la columna */
overflow: auto;
background: transparent; /* color del fondo del menú (puedes dejar black, etc)*/
margin: 0;
padding: 0;
padding-top: 7px; 
list-style-type: none;
}

ul.svertical li{
text-align: right; /* Alineación de los botones right, center, o left */
}

ul.svertical li a{
position: relative;
display: inline-block;
text-indent: 5px; /* Ancho del botón. Como una Sangría */
overflow: hidden;
background: rgb(0, 114, 198); /* Color RGB primario de los botones */
font: italic normal 18px Calibri; /* Fuente y tamaño, normal bold */
text-decoration: none;
padding: 5px; /* Altura del botón */
margin-bottom: 1px; /* Espacio entre los botones, puede ser un valor negativo */
color: white; /* Color sin efecto (mouse/ratón) del texto en el botón */
-moz-box-shadow: inset -7px 0 5px rgba(114,114,114, 0.0); /* Color de la sombra último valor 0.2 - 0.4 etc */
-webkit-box-shadow: inset -7px 0 5px rgba(114,114,114, 0.0);
-ms-box-shadow: inset -7px 0 5px rgba(114,114,114, 0.0);
box-shadow: inset -7px 0 5px rgba(114,114,114, 0.0);
-moz-transition: all 0.2s ease-in-out; 
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

ul.svertical li a:hover{
padding-right: 40px; /* Medida que abarca el movimiento del botón */
color: white; /* Color con efecto (mouse/ratón) del texto en el botón */
background: rgb(0,81,186); /* Color que toma el botón con mouse/ratón */
-moz-box-shadow: inset -3px 0 2px rgba(114,114,114, 0.0); /* Color de la sombra último valor 0.2 - 0.4 etc */
-webkit-box-shadow: inset -3px 0 5px rgba(114,114,114, 0.0);
-ms-box-shadow: inset -3px 0 5px rgba(114,114,114, 0.0);
box-shadow: inset -3px 0 5px rgba(114,114,114, 0.0);
}

ul.svertical li a:before{
content: "";
position: absolute;
left: 0;
top: 0;
border-style: solid; 
border-width: 70px 0 0 20px;
border-color: transparent transparent transparent transparent; /* Cambia el último valor por black si dejaste un fondo de color, esto agrega un corte diagonal al final del botós */

}

</style>
-----------------------------------------

Ahora solo debemos crear un gadget HTML/Javascript y en él colocar los enlaces de las páginas que queramos publicar en el menú como muestro a continuación:
-----------------------------------------
<ul class="svertical">
<li><a href="URL de la página">Título</a></li>
<li><a href="URL de la página">Título</a></li>
<li><a href="URL de la página">Título</a></li>
<li><a href="URL de la página">Título</a></li>
<li><a href="URL de la página">Título</a></li>
</ul>
-----------------------------------------

En este ejemplo hay 5 enlaces, pero pueden agregar tantos como necesiten.

Si quieren que los enlaces se abran en una nueva ventana o pestaña, por favor visiten el tema: "Cómo abrir enlaces externos en otra pestaña" donde explico dos formas de hacerlo.

Eso sería todo, ya sería cuestión de personalizar el diseño del menú aplicándole el mejor estilo para sus páginas.

Autor original: Dynamic Drive

Espero que esta información les sea muy útil.

Gracias.

Cómo hacer un menú vertical con efectos en blogger, menú vertical con efecto css para blogger fácil, menú vertical con efectos gratuito para blogger, menú vertical sin leyendas de otras páginas, menú vertical gratuito para blogger con efectos,