TinyDropdown: Un script para crear menús

TinyDropdown es un pequeño script que facilita la tarea de crear menús complejos ya que incluye submenús y diferentes efectos de animación.

Como todo menú de este tipo no es fácil de explicar ya que depende mucho del tipo de estructura que querramos tener pero, podemos descargar el demo y los archivos necesarios desde la página del desarrollador y estudiarlos.

Básicamente, debemos agregar el script antes de </head> en cualquiera de sus dos formatos, la versión completa (tinydropdown.js) o la minimizada (packed.js):

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

A continuación, las reglas de estilo que luego podremos modificar a gusto:

<style>
  ....... aquí pegamos el contenido de archivo tinydropdown.css
</style>

Y ahora llega el HTML que se coloca allí donde quisiéramos que se viera el menú.

<div class="nav">
  <ul id="menu" class="menu">
    <li class="nodiv"><a href="#">Inicio</a></li>
    <li>
      <a href="#">ITEM 1</a>
      <ul>
        <li><a href="#">Submenu 1.1</a></li>
        <li><a href="#">Submenu 1.2</a></li>
        <li class="submenu">
          <a href="#">MORE</a>
          <ul>
            <li class="noborder"><a href="#">More 1</a></li>
            <li><a href="#">More 2</a></li>
            <li><a href="#">More 3</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li>
      <span>ITEM 2</span>
      <ul>
        <li><a href="#">Submenu 2.1</a></li>
        <li><a href="#">Submenu 2.2</a></li>
        <li><a href="#">Submenu 2.3</a></li>
        <li class="submenu">
          <span>MORE</span>
          <ul>
            <li class="noborder"><a href="#">More 1</a></li>
            <li><a href="#">More 2</a></li>
            <li><a href="#">More 3</a></li>
            <li><a href="#">More 4</a></li>
            <li><a href="#">More 5</a></li>
          </ul>
        </li>
        <li><a href="#">Submenu 2.5</a></li>
        <li><a href="#">Submenu 2.6</a></li>
      </ul>
    </li>
    <li>
      <a href="#">ITEM 3</a>
      <ul>
        <li><a href="#">Submenu 3.1</a></li>
        <li><a href="#">Submenu 3.2</a></li>
        <li><a href="#">Submenu 3.3</a></li>
      </ul>
    </li>
    <li>
      <a href="#">INFO</a>
      <ul id="info">
        <li> ... cualquier texto ... </li>
      </ul>
    </li>
  </ul>
</div>
<script type="text/javascript">
  var dropdown=new TINY.dropdown.init("dropdown", {id:'menu', active:'menuhover'});
</script>

La forma de ejecutar la función es agregarla después del menú y allí también podemos establecer algunos parámetros de configuración:

var dropdown=new TINY.dropdown.init("dropdown", {id:'menu', active:'menuhover', fade:true, slide:true, timeout:200});

id es el nombre del atributo ID (en el ejemplo: menu)
active es la clase CSS activa (en el ejemplo: menuhover

Todos los demás son opcionales:

fade indica si se aplica el efecto de opacidad (TRUE) o no (FALSE)
slide indica si se aplica el efecto de deslizamiento (TRUE) o no (FALSE)
speed indica la velocidad del efecto toggle y es un valor emtre 1 y 9 (por defecto es 5)
timeout es el tiempo de los efectos