Sencillo menú con slider

Este es otro menú creado por leigeber.com que utiliza un efecto deslizante (slider). Es muy sencillo de aplicar, requiere un pequeño script que podemos descargar en formato ZIP desde la página del autor y que luego copiamos y pegamos, agregándolo a la plantilla antes de </head>:

<script type='text/javascript'>
//<![CDATA[
....... aquí copiamos el contenido del archivo .......
//]]>
</script>

El menú, lo creamos con un DIV y una lista:

<div class="menu">
  <ul id="menu">
    <li><a href="URL_enlace"></a>Enlace</li>
    <li value="1"><a href="URL_enlace"></a>Enlace</li>
    <li><a href="URL_enlace">Enlace</a></li>
    <li><a href="URL_enlace">Enlace</a></li>
    <li><a href="URL_enlace">Enlace</a></li>
  </ul>
  <div id="slide"></div>
</div>
<script type='text/javascript'>window.onload=function() {menuSlider.init('menu','slide');}</script>

A uno de los items (LI) le colocamos un parámetro extra value="1" con lo que indicamos cuál es el item base, aquel al que nuesto slider regresará, produciendo ese curioso efecto de resorte.

• Un Enlace
• Enlace Base
• Otro Enlace
• Otro Enlace
• Último Enlace

Todo lo que faltara sería crear las definiciones CSS del menú y allí está su mejor característica, podemos usar la que viene con el demo del script o inventar cualquier otra, las posibilidades son muchísimas. Un ejemplo:

<style type='text/css'>
.menu { /* es el bloque horizontal */
  background: #789; /* el fondo de ese bloque */
  height: 32px; /* la altura */
  position: relative; /* obligatorio */
}
.menu ul { /* la lista */
  height: 32px; /* la altura */
  list-style: none;
  margin: 0;
  padding: 0 0 0 10px;
  position: absolute;
  z-index: 100;
}
.menu li { /* cada item de la lista */
  float: left;
  line-height: 32px;  /* centrada verticalmente */
  padding: 0 0 0 5px;
}
.menu a, .menu a:active, .menu a:visited, .menu a:hover { /* cada item es un enlace */
  color: #CDE;
  padding: 0 15px;
  text-decoration: none;
}
#slide { /* es el cursor que se desplaza */
  -moz-border-radius: 10px;
  background: #000;
  height: 32px;
  position: absolute;
  top: 0;
  z-index: 10;
}
</style>