Menú Bordeado Animado

Hay muchas personas que deciden poner una gran imagen arriba en la cabecera. A mi personalmente no me gusta, pero para gustos... En estos casos, poner debajo un menú horizontal con las categorías puede ser inconveniente porque el menú quedaría escondido, con lo que perdería su eficacia. Si es el caso que la plantilla es de 2 columnas, con el sidebar a la derecha te recomendaría este menú. Como veis en la imagen a continuación, coloca una imagen arriba, por la que al pasar el ratón despliega un menú a la izquierda y abajo muy ligero y fácil de hacer.

Lo primero vamos a Plantilla y en el html buscamos la etiqueta </head> y justo antes de ella pegamos el siguiente código:

<link rel="stylesheet" type="text/css" href="http://sites.google.com/site/recursosbit/iconos.css"/>
<link rel="stylesheet" type="text/css" href="http://sites.google.com/site/recursosbit/menuanimado.css" />

Ahora buscamos la etiqueta </body> y justo encima pegamos lo siguiente:

<script src="http://sites.google.com/site/recursosbit/classie.js"></script>
<script src="http://sites.google.com/site/recursosbit/castromenu.js"></script>

Guardamos los cambios y nos vamos a crear un widget Html en Diseño y dentro pegamos lo siguiente:

<nav id="menucastro" class="menucastro">
    <a href="#" class="menucastro-trigger"><span>Menu</span></a>
    <ul>
     <li><a href="#">Link 1</a></li>
     <li><a href="#">Link 2</a></li>
     <li><a href="#">Link 3</a></li>
     <li><a href="#">Link 4</a></li>
     <li><a href="#">link 5</a></li>
    </ul>
    <ul>
     <li><a href="#" class="castro-iconos icon-twitter">Twitter</a></li>
     <li><a href="#" class="castro-iconos icon-gplus">Google+</a></li>
     <li><a href="#" class="castro-iconos icon-facebook">Facebook</a></li>
     <li><a href="#" class="castro-iconos icon-github">icon-github</a></li>
    </ul>
</nav>