lunes, 2 de mayo de 2011

Vagabundia

Vagabundia


TinyDropdown: Un script para crear menús

Posted: 01 May 2011 08:16 PM PDT

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

No hay comentarios:

Publicar un comentario

Correo Vaishnava

Archivo del blog