La fonctionnalité "Tableau de bord" sur un Mac a fière allure et le menu permettant d'ajouter ou de supprimer des widgets est une fonctionnalité bien conçue. Un effet similaire peut ajouter un tout nouveau niveau de fonctionnalité à un site Web, offrant un simple menu déroulant en haut d'une page. Ce tutoriel vous guidera tout au long du processus.
Avant de commencer, vous voudrez peut-être consulter la démo ou télécharger le code source complet ici.
À partir de Photoshop
1) Créez un fond de répétition de grille.
Commencez par créer une image de 56 (W) x 64 (H) px dans Photoshop. Créez ensuite un dégradé de 3 couleurs allant de # 111111 à # 313131 et enfin à # 111111. Ça devrait ressembler à ça.
Il est maintenant temps d'ajouter les fossettes.
Sélectionnez l'outil Pinceau et choisissez un pinceau carré de taille 2px et # 000000. Créez un nouveau calque et assurez-vous qu'il est sélectionné. Commencez par créer un point n'importe où sur cette nouvelle couche. Déplacez maintenant ce point 3 pixels du haut de l'image et 1 pixel du côté gauche. Vous pouvez ensuite dupliquer ce calque 11 fois (de sorte que vous avez une rangée de 12 points au total) et déplacer chaque fois le point de 5 pixels vers le bas.
Vous pouvez maintenant fusionner toutes ces couches (à l'exception de l'arrière-plan.) Dupliquez cette nouvelle ligne de points 6 fois et déplacez-la à chaque fois vers la droite, 8 pixels.
En utilisant la première ligne créée, dupliquez-la une fois de plus et déplacez-la 4px à droite et 2px vers le bas. Cette nouvelle ligne peut également être dupliquée 6 fois et déplacée de 8 pixels vers la droite. Vous devriez maintenant avoir le fond du tableau de bord.
2) Trouvez un pack d’icônes similaire à celui utilisé dans ce tutoriel. Le mien a été trouvé à: http://www.smashingmagazine.com/2008/10/01/dellipack-2-a-free-icon-set/
3) Créez une zone de texte pour les icônes.
Créez une nouvelle image de 292 pixels (W) x 34 pixels (H) et créez un nouveau calque. Supprimer le calque d'arrière-plan. Maintenant, dessinez à nouveau un rectangle arrondi, comme nous l’avons fait pour l’icône. Toutefois, cette fois, il veut être 290 pixels (W) x 32 pixels (H) et faites-en une sélection en le remplissant de blanc. Définissez le remplissage de ce calque sur 10%. Il ne reste plus maintenant qu’à ajouter un trait blanc de 1 px. (J'ai mis un fond noir sur l'exemple que vous n'allez pas avoir, juste pour que vous puissiez voir à quoi il devrait ressembler)
Nous sommes maintenant prêts à mettre un peu de HTML et de CSS dans tout cela et à le fabriquer!
HTML et CSS
Pour construire cet exemple, vous aurez besoin de la dernière version de J-Query.
La première chose à faire est de préparer le code HTML. Nous allons avoir besoin de balises DIV, une comme un conteneur global de tout ce qui garantira que le tableau de bord couvre la largeur de la fenêtre du navigateur. L'autre servira de conteneur pour les icônes, en les maintenant dans une largeur de 945px. Cela permet de s'assurer qu'ils seront tous visibles sur les résolutions d'écran les plus courantes.
Vous pouvez voir ci-dessous que j'ai joint une feuille de style appelée index.css, j'ai ajouté quelques styles sur cette feuille de style afin de garantir que ces éléments DIV apparaîtront et fonctionneront comme je le souhaite.
L'image d'arrière-plan comporte une répétition-x afin de permettre à l'image de couvrir la largeur de la fenêtre du navigateur. La hauteur doit être la même que celle du fichier ratingRepeat.png que nous avons créé précédemment.
Le conteneur d’avance a une largeur de 945px afin de permettre au plus petit des résolutions d’écran de visualiser le tableau de bord dans son intégralité. Je conçois toujours mes sites Web avec un minimum de 1024 x 768, car il s'agit généralement de la résolution d'écran la plus courante au moment de la rédaction. De plus, grâce à margin: auto set sur le conteneur, le navigateur centre les icônes quelle que soit la largeur du navigateur. Pour que cela fonctionne, l'élément doit avoir une largeur définie.
Nous devons ensuite ajouter l’UL, qui contiendra toutes nos icônes.
Comme vous pouvez le constater, chaque classe LI est associée à une classe différente. Cela nous permet d’attribuer différents attributs à chaque icône. Assurez-vous de nommer vos classes pour qu'elles correspondent à l'icône afin de comprendre où placer tout.
Nous allons d’abord passer en revue les domaines principaux du style sur les UL et les LI.
Tout d’abord, le style de liste UL: aucun élément ne supprime les puces non désirées. J'ai également mis un padding: 0 et une marge: 0 ici, cela devrait arrêter tout problème de compatibilité de navigateur, plaçant des éléments dans des zones inattendues. J'ai attribué ces attributs à l'ensemble du site UL, car nous en utiliserons un autre ultérieurement et ces paramètres s'appliqueront également.
Sur le advanceList spécifiquement j'ai choisi de positionner les icônes en utilisant la méthode float. (Je trouve que cela me donne le plus grand contrôle sur le positionnement.) La largeur est importante lorsqu’elle flotte pour assurer un positionnement précis. J'ai choisi 645 pixels, car nous devons laisser de la place pour la zone des conseils, qui sera ajoutée ultérieurement.
Les LI dans cette UL ont ensuite reçu une hauteur et une largeur (les mêmes hauteur et largeur que les icônes), puis flottant à gauche. Cela fait placer le LI sur une ligne horizontale remplaçant l’alignement vertical par défaut de UL. La marge gauche est placée sur chaque LI, ce qui signifie qu’il y aura un espace de 15 pixels entre chaque icône.
La prochaine section de CSS doit être répétée et légèrement modifiée pour chaque classe d'icônes. Je vais inclure un exemple à titre indicatif. C'est très simple, définissez l'arrière-plan sur icon.png, puis définissez l'arrière-plan de l'état de survol de l'icône. Cela signifie que lorsque l'icône est survolée (dans tous les navigateurs sauf IE6), l'icône change de couleur.
Assurez-vous de répliquer ceci en modifiant la classe pour chaque icône que vous choisissez d'utiliser. Assurez-vous également de changer l'image qu'ils utilisent comme arrière-plan.
Enfin, nous allons ajouter la zone Astuce et la styliser. Le code HTML est très similaire à celui du jeu d’icônes. Utiliser UL et LI. Cependant, nous n'utilisons qu'un seul LI avec une série de différentes CLASSES DIV.
Bien que cela puisse sembler un morceau de code intimidant, il est en réalité très simple. Chaque DIV correspond à une icône et, en utilisant CSS, une seule ou plusieurs DIV seront visibles à la fois. Assurez-vous de donner à chaque DIV une classe distincte relative à l'icône sur laquelle elle mettra en surbrillance. Ce sera nécessaire dans la prochaine étape.
Pour commencer, j'ai flotté l'UL à droite et lui ai donné une largeur. Cela positionnera la pointe à droite des icônes, car la largeur donnée à l'icône UL permet aux deux éléments de s'asseoir sur la même ligne.
J'ai ensuite donné un arrière-plan à la classe, en le chargeant dans le fichier textArea.png créé précédemment. Cela a été donné une hauteur pour lui permettre d'être visible.
J'ai toutes les classes DIV à afficher: aucune, ce qui signifie que chaque DIV de la LI sera initialement masquée. Nous utiliserons javascript pour les activer plus tard.
Chaque DIV a la même hauteur et la même largeur que textArea.png, afin de pouvoir positionner le texte avec précision. Text-align: center déplace tout le texte au milieu de la DIV et donc de la zone de texte. Enfin, la hauteur de ligne: 35px; assure que le texte est centré verticalement. Cette valeur différera en fonction de la taille de la police et du choix de la famille de polices. Des essais et des erreurs peuvent être nécessaires un peu ici.
Enfin, il faudra cliquer sur un bouton pour rendre le tableau de bord visible. En dehors des deux DIV, nous avons créé un lien et lui donnons une classe de advanceMenuBtn. Cela sera nécessaire lors de l'appel ultérieur dans le javascript.
Si vous le chargez dans un navigateur, vous pourrez voir le tableau de bord en haut et les icônes changeront de couleur lorsque vous placez votre mobile dessus, ce qui est très excitant!
Il est maintenant temps d'ajouter la fonctionnalité javascript. Assurez-vous de placer tous les codes javascript suivants dans les balises HEAD en haut de votre page.
Ce premier morceau de code active la visibilité du tableau de bord lorsque le bouton advanceMenuBtn est cliqué. Pour vous assurer que le tableau de bord commence invisible, vous devez maintenant placer un affichage: aucun sur l’avanceMenu DIV du CSS.
La deuxième ligne de cette partie configure la fonction pour qu'elle soit prête à être exécutée lorsque la page est prête et chargée, ce qui signifie qu'elle fonctionnera à tout moment où la page sera visible. La ligne suivante se concentre sur advanceMenuBtn et configure une autre fonction à exécuter lorsque ce bouton est cliqué. Lorsque JQuery est utilisé pour se concentrer sur des éléments, la syntaxe utilisée est très similaire à celle de CSS. Tout d'abord, vous déclarez le type d'élément avec le 'a', puis vous déclarez la classe en utilisant '.advanceMenuBtn.'
La ligne suivante appelle ensuite le tableau de bord et déclare la fonction à exécuter et indique une variable lui indiquant comment effectuer l'opération. slideToggle est une fonction JQuery intégrée au framework et associée à différentes variables de vitesse. Vous pouvez choisir entre lent, normal ou rapide. Le tableau de bord apparaît maintenant masqué lors de l'affichage de la page. En cliquant sur le lien, le tableau de bord apparaîtra.
La dernière pièce de javscript fera apparaître l’astuce dans la zone de texte lorsque l’utilisateur passe la souris au-dessus d’une icône. Encore une fois, ce script est très répétitif, je vais donc vous montrer un exemple qui doit être légèrement ajusté pour les autres icônes.
Ce script est encore très simple et très efficace. Une fois encore, la fonction est prête à être utilisée lors du chargement de la page, comme indiqué par la troisième ligne. La ligne suivante appelle ensuite l'icône avec une classe d'informations et définit une fonction à exécuter lorsque l'utilisateur place la souris dessus.
Ensuite, la classe qui affiche le morceau de texte associé à cette icône est centrée sur le message «.show» lorsque cela se produit. Cette fonction doit ensuite être inversée pour que d'autres extraits de texte puissent s'afficher lorsque d'autres icônes sont survolées.
Les dernières lignes font exactement l'inverse de la première fonction en remplaçant 'mouseover' par 'mouseout' et '.show' en '.hide'
Ces deux fonctions doivent ensuite être répétées pour chaque icône modifiant les classes appelées pour se coordonner avec l'icône en question.
Nous devrions maintenant être prêts à le voir fonctionner dans son intégralité!
Regardez la démo et téléchargez le code source complet ici
Bien fait et j'espère que vous pourrez utiliser cela à bon escient.
Veuillez noter qu'en raison de la non-compréhension de la fonction: hover par IE6, cet exemple sera d'une utilisation très limitée dans ce navigateur. Cependant, il existe des correctifs qui peuvent être trouvés en utilisant javascript supplémentaire.
Prosems - Solutions de conception et de développement de sites Web de commerce électronique