Share
HTML Of download de video of abonneer je op Webdesigntuts + screencasts via iTunes of YouTube! Hier is een basisoverzicht van wat er in deze screencast aan bod komt: Allereerst beginnen we met onze basale HTML en CSS. De HTML zal bestaan uit een eenvoudige DropKick.js is een geweldig hulpmiddel om te behandelen Het implementeren van DropKick.js is net zo eenvoudig als het uitvoeren van een regel met jQuery. We beginnen met het downloaden van DropKick.js en wijzigen onze HTML om te voldoen aan de vereisten van het script (toevoeging van een naam en klasse toeschrijven aan de Met behulp van de standaardsjabloon van DropKick.js voegen we de benodigde jQuery toe om de dropdown tot leven te brengen. DropKick.js heeft veel andere functies, waaronder callback-evenementen, maar we zullen ons tijdens deze tutorial concentreren op het thema aanpassen. DropKick.js maakt het heel gemakkelijk om een aangepast thema te maken voor geselecteerde vervolgkeuzemenu's en we gebruiken het geweldige donkere ontwerp van Premium Pixels voor deze zelfstudie. Om ons ontwerp te dupliceren, voegen we een stukje code toe aan het JavaScript-bestand. Laten we eerlijk zijn - niets is erger dan moeite om iets extreem kleins te selecteren met een mobiel aanraakapparaat (ed: Ik kan een paar dingen bedenken ...) De oplossing? Lettergrootte gebruiken ( Het vormen van vormelementen kan lastig zijn, maar met DropKick.js in combinatie met een geweldig ontwerp duurt het slechts een paar minuten om een goed uitziende keuzelijst te implementeren en aan te passen..kiezen elementen met hun keuze tags kunnen niet volledig worden aangepast met behulp van CSS, maar wat als we een vervolgkeuzelijst net zo gemakkelijk willen opmaken als , elementen kunnen worden gestileerd? Vandaag stylen we de Premium Pixels Dark Select Dropdown met DropKick.js om ons daarbij te helpen.
Bekijk Screencast
Stap 1: Base HTML en CSS
kiezen tag en opties in respectieve keuze -tags. Om te beginnen met een schone lei, zullen we normalize.css gebruiken. Niets bijzonders, we willen gewoon alles beginnen - blijf op de hoogte van de leuke dingen!
Stap 2: DropKick.js instellen
kiezen en keuze tags net als andere tags die veel eenvoudiger in CSS zijn te stijlen (bijvoorbeeld ongeordende lijsten die zijn opgemaakt als navigatiebalk). De HTML-structuur omzetten in een reeks van div's,een's, ulen li's, styling-dropdowns is net zo eenvoudig als het aanpassen van een themasjabloon (die DropKick.js biedt).kiezen element) en het extraheren van de CSS voor het dropdown-thema.
Stap 3: DropKick.js implementeren
// HTML-sjabloon voor de dropdowns dropdownTemplate = ['']. join ("),
Stap 4: Een DropKick.js-thema aanpassen
Stap 5: Schalen met lettergrootte
em's) om de vervolgkeuzelijst te schalen. In plaats van afbeeldingen te gebruiken voor de vervolgpijlen, gebruiken we een webfont (Font Awesome), wat voor veel meer flexibiliteit zorgt.
Conclusie
Accentsconagua