En este artículo quiero compartir unos efectos para menús desplegables contigo. La idea es transformar un input simple en algo llamativo gracias al uso de JQuery. Podemos configurar las opciones como deseemos para lograr efectos únicos.

El plugin JQuery que se utiliza permitirá estilizar la lista desplegable, gracias a JQuery y CSS. Recuerda que CSS Transforms y CSS Transitions únicamente funcionará en navegadores que lo soporten. Sin Javascript, directamente se mostrará el submenú, sin ningún efecto. Los iconos fueron creados con IcoMoon y la idea del menú, por Mary Lou.

Así que allá vamos:

Estructura

Empezaremos con la estructura HTML del input, por ejemplo:

<select id="cd-dropdown" class="cd-select">
<option value="-1" selected>Choose an animal</option>
<option value="1" class="icon-monkey">Monkey</option>
<option value="2" class="icon-bear">Bear</option>
<option value="3" class="icon-squirrel">Squirrel</option>
<option value="4" class="icon-elephant">Elephant</option>
</select>

Activación del plugin JQuery

El plugin JQuery para esa estructura se activará de esta forma:

$( '#cd-dropdown' ).dropdown();

Ten en cuenta que la id de la estructura debe coincidir, en este caso es “cd-dropdown”. El select y las opciones son transformadas de la siguiente forma:

<div class="cd-dropdown">
    <span>Choose an animal</span>
    <input type="hidden" name="cd-dropdown">
    <ul>
        <li data-value="1"><span class="icon-monkey">Monkey</span></li>
        <li data-value="2"><span class="icon-bear">Bear</span></li>
        <li data-value="3"><span class="icon-squirrel">Squirrel</span></li>
        <li data-value="4"><span class="icon-elephant">Elephant</span></li>
    </ul>
</div>

Cuando hacemos click en el primer span “Choose an animal”, aplicaremos la clase cd-active, posteriormente al seleccionar una opción se intercambiará el span que teníamos antes por el que acabamos de clickar. Por ejemplo, “Bear”. Si hacemos click en “Bear”, la opción “Choose an animal” se intercambiará por “Bear”, mostrándose este último.

Opciones

Tenemos distintas opciones para crear menús únicos:

speed : 300,
easing : 'ease',
gutter : 0,</pre>
stack : true,

// retardo entre cada animación de las opciones
delay : 0,

// ángulo aleatorio y posiciones de las opciones
random : false,

// rotated [right || left || false]: las opciones serán rotadas hacia el lado derecho o al izquierdo.
// Recuerda añadir transform-origin en la hoja de estilos
rotated : false,

// efecto deslizarse en las opciones
slidingIn : false

Los estilos comunes están definidos en common.css. Los estilos individuales los verás en styleN.css

Demos

Aquí puedes ver distintas demostraciones con los efectos que se pueden conseguir: