Menú Horizontal MagicLine Creado con CSS y jQuery

Navegando en la página CSS-Tricks me encuentro con un tutorial, donde nos enseña un menú de navegación, con un efecto muy interesante, pareciera que es creado en flash, pero lo cierto es que es creado a base de CSS y jQuery. Pueden verlo en mi blog de pruebas.

Lo más importante es que el creador de dicho menú Chris Coyier dice sientánse libre de hacer lo que quieran con él. El caso es que yo me he sentido libre de modificar un pelín el código para que este menú funcione perfectamente en un blog de blogger, ya que el código CSS del menú cambiaba completamente el color de fondo del blog, y el menú se situaba a 50 pixeles debajo de la cabecera, con está pequeña modificación ahora va perfectamente.

Para ponerlo en tu blog primero tienes que tener la librería jQuery 1.3.2 es posible que la tengas, si la tienes en tu plantilla salta este paso, de lo contrario copia y pega el siguiente código justo antes de la etiqueta </head>:

<script src='http://sites.google.com/site/pazosblogger/config/pagetemplates/script/jQuery1.3.2.min.js' type='text/javascript'/>

Ya tenemos la librería en nuestra plantilla, ahora añadiremos el script para el efecto y la animación a color en jQuery requiere de un complemento para el color RGBA, así que añadiremos el script y un patch, para ello copia el siguiente código justo después del anterior código que acabas de pegar antes de </head>:

<script src='http://sites.google.com/site/pazosblogger/config/pagetemplates/script/jquery.color-RGBa-patch.js' type='text/javascript'/>
<script src='http://sites.google.com/site/pazosblogger/config/pagetemplates/script/Script.menu.MagicLine.1.js' type='text/javascript'/>

Ahora añadiremos el código CSS para darle estilo, para ello pega el siguiente código justo antes de la etiqueta ]]></b:skin>:

/* CSS Menú Horizontal MagicLine.1 */
* { margin: 0; padding: 0; }

.nav-wrap { margin: 0px auto; background-color: rgba(0,0,0,0.6); border-top: 2px solid white; border-bottom: 2px solid white; }

.group:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
*:first-child+html .group { zoom: 1; } /* IE7 */

#example-one { margin: 0 auto; list-style: none; position: relative; width: 960px; }
#example-one li { display: inline; }
#example-one li a { color: #bbb; font-size: 14px; display: block; float: left; padding: 6px 10px 4px 10px; text-decoration: none; text-transform: uppercase; }
#example-one li a:hover { color: white; }
#magic-line { position: absolute; bottom: -2px; left: 0; width: 100px; height: 2px; background: #fe4902;
}

Por último agregaremos el Código HTML, ve a Diseño > Añadir gadget > elije > HTML/Javascript > y pega el siguiente código:

<div class="nav-wrap">
<ul class="group" id="example-one">
<li class="current_page_item"><a href="#">Inicio</a></li>
<li><a href="URL-enlace">Nombre1</a></li>
<li><a href="URL-enlace">Nombre2</a></li>
<li><a href="URL-enlace">Nombre3</a></li>
<li><a href="URL-enlace">Nombre4</a></li>
<li><a href="URL-enlace">Nombre5</a></li>
</ul>
</div>

Ahora muevelo el widget justo debajo de la cabecera.Cambia lo que está en color rojo por la dirección de tu enlace, y lo que está en color azul por el nombre de tu enlace.

Configuración Avanzada

Para cambiar el color de fondo del menú cambia el código que está en background-color: rgba (0,0,0,0.6); puedes verlo en color celeste en el código css, por el código del color que tú quieras.
Para cambiarle el grosor y color a los bordes, cambia lo que está en color verde, puedes ver que tiene 2px de grosor y color white (blanco).
Si quieres cambiar el color de las letras cambia el código que está en color amarillo, por el código del color que te guste, y para cambiar el color cuando pase mouse por encima de las letras cambia white que esta también en color amarillo por el código del color que más te guste.
También pueden cambiarle el color al subrayado, cambia el código que está en color purpura, por el código del color que tú quieras.

Descargar Script