Share
html Alternativt kan du ladda ner videoklippet eller prenumerera på Webdesigntuts + screencasts via iTunes eller YouTube! Här är en grundläggande översikt över vad som omfattas av denna screencast: Först kommer vi att börja med vår bas HTML och CSS. HTML-filen kommer att bestå av en enkel DropKick.js är ett bra verktyg att behandla Genomförandet av DropKick.js är lika rakt fram som att utföra en rad jQuery. Vi kommer att börja ladda ner DropKick.js och ändra vår HTML för att passa scriptets krav (lägg till en namn och klass attribut till Med DropKick.js standardmall lägger vi till den nödvändiga jQuery för att få ner droppen till liv. DropKick.js har många andra funktioner, inklusive återkommande händelser, men vi kommer att fokusera på teman anpassning under denna handledning. DropKick.js gör det mycket enkelt att göra ett anpassat tema för valda rullgardinsmenyer, och vi använder Premium Pixels stora mörka design för denna handledning. För att duplicera vår design lägger vi till en del kod till javascriptfilen. Låt oss möta det - ingenting är värre än att kämpa för att välja något extremt litet med hjälp av en mobil beröringsenhet (Ed: Jag kan tänka på några saker ...) Fixen? Använda teckenstorlek ( Styling-formelementen kan vara smärta, men med DropKick.js kombinerat med en bra design tar det bara några minuter att implementera och anpassa en snygg välj dropdown.Välj element med deras alternativ Taggar kan inte anpassas helt enkelt med CSS, men vad händer om vi vill stila en dropdown lika enkelt som , element kan stylas? Idag stämmer vi Premium Pixels Dark Select Dropdown med DropKick.js för att hjälpa oss att göra just det.
Visa skärmdump
Steg 1: Basera HTML och CSS
Välj tagg och alternativ i respektive alternativ taggar. För att börja med en ren skiffer använder vi normalize.css. Ingenting fancy här, vi vill bara börja allting - håll dig inriktad på de roliga grejerna!
Steg 2: Ställ in DropKick.js
Välj och alternativ taggar precis som andra taggar som är mycket enklare att stila i CSS (t ex oorderade listor stylade som navigeringsfältet). Konvertera HTML-strukturen till en serie av div's,en's, uls och lis, dropdowns är så enkelt som att anpassa en templatsmall (som DropKick.js tillhandahåller).Välj element) samt extrahera CSS för dropdown-temat.
Steg 3: Implementera DropKick.js
// HTML-mall för dropdowns dropdownTemplate = ['' ].Ansluta sig("),
Steg 4: Anpassa ett DropKick.js-tema
Steg 5: Skalning med teckenstorlek
ems) för att skala nedrullningen. I stället för att använda bilder för nedrullnings pilarna använder vi en webfont (Font Awesome), vilket möjliggör mycket större flexibilitet.
Slutsats
Accentsconagua