Share
HTML In alternativa, scarica il video o iscriviti a Webdesigntuts + screencast tramite iTunes o YouTube! Ecco uno schema di base di ciò che è coperto in questo screencast: Innanzitutto, inizieremo con la nostra base HTML e CSS. L'HTML sarà costituito da un semplice DropKick.js è un ottimo strumento da trattare Implementare DropKick.js è semplice come eseguire una riga di jQuery. Inizieremo a scaricare DropKick.js e ad alterare il nostro HTML per adattarlo ai requisiti dello script (aggiungendo a nome e classe attributo al Usando il modello predefinito di DropKick.js, aggiungeremo il jQuery necessario per dare vita al menu a discesa. DropKick.js ha molte altre funzionalità, inclusi gli eventi di callback, ma ci concentreremo sulla personalizzazione del tema durante questo tutorial. DropKick.js rende molto facile creare un tema personalizzato per i menu a discesa selezionati e utilizzeremo il fantastico design scuro di Pixel per questo tutorial. Per duplicare il nostro design, aggiungeremo un po 'di codice al file javascript. Ammettiamolo: niente è peggio che lottare per selezionare qualcosa di estremamente piccolo usando un dispositivo touch mobile (Ed: Posso pensare ad alcune cose ...) La correzione? Utilizzando la dimensione del carattere ( Gli elementi di stile dello styling possono essere un problema, ma se utilizzi DropKick.js combinato con un ottimo design, sono necessari solo pochi minuti per implementare e personalizzare un dropdown di selezione dall'aspetto eccezionale.selezionare elementi con i loro opzione i tag non possono essere completamente personalizzati con i CSS, ma se volessimo ridisporre un dropdown con la stessa facilità con cui , gli elementi possono essere stilizzati? Oggi modificheremo il Dropdown Dark Pixel Premium utilizzando DropKick.js per aiutarci a fare proprio questo.
Visualizza Screencast
Passaggio 1: HTML di base e CSS
selezionare tag e opzioni in rispettivi opzione tag. Per iniziare con una lavagna pulita, useremo normalize.css. Non c'è niente di speciale qui, vogliamo solo iniziare tutto - rimanete sintonizzati per le cose divertenti!
Passaggio 2: configurazione di DropKick.js
selezionare e opzione tag come tutti gli altri tag che sono molto più semplici da applicare in CSS (ad esempio liste non ordinate disegnate come barre di navigazione). Conversione della struttura HTML in una serie di div'S,un'S, ule LiIl menu a discesa dello stile è semplice come personalizzare un modello di tema (che fornisce DropKick.js).selezionare elemento) così come l'estrazione del CSS per il tema del menu a discesa.
Passaggio 3: implementazione di DropKick.js
// modello HTML per i dropdowns dropdownTemplate = ['' ].aderire("),
Passaggio 4: personalizzazione di un tema DropKick.js
Passaggio 5: ridimensionamento con dimensione carattere
em's) per ridimensionare il menu a discesa. Invece di usare le immagini per le frecce a discesa, useremo un webfont (Font Awesome), che consente una maggiore flessibilità.
Conclusione
Accentsconagua