Codage d'un menu de navigation miettes de pain gracieux en CSS3
Les menus de navigation et les liens sont probablement les éléments d’interface les plus importants d’une présentation Web. Ce sont les seuls débouchés pour les utilisateurs à voyager entre les pages et interagissez avec tout le contenu que vous avez créé. Breadcrumb offre des fonctionnalités similaires avec l'avantage supplémentaire de suivi de votre position actuelle. tu pourras afficher tous les liens précédents au fur et à mesure que l'utilisateur traverse la hiérarchie de son site.
Dans ce tutoriel, nous allons créer un brillant menu de navigation 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 prennent pas en charge CSS3 le rendront toujours correctement dans la plupart des cas..
Avant de plonger dans le code, nous allons parler un peu des fonctionnalités de notre fil d'Ariane, tutoriel complet en un clin d'œil.!
Offrir le sentier
Un fil d'Ariane n'est pas plus complexe que n'importe quel autre menu. Nos styles utilisent des propriétés CSS beaucoup plus complexes que la plupart des exemples, mais notre modèle de base est toujours en place pour guider les utilisateurs d'une page à l'autre..
Dans cet exemple, nous recréerons un style similaire au menu de support de Google. Vous pouvez afficher leur menu sur la page d'assistance de Gmail pour avoir une idée de la direction que nous prenons. En fin de compte, nous voulons fournir notre meilleure expérience utilisateur pour tous les utilisateurs, indépendamment de leur système d'exploitation ou du logiciel de navigation, j'ai donc construit 2 exemples de code différents pour prendre en charge la dégradation en douceur parmi les navigateurs plus anciens.
Le premier est construit en utilisant images de fond personnalisées et alignements CSS appropriés. Tous les événements de survol et 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 créé un menu similaire avec des dégradés CSS, des coins arrondis et des ombres de boîte..
Si vous êtes inquiet au sujet des deux styles, vous pouvez choisir entre eux pour votre propre site. La plupart des visiteurs utiliseront les images par défaut, mais consultez votre outil d'analyse de site Web si vous souhaitez obtenir des données plus précises sur vos 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 requis 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, les CSS liées et tous les éléments de base. J'ai ajouté le code ci-dessous si vous souhaitez créer votre propre document de cette façon. Notez que cela ne devrait pas affecter l'affichage de votre fil d'Ariane. N'hésitez donc pas à utiliser votre propre modèle de page si vous le souhaitez..
Page par défaut
Je vais scinder le code en deux blocs différents. Le premier bloc avec des images est construit de manière légèrement différente, suivi de notre menu sans images. Chaque ensemble est donné son propre ID afin que nous puissions identifier le contenu beaucoup plus facilement. Si vous êtes aussi un fan de jQuery, vous pouvez utiliser le Sélecteur #ID manipuler tous les éléments internes du DOM.
Nous avons d'abord un contenant div avec l'identifiant “miette de pain“. Dans le fichier de démonstration, je l'ai utilisé 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 reformuler pour l'adapter au nouveau modèle. Cela ne fait pas de mal de laisser un conteneur car vous pourrez contrôler le positionnement beaucoup plus facilement..
En interne, j'ai construit la chapelure à l'aide d'une liste non ordonnée. Il y a tellement de façons uniques de personnaliser les listes HTML stylées, et la chapelure n'en est qu'un. Vous remarquerez peut-être que j'ai donné l'élément de liste initial un classe de “premier“. Cela est nécessaire pour un remplissage supplémentaire afin de garder les éléments de menu en ligne. En 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 le z-index propriété. En utilisant des images, nous aurons besoin de avoir chacun de nos liens se chevauchent pour afficher correctement la flèche de navigation Le moyen le plus simple d'y parvenir est ajustement de l'indice z donc chaque lien se superpose au suivant. J'ai commencé avec 9 et a travaillé à partir de là, mais si vous avez plus de liens dans votre menu, commencez simplement par un entier plus élevé.
Menu sans images
À dégrader gracieusement notre chapelure 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 ID 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 à IE et masquer ou afficher le menu qui convient le mieux - mais bien sûr, cette option est uniquement pour Internet Explorer.
fil d'ariane2 est notre nouvel identifiant utilisé pour cibler le menu sans images. Garder avec ce modèle que j'ai utilisé miettes2 en tant que classe pour la liste non ordonnée. Notez que la raison pour laquelle nous utilisons Des classes est pour son simplicité pour dupliquer ces menus, alors, quand vous voulez quelques chapelures différentes sur votre page, avec ces classes cela ne posera plus jamais de problème.
Nous avons gardé le .premier classe mais en plus ajouté .dernierclasse sur le dernier élément de la liste. Sans images, nous ne pouvons pas dupliquer les flèches pour chaque élément du menu de navigation, donc j’en ai utilisé coins arrondis pimenter le menu secondaire. .premier classe et .dernier manipulez le rayon de la bordure sur les bords de notre menu pour créer un style vraiment cool, à l'aspect Web 2.0.
Images de fond coulissantes CSS
Pour certains des effets les plus simples, j'ai associé les deux chapelures lors de la construction de propriétés. C’est utile car cela permet non seulement d’économiser de l’espace, mais lorsqu’on revient à l’édition des styles, c’est plus facile à personnaliser ton propre look.
Pour les deux #miette de pain et # breadcrumb2 J'ai mis style de liste: aucun; de sorte que tous les éléments internes n'auront pas de marqueurs. Vous pouvez les laisser si vous aimez l'effet, mais je trouvais que HTML devenait fastidieux et qu'il était beaucoup plus facile de créer de nouvelles icônes. Commençons donc avec notre .les miettes classe.
.miettes display: block; .crumbs li display: inline; .crumbs li.first padding-left: 8px; .crumbs li a, .crumbs li a: lien, .crumbs li a: visité color: # 666; bloc de visualisation; float: gauche; taille de police: 12px; marge gauche: -13px; remplissage: 7px 17px 11px 25px; position: relative; texte-décoration: aucun; .crumbs li un background-image: url ('… /img/bg-crumbs.png'); répétition de fond: non répétée; position de fond: 100% 0; position: relative; .crumbs li a: survol color: # 333; position d'arrière-plan: 100% -48px; curseur: pointeur; .crumbs li a: active color: # 333; position d'arrière-plan: 100% -96px; .crumbs li.first a span height: 29px; largeur: 3px; border-left: 1px solid # d9d9d9; position: absolue; en haut: 0px; gauche: 0px; nous définir notre liste non ordonnée à bloc donc rien d'autre ne se glisse dans la région. Notez que les éléments de la liste sont affiché en ligne tandis que chaque lien d'ancrage dispose de beaucoup plus d'espace pour s'étendre. Nous voulons que tous les espaces de notre menu soient cliquables, cela nécessite donc construire nos ancres en blocs.
J'ai utilisé une image appelée bg-crumbs.png pour le fond. Ceci est connu comme une simple feuille de sprite en CSS, ou alternativement portes coulissantes technique. Cela signifie que lorsque l'utilisateur survole ou clique sur un lien, nous modifions la position de l'arrière-plan pour afficher le style mis à jour. Cette image unique contient les 3 dessins dont nous avons besoin pour créer les arrière-plans de fil d'Ariane à différentes positions, afin que nous puissions utiliser le position de fond propriété à déplacer en fonction de l'interaction de l'utilisateur.
Effets personnalisés avec CSS3
La conception originale du fil d'Ariane est beaucoup plus simple à créer. Cela se remarque car de nombreuses propriétés CSS sont plus élémentaires que vous ne l'imaginez, mais nous commençons maintenant à nous concentrer sur la duplication de ces effets avec uniquement CSS3.!
Les styles individuels prennent beaucoup de place, je vais donc les décomposer en 2 blocs de code.
.miettes2 display: block; marge gauche: 27px; rembourrage: 0; rembourrage en haut: 10px; .crumbs2 li display: inline; .crumbs2 li a, .crumbs2 li a: lien, .crumbs2 li a: visité color: # 666; bloc de visualisation; float: gauche; taille de police: 12px; remplissage: 7px 16px 7px 19px; position: relative; texte-décoration: aucun; bordure: 1px solide # d9d9d9; border-right-width: 0px; : image d'arrière-plan: -moz-linear-gradient (centre bas, rgb (241,241,241) 45%, rgb (245,245,245) 73%); / * Pour Internet Explorer 5.5 - 7 * / filter: 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-top-left-radius: 5px; -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; .crumbs2 li.last a border-right-width: 1px; border-bottom-right-radius: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px;
le .miettes2 le menu utilise Gradients CSS dupliquer les effets de fond. Si vous ne les connaissez pas, je vous recommande vivement le guide CSS Tricks sur les dégradés CSS3, qui devrait vous permettre d'utiliser efficacement les dégradés CSS3. Ils ont inclus quelques propriétés supplémentaires pour les navigateurs Microsoft et Opera, mais elles ne sont pas entièrement prises 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 la plupart du travail. J'ai inclus l'ancien code pour les anciennes versions d'Internet Explorer, mais ce n'est pas garanti pour afficher correctement tout le temps (nous utilisons après tout de puissantes techniques de rendu d’image). Notez que j'ai défini les codes de couleurs RVB et hexa entre les propriétés de l'arrière-plan. Vous pouvez vous en tenir à l'une ou l'autre méthode si vous êtes plus à l'aise.
le rayon de la frontière le code est uniquement appliqué à notre navigation secondaire. Cela donne un effet soigné en haut à gauche et en bas à droite de notre menu de chapelure. La barre semble presque sortir de la page - un effet fantastique sur les navigateurs prenant en charge les styles, mais ceux-ci ne couvrent que les états par défaut de nos liens. Maintenant, construisons des effets de survol similaires aux images que nous avons utilisées ci-dessus.
CSS3 Bordures et Ombres
Chaque fois qu'un utilisateur survole un lien, nous souhaitons 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. Ceci peut être vu dans les images aussi bien pour le survol que pour les états actifs.
.miettes2 li a: survoler border-top-color: # c4c4c4; border-bottom-color: # c4c4c4; background-image: -webkit-gradient (linéaire, en bas à gauche, en haut à gauche, couleur-stop (0,45, rgb (241,241,241))), couleur-stop (0,73, rgb (248,248,248))); image d'arrière-plan: -moz-linear-gradient (centre bas, rgb (241,241,241) 45%, rgb (248,248,248) 73%); / * Pour Internet Explorer 5.5 - 7 * / filter: 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; box-shadow: 0px 2px 2px # e8e8e8; .crumbs2 li a: active border-top-color: # c4c4c4; border-bottom-color: # c4c4c4; background-image: -webkit-gradient (linéaire, en bas à gauche, en haut à gauche, couleur-stop (0,45, rgb (224,224,224)), couleur-stop (0,73, rgb (235,235,235))); image d'arrière-plan: -moz-linear-gradient (centre bas, rgb (224,224,224) 45%, rgb (235,235,235) 73%); / * Pour Internet Explorer 5.5 - 7 * / filter: Progid: DXImageTransform.Microsoft.gradient (startColorstr = # ebebeb, endColorstr = # e0e0e0); / * Pour Internet Explorer 8 * / -ms-filter: "Progid: DXImageTransform.Microsoft.gradient (startColorstr = # ebebeb, endColorstr = # e0e0e0)"; box-shadow: -1px 1px 1px 0px #dadada inset; -webkit-box-shadow: -1px 1px 1px 0px #dadada inset; -moz-box-shadow: -1px 1px 1px 0px #dadada inset; couleur: # 333;
J'utilise exactement le même code de dégradé que ci-dessus, mais cette fois, les couleurs sont très différentes si vous remarquez nos valeurs RVB. Chacun des états assombrit la couleur du texte pour # 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 gaufré brillant qui couplé avec bordures assombries donne les styles de page popup. Si vous cliquez et maintenez enfoncé, vous passerez à l'état actif qui comporte un dégradé de fond sombre. Cet effet fait que les boutons ont l’air qu’ils sont réellement “pressé” dans la page.
Nous postons aussi boîte ombre propriétés 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 un ombre légère sortant du bas du lien sélectionné. Lorsqu'elle est activée, l'ombre sera formée sur les bordures supérieure, droite et inférieure. Cet effet est créé avec le encart mot-clé 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 en 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é les arrière-plans d'origine et utilisé Adobe Photoshop pour créer quelques variantes que vous pouvez appliquer à votre propre site Web..
Celles-ci les fichiers bonus sont inclus dans le fichier source que vous pouvez télécharger au format .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 schéma de couleurs spécifique, ouvrez Photoshop> Image> Réglages> Teinte / Saturation pour modifier le schéma de couleurs en fonction de votre propre modèle, rappelez-vous de cocher l'option Coloriser dans le volet Teinte / Saturation si la couleur ne change pas du tout.
Conclusion
Ce tutoriel aurait dû vous familiariser avec certaines des nouvelles techniques CSS3. Nous avons créé deux fantastiques menus de chapelure au style similaire et conçus de manière à ce qu’ils puissent se dégrader avec élégance dans les anciens navigateurs. De plus, j'ai proposé mon code de démonstration et des 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 didacticiel? S'il vous plaît partagez vos pensées avec nous dans la zone de discussion ci-dessous, et n'oubliez pas de télécharger les fichiers source pour pouvoir jouer avec la démo!
Plus de tutoriels CSS3
Envie de plus de CSS3? Ci-dessous sont nos articles pour vous permettre de comprendre CSS3 théoriquement et pratiquement!
- CSS3: créer un logo de flux RSS
- CSS3: Créer un champ de recherche
- CSS3: Créer un formulaire de contact AJAX
- CSS3: création de pages Web HTML5 / CSS3
