Menú vertical fácil

Hace un tiempo en uno de mis blogs utilicé un practico y sencillo menú vertical que nos facilitaba Cesar en su blog y era este:


Para configurarlo haremos lo siguiente, pegaremos el código siguiente antes de ]]></b:skin> supongo que ya sabeis acceder a nuestra plantilla, en Diseño – Edición Html, no hay necesidad de expandir los artilugios. Para buscar ya sabéis Ctrl. + F.

/* menu vertical
----------------------------------------------- */
#borderlinks a{
padding-left: 4px;
display: block;
font-size: 14px; /* tamaño de texto */
text-transform: uppercase; /*Aquí seleccionamos May - Min */
width: 200px; /* Ancho Menú */
color: black;
text-decoration: none;
border-left: 4px solid #99C9FF; /* Color borde */
border-bottom: 1px solid #99C9FF; /* Color línea inferior */
}

#borderlinks a:hover{
border-left: 3px solid #00468c; /*Color de línea vertical al tocar el menú */
background-color: #99C9FF; /* Color fondo al tocar el link */
color: #2A211A; /* Color de letra seleccionada */
}

Una vez hemos pegado el código anterior guardamos cambios y añadiremos este otro como un nuevo elemento Html/Javascript.

<div id="borderlinks">
<a href="http://tirandodeblog.blogspot.com/">Enlace 1</a>
<a href="http://tirandodeblog.blogspot.com/">Enlace 2</a>
<a href="http://tirandodeblog.blogspot.com/">Enlace 3</a>
<a href="http://tirandodeblog.blogspot.com/">Enlace 4</a>
<a href="http://tirandodeblog.blogspot.com/">Enlace 5</a>
<a href="http://tirandodeblog.blogspot.com/">Enlace 6</a>
</div>

Como veis para personalizar el menú, Cesar nos lo dejó muy bien detallado, solo debemos ir modificando los datos a nuestro gusto.