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.

Menú Vertical

Os gusta este menú, pues si queréis ponerlo en vuestro blog lo haremos de la siguente forma:

Pegamos el siguiente código antes de ]]></b:skin>

/*- menu----------- */

#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}
#navcontainer li { margin: 0 0 3px 0; }
#navcontainer a
{
display: block;
padding: 2px 2px 2px 24px;
border: 1px solid #333;
width: 160px;
background-color: #FFCC00;
background-image:
url(http://img478.imageshack.us/img478/1483/ama1yh2.jpg);
}
#navcontainer a:link, #navlist a:visited
{
color: #000000;
text-decoration: none;
}
#navcontainer a:hover
{
border: 1px solid #FFFF99;
background-color: #6C1F0D;
background-image:
url(http://img166.imageshack.us/img166/3333/nar2af6.jpg);
color: #FFFF99;
}
#active a:link, #active a:visited, #active a:hover
{
border: 1px solid #FFFF99;
background-color: #6C1F0D;
background-image:
url(http://img166.imageshack.us/img166/3333/nar2af6.jpg);
color: #FFFF99;
}

En el código anterior podeis modificar los códigos de los colores.

Después ubicamos el menú como un nuevo elemento Html/Javascript.

<div id="navcontainer">
<ul id="navlist"><li id="active">
<a href="#" id="current">INICIO</a></li>
<li><a href="URL">DESCRIPCIÓN 1</a></li>
<li><a href="URL">DESCRIPCIÓN 2</a></li>
<li><a href="URL">DESCRIPCIÓN 3</a></li>
<li><a href="URL">DESCRIPCIÓN 4</a></li>
</ul>
</div>

Donde pone “URL” va la dirección completa del enlace, y donde pone “Inicio” y “Descripción” pondremos la nuestra.

Visto en: El blog de Cesar

Menú desplegable

Hoy os propongo un sencillo menú desplegable para poder acceder a otras webs o apartados de nuestro propio blog o web:

Para ello tenemos que acceder a nuestro editor y añadir este código como un nuevo elemento Html/Javascript:

<script language="javascript">
function ir(){
var thebox=document.menu
if (thebox.windowoption.checked){
if (!window.newwindow)
newwindow=window.open("")
newwindow.location=
thebox.example.options[thebox.example.selectedIndex].value
}
else
location=
thebox.example.options[thebox.example.selectedIndex].value
}
</script>
<form name="menu">
<select name="example" size="1">
<option selected/>Webs de interes
<option value="http://www.google.es/"/>Google
<option value="www.blogger.com"/>Blogger
<option value="http://www.imageshack.us"/>ImagesShack
<input value="OK" onclick="ir()" type="button"/> <br/>
<input value="ON" name="windowoption" type="checkbox"/>
Abrir en una nueva ventana
</form>

En rojo las opciones que podeis variar a vuestro gusto, podeis añadir tantos enlaces como querais.

Segun el ejemplo quedaria asi:
Tambien tiene la opción de abrir los enlaces en ventana aparte:

Fuente: Mi baul de los recuerdos.