Share
HTML Alternativamente, descargue el video o suscríbase a Webdesigntuts + screencasts a través de iTunes o YouTube! Aquí hay un resumen básico de lo que se trata en este screencast: Primero, comenzaremos con nuestra base HTML y CSS. El HTML consistirá en un simple DropKick.js es una gran herramienta para tratar Implementar DropKick.js es tan sencillo como ejecutar una línea de jQuery. Comenzaremos descargando DropKick.js y modificando nuestro HTML para que se ajuste a los requisitos del script (agregando un nombre y clase atribuir a la Usando la plantilla predeterminada de DropKick.js, agregaremos la jQuery necesaria para que el menú desplegable cobre vida. DropKick.js tiene muchas otras características que incluyen eventos de devolución de llamada, pero nos centraremos en la personalización del tema durante este tutorial.. DropKick.js hace que sea muy fácil crear un tema personalizado para ciertos menús desplegables y usaremos el gran diseño oscuro de Premium Pixels para este tutorial. Para duplicar nuestro diseño, agregaremos un poco de código al archivo javascript. Afrontémoslo: nada es peor que luchar por seleccionar algo extremadamente pequeño con un dispositivo táctil móvil (Ed: Puedo pensar en algunas cosas ...) ¿La solución? Utilizando tamaño de letra ( El diseño de elementos de forma puede ser una molestia, pero al usar DropKick.js combinado con un gran diseño, solo toma un par de minutos implementar y personalizar un excelente menú desplegable de selección..seleccionar elementos con sus opción Las etiquetas no se pueden personalizar completamente utilizando CSS, pero ¿qué pasa si queremos diseñar un menú desplegable tan fácilmente como , ¿Los elementos pueden ser estilizados? Hoy, diseñaremos el menú desplegable Dark Pixels Dark Select con DropKick.js para ayudarnos a hacer eso..
Ver Screencast
Paso 1: Base HTML y CSS
seleccionar etiqueta y opciones en respectivo opción etiquetas Para comenzar con una pizarra limpia, usaremos normalize.css. Aquí no hay nada especial, solo queremos comenzar con todo: estad atentos a las cosas divertidas!
Paso 2: Configurando DropKick.js
seleccionar y opción etiquetas al igual que otras etiquetas que son mucho más fáciles de diseñar en CSS (por ejemplo, listas desordenadas con el estilo de barra de navegación). Convertir la estructura HTML en una serie de dives,unaes, uly liEl menú desplegable de estilos es tan simple como personalizar una plantilla de tema (que proporciona DropKick.js).seleccionar elemento), así como la extracción de CSS para el tema desplegable.
Paso 3: Implementando DropKick.js
// Plantilla HTML para los menús desplegables dropdownTemplate = ['' ].unirse("),
Paso 4: Personalizar un tema DropKick.js
Paso 5: escalado con tamaño de fuente
em's) para escalar el desplegable. En lugar de usar imágenes para las flechas desplegables, usaremos un webfont (Font Awesome), que permite una mayor flexibilidad..
Conclusión
Accentsconagua