Share
HTML Vous pouvez également télécharger la vidéo ou vous abonner à Webdesigntuts + screencasts via iTunes ou YouTube.! Voici un aperçu de base de ce qui est couvert dans ce screencast: Premièrement, nous commencerons par notre base HTML et CSS. Le HTML consistera en un simple DropKick.js est un excellent outil pour traiter Implémenter DropKick.js est aussi simple que d’exécuter une ligne de jQuery. Nous commencerons par télécharger DropKick.js et par modifier notre code HTML pour l'adapter aux exigences du script (ajout d'un prénom et classe attribuer à la En utilisant le modèle par défaut de DropKick.js, nous ajouterons le jQuery nécessaire pour donner vie au menu déroulant. DropKick.js possède de nombreuses autres fonctionnalités, y compris des événements de rappel, mais nous allons nous concentrer sur la personnalisation du thème au cours de ce tutoriel.. DropKick.js facilite la création d'un thème personnalisé pour des menus déroulants sélectionnés et nous allons utiliser le super design sombre de Premium Pixels pour ce didacticiel. Afin de dupliquer notre conception, nous allons ajouter un peu de code au fichier javascript. Regardons les choses en face - rien n’est pire que de lutter pour sélectionner un objet extrêmement petit à l’aide d’un appareil tactile mobile (Ed: Je peux penser à quelques petites choses…) La solution? Utiliser la taille de la police ( Styliser les éléments de formulaire peut être une douleur, mais en utilisant DropKick.js associé à un superbe design, il ne faut que quelques minutes pour mettre en œuvre et personnaliser un superbe menu déroulant..sélectionner éléments avec leur option Les balises ne peuvent pas être entièrement personnalisées à l’aide de CSS, mais qu’en est-il si nous voulons styler un menu déroulant aussi facilement que , les éléments peuvent être stylés? Aujourd'hui, nous appelons DropKick.js Premium Drop Premium Dark Select Dropdown pour nous aider à atteindre cet objectif..
Voir le Screencast
Étape 1: HTML et CSS de base
sélectionner tag et options dans respectif option Mots clés. Pour commencer avec une table rase, nous allons utiliser normalize.css. Rien de spécial ici, nous voulons juste tout commencer - restez à l’écoute pour les choses amusantes!
Étape 2: Configuration de DropKick.js
sélectionner et option balises tout comme d’autres balises qui sont beaucoup plus faciles à styler en CSS (par exemple, des listes non ordonnées appelées barre de navigation). Conversion de la structure HTML en une série de divde,unede, ul'le sable liLa liste déroulante des styles est aussi simple que de personnaliser un modèle de thème (fourni par DropKick.js).sélectionner élément) ainsi que l'extraction du CSS pour le thème déroulant.
Étape 3: Implémentation de DropKick.js
// Modèle HTML pour les listes déroulantes dropdownTemplate = [''] .join ("),
Étape 4: personnalisation d'un thème DropKick.js
Étape 5: Mise à l'échelle avec la taille de la police
empour réduire la liste déroulante. Au lieu d'utiliser des images pour les flèches déroulantes, nous utiliserons une police Web (Font Awesome), ce qui permet une plus grande flexibilité..
Conclusion
Accentsconagua