Codage d'un menu de navigation gracieux dans CSS3

Cet article fait partie de notre "série de tutoriels HTML5 / CSS3" - destiné à vous aider à devenir un meilleur concepteur et / ou développeur. Cliquez ici pour voir plus d'articles de la même série.

Les menus de navigation et les liens sont probablement les éléments d'interface les plus importants pour une mise en page Web. Ce sont les seuls points de vente permettant aux utilisateurs de voyager entre les pages et d'interagir avec tout le contenu que vous avez créé. Breadcrumb offre des fonctionnalités similaires avec l'avantage supplémentaire de suivre votre position actuelle . Vous serez en mesure d' afficher tous les chemins de lien précédents lorsque l'utilisateur traverse la hiérarchie de votre site.

Dans ce tutoriel, nous allons créer un menu de navigation géniale avec quelques effets CSS3. Cela a été testé pour fonctionner dans tous les principaux navigateurs compatibles CSS3, même les navigateurs plus anciens qui ne supportent pas CSS3 le rendront correctement dans la plupart des cas.

Avant de plonger dans le code, nous parlerons un peu de la fonctionnalité de notre fil d'Ariane, un tutoriel complet lors d'un saut!

Offrir le sentier

Un fil d'Ariane n'est pas plus complexe que n'importe quel autre menu. Nos styles utiliseront des propriétés CSS beaucoup plus complexes que la plupart des exemples, mais notre modèle de bare-bones est toujours en place pour guider les utilisateurs d'une page à l'autre.

Dans cet exemple, nous allons recréer un style similaire à celui du menu de support de Google. Vous pouvez voir leur menu sur la page d'assistance Gmail pour avoir une idée de l'endroit où nous nous dirigeons. En fin de compte, nous voulons offrir notre meilleure expérience utilisateur à tous les utilisateurs, quel que soit leur système d'exploitation ou leur logiciel de navigation. J'ai donc créé deux exemples de code différents pour prendre en charge la dégradation progressive des anciens navigateurs .

Le premier est construit en utilisant des images d'arrière-plan personnalisées et des alignements CSS appropriés . Tous les événements hover et les événements actifs sont préconstruits avec seulement quelques styles CSS, mais les utilisateurs dont les images sont désactivées ne pourront pas ressentir ces effets! C'est pourquoi j'ai également construit un menu similaire avec des dégradés CSS, des coins arrondis et des ombres en boîte.

Si vous êtes nerveux au sujet de soutenir les deux styles, vous pouvez choisir entre eux pour votre propre site. La plupart des visiteurs utiliseront des images par défaut, mais en explorant votre outil d'analyse de site Web si vous voulez des données plus précises sur les visiteurs.

Assez de mots, sautons dans le projet ! Nous allons commencer par construire le framework HTML de base et passer à différents effets de style. Tout d'abord, vous devez télécharger l'image requise pour le projet.

Bare-Bones HTML

Je commence mon document avec le modèle de page HTML5 standard . Cela inclut le doctype par défaut, le CSS lié et tous les éléments de base. J'ai ajouté le code ci-dessous si vous voulez démarrer votre propre document de cette façon. Notez que cela ne devrait pas affecter la façon dont votre fil d'Ariane est affiché, alors n'hésitez pas à utiliser votre propre modèle de page si vous le souhaitez.

Je vais diviser le code en deux blocs différents. Le premier bloc avec des images est construit d'une manière légèrement différente, suivi de notre menu sans images. Chaque ensemble reçoit son propre identifiant afin que nous puissions identifier le contenu beaucoup plus facilement. Si vous êtes également un fan de jQuery, vous pouvez utiliser le sélecteur #ID pour manipuler tous les éléments DOM internes.

Nous avons d'abord un div contenant avec l'id " breadcrumb ". Dans le fichier démo, j'ai utilisé ceci pour séparer notre code et le déplacer sur la page avec des marges supplémentaires. Vous pouvez supprimer cette div externe, mais vous devrez tout re-style pour s'adapter au nouveau modèle. Cela ne fait pas de mal de quitter un conteneur puisque vous serez en mesure de contrôler le positionnement beaucoup plus facile.

En interne, j'ai construit la chapelure en utilisant une liste non ordonnée. Il y a tellement de manières uniques de personnaliser les listes HTML stylisées, et les fils d'Ariane en font partie. Vous remarquerez peut-être que j'ai donné à l'élément de liste initial une classe de " premier ". Ceci est nécessaire pour un rembourrage supplémentaire pour garder les éléments de menu en ligne. De plus, un petit bloc span est ajouté afin que nous ayons une bordure gauche appropriée qui ne chevauche pas l'image d'arrière-plan.

De plus, chaque lien d'ancrage est planté avec un nombre décroissant pour la propriété z-index . À l'aide d'images, nous devrons faire chevaucher chacun de nos liens pour afficher la flèche du fil d'Ariane correctement. Le moyen le plus simple d'y parvenir consiste à ajuster l'index z de façon à ce que chaque lien soit superposé le suivant. J'ai commencé avec 9 et j'ai travaillé à partir de là, mais si vous avez plus de liens dans votre menu, commencez par un nombre entier supérieur.

Menu sans images

Pour dégrader gracieusement notre fil d'Ariane, nous avons besoin d'un ensemble secondaire d'éléments de liste HTML. Si vous essayez de vous replier sur une seule navigation, vous pouvez utiliser jQuery pour détecter l'agent de navigateur et appliquer un identifiant en conséquence. Malheureusement, ce n'est pas toujours fiable (pour certains utilisateurs mobiles, par exemple). Une autre solution consiste à inclure une feuille de style spécifique à Internet Explorer et à masquer ou à afficher le menu qui fonctionne le mieux, mais bien sûr, cette option est uniquement pour Internet Explorer.

breadcrumb2 est notre nouvel identifiant utilisé pour cibler le menu sans images. En gardant ce modèle, j'ai utilisé crumbs2 comme classe pour la liste non ordonnée. Notez que la raison pour laquelle nous utilisons des classes est de simplifier la duplication de ces menus . Ainsi, lorsque vous souhaitez ajouter un peu de fil d'Ariane sur votre page, cela ne deviendra jamais un problème avec ces classes.

Nous avons gardé la classe .first mais en plus ajouté la classe .last sur l'élément final de la liste. Sans images nous ne pouvons pas dupliquer les flèches pour chaque élément du menu de navigation, ainsi j'ai utilisé quelques coins arrondis pour pimenter le menu secondaire. .first class et .last manipulent le rayon de la bordure sur les bords de notre menu pour créer un style web 2.0 vraiment cool.

Images de fond coulissantes CSS

Pour certains des effets les plus simples, j'ai couplé les deux chapelures lors de la construction des propriétés. Ceci est utile car cela permet non seulement d'économiser de l'espace, mais lorsque vous modifiez les styles, il est plus facile de personnaliser votre propre apparence.

Pour #breadcrumb et #breadcrumb2 j'ai défini le list-style: none; donc tous les éléments internes n'auront pas de marqueurs. Vous pouvez les laisser si vous aimez l'effet, mais j'ai trouvé que le HTML devient fastidieux et qu'il est beaucoup plus facile de créer de nouvelles icônes. Commençons donc avec notre classe .crumbs .

 .crumbs {display: block; } .crumbs li {display: inline; } .crumbs li.first {padding-left: 8px; } .crumbs li a, .crumbs li un: link, .crumbs li a: visited {color: # 666; bloc de visualisation; float: à gauche; taille de police: 12px; marge gauche: -13px; rembourrage: 7px 17px 11px 25px; position: relative; text-decoration: aucun; } .crumbs li a {background-image: url ('../ img / bg-crumbs.png'); background-repeat: pas de répétition; background-position: 100% 0; position: relative; } .crumbs li a: hover {couleur: # 333; background-position: 100% -48px; curseur: pointeur; } .crumbs li a: active {color: # 333; background-position: 100% -96px; } .crumbs li.first un span {height: 29px; largeur: 3px; border-left: 1px solide # d9d9d9; position: absolue; en haut: 0px; gauche: 0px; } 

Nous mettons notre liste non ordonnée à bloquer afin que rien d'autre ne se glisse autour de la zone. Remarquez que les éléments de la liste sont affichés en ligne alors que chaque lien d'ancrage a beaucoup plus de place pour s'étaler. Nous voulons que tout l'espace de notre menu soit cliquable, ce qui nécessite de construire nos ancres en tant qu'éléments de bloc .

J'ai utilisé une image appelée bg-crumbs.png pour l'arrière-plan. Ceci est connu comme une simple feuille de sprite en CSS, ou encore une technique de portes coulissantes . Cela signifie que lorsque l'utilisateur survole ou clique sur un lien, nous décalons la position d'arrière-plan pour afficher le style mis à jour. Cette image unique contient les trois dessins dont nous avons besoin pour créer les arrière-plans du fil d'Ariane à différentes positions, ce qui nous permet d'utiliser la propriété background-position pour la relocaliser en fonction de l'interaction de l'utilisateur.

Effets personnalisés avec CSS3

La conception de fil d'Ariane originale est beaucoup plus simple à créer. Cela est remarquable car beaucoup de propriétés CSS sont plus basiques que vous ne l'imaginez, mais maintenant nous commençons à nous concentrer sur la duplication de ces effets avec seulement CSS3!

Les styles individuels occupent beaucoup d'espace, donc je vais les décomposer en deux blocs de code.

 .crumbs2 {display: block; marge gauche: 27px; rembourrage: 0; rembourrage-top: 10px; } .crumbs2 li {display: inline; } .crumbs2 li a, .crumbs2 li a: lien, .crumbs2 li a: visited {color: # 666; bloc de visualisation; float: à gauche; taille de police: 12px; rembourrage: 7px 16px 7px 19px; position: relative; text-decoration: aucun; bordure: 1px solide # d9d9d9; border-right-largeur: 0px; } .crumbs2 li a {background-image: -webkit-gradient (linéaire, gauche en bas, en haut à gauche, arrêt de couleur (0.45, rgb (241, 241, 241)), arrêt de couleur (0, 73, rgb (245, 245, 245))); background-image: -moz-linear-gradient (centre du bas, rgb (241, 241, 241) 45%, rgb (245, 245, 245) 73%); / * Pour Internet Explorer 5.5 - 7 * / filtre: progid: DXImageTransform.Microsoft.gradient (startColorstr = # f1f1f1, endColorstr = # f5f5f5); / * Pour Internet Explorer 8 * / -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = # f1f1f1, endColorstr = # f5f5f5)"; } .crumbs2 li.first a {border-haut-gauche-rayon: 5px; -moz-border-rayon-topleft: 5px; -webkit-border-top-left-rayon: 5px; } .crumbs2 li.last a {border-right-largeur: 1px; border-bottom-right-rayon: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-rayon: 5px; } 

Le menu .crumbs2 utilise des dégradés CSS pour dupliquer les effets d'arrière-plan. Si vous n'êtes pas familier avec ceux-ci, je recommande fortement le guide des Trucs CSS sur les dégradés CSS3 qui devrait vous aider à utiliser efficacement les dégradés CSS3. Ils ont inclus quelques propriétés supplémentaires pour les navigateurs Microsoft et Opera, mais ils ne sont pas entièrement pris en charge dans tous les cas. Je ne les ai pas inclus dans le code de démonstration ici - mais il est bon de comprendre toutes les options.

-webkit-gradient et -moz-linear-gradient sont les solutions de base qui font le plus de travail. J'ai inclus du code hérité pour les anciennes versions d'Internet Explorer, mais il n'est pas certain que l'affichage se fasse correctement (nous utilisons des techniques puissantes de rendu d'image, après tout). Notez que j'ai défini les codes de couleur RVB et hexadécimal entre les propriétés d'arrière-plan. Vous pouvez vous en tenir à une méthode ou à l'autre si vous êtes plus à l'aise.

Le code de limite de frontière est seulement appliqué à notre navigation de fil d'Ariane secondaire. Cela donne un effet net en haut à gauche et en bas à droite de tout notre menu. La barre semble presque sortir de la page - un effet vraiment fantastique sur les navigateurs qui supportent les styles, mais ceux-ci ne couvrent que les états par défaut de nos liens. Maintenant, construisons des effets hover semblables aux images que nous avons utilisées ci-dessus.

CSS3 Frontières et Ombres

Chaque fois qu'un utilisateur survole un lien, nous voulons mettre à jour quelques éléments. Nous devons d'abord assombrir les couleurs de la bordure en haut et en bas de notre élément actif . Cela peut être vu dans les images aussi bien pour les états stationnaires que pour les états actifs.

 .crumbs2 li a: hover {border-top-color: # c4c4c4; border-bottom-color: # c4c4c4; background-image: -webkit-gradient (linéaire, gauche en bas, en haut à gauche, arrêt de couleur (0.45, rgb (241, 241, 241)), arrêt de couleur (0.73, rgb (248, 248, 248))); background-image: -moz-linear-gradient (centre du bas, rgb (241, 241, 241) 45%, rgb (248, 248, 248) 73%); / * Pour Internet Explorer 5.5 - 7 * / filtre: progid: DXImageTransform.Microsoft.gradient (startColorstr = # f8f8f8, endColorstr = # f1f1f1); / * Pour Internet Explorer 8 * / -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = # f8f8f8, endColorstr = # f1f1f1)"; couleur: # 333; -moz-box-shadow: 0px 2px 2px # e8e8e8; -webkit-box-shadow: 0px 2px 2px # e8e8e8; boîte-ombre: 0px 2px 2px # e8e8e8; } .crumbs2 li a: actif {border-top-color: # c4c4c4; border-bottom-color: # c4c4c4; background-image: -webkit-gradient (linéaire, gauche en bas, en haut à gauche, arrêt de couleur (0.45, rgb (224.224.224)), arrêt de couleur (0.73, rgb (235.235.235))); background-image: -moz-linear-gradient (centre du bas, rgb (224, 224, 224) 45%, rgb (235, 235, 235) 73%); / * Pour Internet Explorer 5.5 - 7 * / filtre: progid: DXImageTransform.Microsoft.gradient (startColorstr = # ebebeb, endColorstr = # e0e0e0); / * Pour Internet Explorer 8 * / -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = # ebebeb, endColorstr = # e0e0e0)"; boîte-ombre: -1px 1px 1px 0px #dadada inset; -webkit-box-shadow: -1px 1px 1px 0px #dadada inser; -moz-boîte-ombre: -1px 1px 1px 0px #dadada encart; couleur: # 333; } 

J'utilise exactement le même code de dégradé que celui que nous avons utilisé ci-dessus, mais cette fois les couleurs sont très différentes si vous avez remarqué nos valeurs RVB. Chacun des états assombrit la couleur du texte à #333, mais d'autres descripteurs ont été légèrement modifiés pour correspondre aux commandes de l'utilisateur.

En vol stationnaire, vous verrez un effet de relief brillant qui, couplé à des bordures assombries, donne les styles de popup de la page. Si vous cliquez et maintenez, vous passerez à l'état actif qui comporte un dégradé de fond assombri . Cet effet fait que les boutons ont l'air d'être "pressés" dans la page.

Nous appliquons également des propriétés box-shadow à partir des nouvelles spécifications CSS3. -webkit, -moz et les styles par défaut sont utilisés avec les mêmes paramètres. Le survol affiche une ombre légère sortant du bas du lien sélectionné. Une fois active, l'ombre sera formée sur les bordures supérieure, droite et inférieure. Cet effet est créé avec le mot clé inset ajouté à la fin de chaque ligne de propriété box-shadow. Encore une fois, CSS Tricks est votre meilleur ami ici avec un article génial sur box-shadow, car il parle de la syntaxe et de son utilisation correcte dans CSS3.

Bonus: plus de styles

En plus du code du didacticiel, j'ai inclus des images d'arrière-plan supplémentaires avec des schémas de couleurs adaptés. J'ai échantillonné à partir des arrière-plans d'origine et utilisé Adobe Photoshop pour créer quelques variations que vous pouvez appliquer dans votre propre site Web.

Ces fichiers bonus sont inclus dans le fichier source que vous pouvez télécharger au format d'archive .zip dans la section ci-dessous.

Vous pouvez consulter l'image ci-dessus pour avoir une idée de ce dont je parle. Si vous avez besoin d'un jeu de couleurs spécifique, ouvrez Photoshop> Image> Ajustements> Teinte / Saturation pour modifier le jeu de couleurs afin qu'il corresponde à votre propre modèle, n'oubliez pas de cocher l'option Coloriser dans le volet Teinte / Saturation si la couleur n'a pas changé du tout .

Conclusion

Ce tutoriel devrait vous avoir familiarisé avec certaines des nouvelles techniques CSS3. Nous avons créé deux menus de fil d'Ariane fantastiques de la même manière et l'avons construit de manière à pouvoir se dégrader avec élégance dans les anciens navigateurs. De plus, j'ai offert mon code démo et quelques images bonus pour que vous puissiez jouer avec.

Aimez-vous particulièrement les styles que nous avons construits ici? Ou peut-être avez-vous des questions ou des idées sur la façon d'améliorer le code du tutoriel? S'il vous plaît partager vos pensées avec nous dans la zone de discussion ci-dessous, et n'oubliez pas de télécharger les fichiers source afin que vous puissiez jouer avec la démo!

Plus de tutoriels CSS3

Envie de plus de CSS3? Voici nos articles pour vous permettre de comprendre CSS3 théoriquement et pratiquement!

• CSS3: créer un flux RSS Logo
• CSS3: Créer un champ de recherche
• CSS3: Créer un formulaire de contact AJAX
• CSS3: Création de pages Web HTML5 / CSS3

Créez des graphiques animés avec Google Data GIF Maker

Les tableaux de données ne sont pas exactement les choses les plus intéressantes à regarder, en particulier celles qui débordent de données. Si vous trouvez que le tableau de données standard est incapable de garder votre attention, Google a un nouvel outil disponible qui peut être en mesure de résoudre ce problème. C'e

(Conseils techniques et de conception)

Aide Recherche pour MH370 par Tomnod Satellite Images

Le vol MH370 de Malaysia Airlines, transportant 239 passagers et membres d'équipage en route de Kuala Lumpur à Beijing, a disparu tôt samedi matin, quelques heures après son départ. Cinq jours après, malgré une énorme mission de recherche et de sauvetage d'avions et de navires de 12 pays (jusqu'à présent), on ne sait toujours pas où se trouve l'avion .Face à une

(Conseils techniques et de conception)