Listas desplegables elegantes con jQuery Dropkick

Name: Listas desplegables elegantes con jQuery Dropkick
Brand: Jose Aguilar
SKU: joseaguilarblog-2883
Availability: InStock
Rating: 5 (1 reviews)

DropKick es un plugin jQuery que nos permite tener dropdowns <select> de aspecto profesional que funcionan a la perfección con teclado e incluso con dispositivos móviles. Funciona a la perfección con todos los navegadores.

Como ven el aspecto es muy distinto a los típicos selects que nos presenta el navegador.

Para disponer de este efecto deberás buscar el plugin e incluirlo junto con la librería jQuery y su llamada en el <head> de vuestra página. También harán falta algunos estilos que incorpora el plugin.

<link rel="stylesheet" href="dropkick.css" type="text/css">
<script src="jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.dropkick-1.0.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(function () {
   $('.default').dropkick();
});
</script>

Y luego en nuestro <body> componer un <select> como sueles hacer pero añadiéndole un class=»default».

<select name="country" class="default">
   <option value="">Try Me!</option>
   <option value="AU">Australia</option>
   <option value="CA">Canada</option>
   <option value="DE">Germany</option>
   <option value="JP">Japan</option>
   <option value="GB">United Kingdom</option>
   <option value="US">United States</option>
</select>

Ver el ejemplo en funcionamiento