Share
HTML Alternativt kan du laste ned videoen eller abonnere på Webdesigntuts + screencasts via iTunes eller YouTube! Her er en grunnleggende oversikt over hva som er dekket i denne screencast: Først vil vi starte med vår base HTML og CSS. HTML-en vil bestå av en enkel DropKick.js er et flott verktøy å behandle Implementering av DropKick.js er like rett frem som å utføre en linje med jQuery. Vi vil begynne å laste ned DropKick.js og endre HTML-en vår for å passe til skriptets krav (legge til en Navn og klasse attributt til Ved å bruke DropKick.js standardmal, legger vi til nødvendig jQuery for å få nedgangen til liv. DropKick.js har mange andre funksjoner, inkludert tilbakeringingshendelser, men vi vil fokusere på temaet tilpasning under denne opplæringen. DropKick.js gjør det veldig enkelt å lage et tilpasset tema for utvalgte rullegardiner, og vi bruker Premium Pixels store mørke design for denne opplæringen. For å duplisere vårt design, vil vi legge til litt kode til javascriptfilen. La oss innse det - ingenting er verre enn å slite med å velge noe ekstremt lite ved hjelp av en mobil berøringsenhet (Ed: Jeg kan tenke på noen ting ...) Løsningen? Bruke skriftstørrelse ( Styling formelementer kan være en smerte, men ved hjelp av DropKick.js kombinert med en flott design, tar det bare et par minutter å implementere og tilpasse en flott, velg rullegardin.å velge elementer med deres alternativ Etiketter kan ikke tilpasses helt ved hjelp av CSS, men hva hvis vi ønsker å style en dropdown like enkelt som , elementene kan styles? I dag stiler vi Premium Pixels Dark Select Dropdown ved hjelp av DropKick.js for å hjelpe oss med å gjøre nettopp det.
Se Screencast
Trinn 1: Base HTML og CSS
å velge tag og alternativer i respektive alternativ tags. For å starte med en ren skifer, bruker vi normalize.css. Ikke noe fancy her, vi vil bare starte alt - hold deg innstilt for de morsomme tingene!
Trinn 2: Konfigurer DropKick.js
å velge og alternativ merker akkurat som andre koder som er mye enklere å stillegge i CSS (for eksempel uordnede lister som er utformet som navigeringslinje). Konvertere HTML-strukturen til en serie av div's,en's, uls og li's, styling dropdowns er like enkelt som å tilpasse en temalmaler (som DropKick.js gir).å velge element) samt utvinning av CSS for dropdown-temaet.
Trinn 3: Implementering av DropKick.js
// HTML-mal for dropdowns dropdownTemplate = ['' ].bli med("),
Trinn 4: Tilpasse et DropKick.js-tema
Trinn 5: Skalering med skriftstørrelse
em's) for å skala ned rullegardinmenyen. I stedet for å bruke bilder for rullegardinpilen, bruker vi en webfont (Font Awesome), som gir mye større fleksibilitet.
Konklusjon
Accentsconagua