Diseño interactivo

Cómo estilo «Seleciona» con DropKick

Cuando se trata de diseñar páginas web, nada es tan complicado como las formas. Y cuando se trata de diseñar formas, casi, nada es tan complicado como con CSS, pero existen grandes limitaciones sobre cuánto podemos lograr con CSS solo. A menudo, la única opción viable es diseñar a través de JavaScript, y como una forma de mejora progresiva no es algo de lo que tengamos que rehuir.

En este artículo, usaremos Lanzar patada para crear el menú desplegable. Lo que dropkick hace es transformar el

Lo primero que debemos hacer es configurar un

Llamando a DropKick

Una vez que hemos configurado nuestra en algo que podemos confiar en el estilo con CSS. Además, nuestros valores se han insertado en los nuevos atributos de datos HTML5 (con el nombre data-dk-dropdown-value).

Ahora podemos diseñar nuestro menú desplegable con CSS, o usar uno de los temas de DropKick si lo preferimos; En el momento de escribir, hay tres temas disponibles, el predeterminado, el brillo oscuro y el brillo claro. Pero la mayoría de la gente querrá usar sus propios estilos que coincidan con las necesidades de su proyecto.

Extendiendo DropKick

La extensión de DropKick es un proceso simple. Por ejemplo, si quisiéramos detectar cuándo se realiza un cambio en el menú desplegable, podemos agregar el controlador de eventos de cambio, de esta manera: 

$('select').dropkick({change: function (value) {console.log('Option selected: ' + value);}});

Pensamientos finales

Estoy seguro de que hay mil maneras de diseñar un menú de selección sin el uso de jQuery, pero las que usan solo CSS están librando una batalla perdida contra los valores predeterminados del navegador. La simplicidad de este complemento y la tremenda flexibilidad que ofrece y el enfoque de mejora progresiva que lleva a cabo significa que DropKick es una excelente solución.

¿Has usado DropKick en un proyecto? ¿Tiene un método preferido de diseño