#crumbs ul li a ( display : block ; float : left ; height : 50px ; background : #3498db ; text-align : center ; padding : 30px 40px 0 40px ; position : relative ; margin : 0 10px 0 0 ; font-size : 20px ; décoration de texte : aucune ; couleur : #fff ; )

Le code CSS initial donne à chaque ancre d’élément de liste un style de rectangle bleu soigné. Le texte est centré et un remplissage égal est ajouté de tous les côtés. Afin de positionner les éléments absolument suivants, ces éléments ont la propriété position: relative; ajoutée afin que ces éléments positionnés de manière absolue soient rendus par rapport à cet élément parent.

#crumbs ul li a:after ( content : "" ; border-top : 40px rouge uni ; border-bottom : 40px rouge uni ; border-left : 40px bleu uni ; position : absolue ; droite : -40px ; top : 0 ; )

Nous allons maintenant créer un effet chevron en CSS, qui n'était auparavant réalisable qu'à l'aide d'une image d'arrière-plan. Utilisez le sélecteur:after pour créer un élément supplémentaire pouvant être stylisé individuellement. La forme du triangle est créée à l'aide de diverses bordures CSS. Ainsi, comme vous pouvez le voir dans l'image précédente, un triangle bleu peut être créé en appliquant les bordures supérieure et inférieure pour couper la zone de recouvrement. Ces bordures sont colorées en rouge pour plus de clarté, mais si elles sont transparentes, vous obtiendrez un triangle bleu. Cet effet de bordure est ensuite mis en place à l’aide d’un positionnement absolu.

Bordure supérieure : 40px solide transparent ; border-bottom : 40px solide transparent ; bordure gauche : 40px solide #3498db ;

Un effet de bordure avec les bonnes valeurs de couleur créera le triangle souhaité qui donnera au fil d'Ariane la forme populaire de chevron.

#crumbs ul li a:before ( content : "" ; border-top : 40px solid transparent ; border-bottom : 40px solid transparent ; border-left : 40px solid #d4f2ff ; position : absolue ; left : 0 ; top : 0 ; )

En utilisant les mêmes principes, une autre forme triangulaire peut être appliquée sur le côté gauche du fil d’Ariane. Cette fois, la couleur de la bordure est définie sur la même couleur que la couleur d'arrière-plan pour masquer certaines parties de la couleur d'arrière-plan bleue du lien.

Rembourrage : 30px 40px 0 80px ;

Au fur et à mesure que vous ajoutez des liens vers le HTML, la séquence de fils d'Ariane augmente, séparée par des formes de chevron intéressantes grâce à l'effet de bordure CSS triangulaire et une petite marge droite.

#crumbs ul li:premier-enfant a ( border-top-left-radius: 10px ; border-bottom-left-radius: 10px ; ) #crumbs ul li:first-child a:before ( display : none ; ) #crumbs ul li:last-child a ( padding-right : 80px ; border-top-right-radius : 10px ; border-bottom-right-radius : 10px ; ) #crumbs ul li:last-child a:after ( display : aucun ; )

Le bloc complet de fil d'Ariane peut être stylisé davantage en supprimant l'effet triangle du premier et du dernier élément à l'aide des sélecteurs :first-child et :last-child, suivi d'un léger arrondi des coins à l'aide de la propriété border-radius.

#crumbs ul li a:hover ( background : #fa5ba5 ; ) #crumbs ul li a:hover :after ( border-left-color : #fa5ba5 ; )

Il ne reste plus qu'à appliquer un effet de survol aux liens. Assurez-vous de modifier la propriété border-left-color pour l'effet triangle en survol afin que tous les fils d'Ariane changent de couleur.

Traduction – Salle de garde

Si vous pensez disposer de beaucoup de matériel, il est recommandé d’activer cette fonctionnalité. Le style de liste ne consistera pas à éviter le point noir de liste ou tout autre style par défaut. Puisqu'il le distribue en catégories et certainement en modules, à partir de la page principale, et tout cela est présenté de manière élégante. Dans ce matériau, vous voyez une sélection faite dans un style similaire, c'est dans un style plat.

Ils ont une forme complètement différente, que quelqu'un n'aura même pas besoin de modifier pour s'adapter à son design, puisqu'il s'y intégrera parfaitement. Nous allons maintenant utiliser du code CSS pour créer l'ancre de la première liste et définir l'ancre du dernier enfant pour la définir par défaut afin que le tringle n'apparaisse pas dans l'ancre du premier enfant pour l'ancre du côté gauche et du dernier. enfant pour l'ancre du côté droit.

Faire de la chapelure

1. Dans une teinte jaune clair :

2. Palette lumineuse aux tons verts :

3. En couleur framboise

4. Réalisé dans une palette bleue :

Ce sera une simple liste droite avec un arrière-plan, un remplissage et quelques autres styles. Après cela, je créerai une structure triangulaire sur le côté droit de chaque ancre de liste en utilisant CSS, en jouant avec les propriétés broder.

Comme vous pouvez le voir dans la version démo, lorsque nous pointons une ancre de liste vers les coffres à panure, cela donne l'effet qui signifiera visité ou être dans cette section.

Ou nous pouvons considérer son effet comme le rendant actif comme un fil d’Ariane actif. Vous pouvez dire que ces fils d'Ariane CSS ne sont que des fils d'Ariane car je n'utiliserai que CSS et CSS3 pour créer ces fils d'Ariane.

Commençons l'installation :

Le style de liste ne consistera pas à éviter le point noir de liste ou tout autre style par défaut. Chaque div en ligne de liste sera list-inline, pour en faire une liste horizontale en utilisant l'affichage CSS : list-inline.

#breadcrumb-isanchogives1 (
alignement du texte : centre ;
marge supérieure : 30 px ;
}

#breadcrumb-isanchogives1 ul (
style de liste : aucun ;
affichage : tableau en ligne ;
}
#breadcrumb-isanchogives1 ul li (
affichage : en ligne ;
}

#breadcrumb-isanchogives1 ul li a (
bloc de visualisation;
flotteur : gauche ;
hauteur : 50px ;
arrière-plan : #ffd928 ;
alignement du texte : centre ;
remplissage : 30px 40px 0 80px ;
position : relative ;
marge : 0 10px 0 0 ;

Taille de la police : 20 px ;
décoration de texte : aucune ;
couleur : #fff ;

}
#breadcrumb-isanchogives1 ul li a:après (
contenu: "";

bordure gauche : 40px solide #ffd928 ;
indice z : 1 ;

#breadcrumb-isanchogives1 ul li a:avant (
contenu: "";
bordure supérieure : 40 px solide transparent ;
bordure inférieure : 40 px solide transparent ;

}

#breadcrumb-isanchogives1 ul li:premier-enfant a (
}
#breadcrumb-isanchogives1 ul li:premier-enfant a:avant (
affichage : aucun ;
}

#breadcrumb-isanchogives1 ul li:dernier-enfant a (
remplissage à droite : 80 px ;
}
#breadcrumb-isanchogives1 ul li:dernier-enfant a:après (
affichage : aucun ;
}

#breadcrumb-isanchogives1 ul li a:hover (
arrière-plan : #ff9a2d ;
}
#breadcrumb-isanchogives1 sur li a.wesove-readcrum(
arrière-plan : #ff9a2d ;
}
#breadcrumb-isanchogives1 ul li a:hover:after (
couleur de la bordure gauche : #ff9a2d ;
}
#breadcrumb-isanchogives1 ul li a.wesove-readcrum:after (
couleur de la bordure gauche : #ff9a2d ;
}

#breadcrumb-isanchogives2 (
alignement du texte : centre ;
marge supérieure : 30 px ;
}

#breadcrumb-isanchogives2 ul (
style de liste : aucun ;
affichage : tableau en ligne ;
}
#breadcrumb-isanchogives2 ul li (
affichage : en ligne ;
}

#breadcrumb-isanchogives2 ul li a (
bloc de visualisation;
flotteur : gauche ;
hauteur : 50px ;
arrière-plan : #56e9ae ;
alignement du texte : centre ;
remplissage : 30px 40px 0 80px ;
position : relative ;
marge : 0 10px 0 0 ;

Taille de la police : 20 px ;
décoration de texte : aucune ;
couleur : #fff ;

}
#breadcrumb-isanchogives2 ul li a:après (
contenu: "";
bordure supérieure : 40 px solide transparent ;
bordure inférieure : 40 px solide transparent ;
bordure gauche : 40px solide #56e9ae ;
position : absolue ; à droite : -40px ; haut : 0 ;
indice z : 1 ;

#breadcrumb-isanchogives2 ul li a:avant (
contenu: "";
bordure supérieure : 40 px solide transparent ;
bordure inférieure : 40 px solide transparent ;
bordure gauche : 40px solide #f2f2f2 ;
position : absolue ; gauche : 0 ; haut : 0 ;
}

#breadcrumb-isanchogives2 ul li:premier-enfant a (
}

#breadcrumb-isanchogives2 ul li:dernier-enfant a (
remplissage à droite : 80 px ;
}

#breadcrumb-isanchogives2 ul li a:hover (
arrière-plan : #49c593 ;
}
#breadcrumb-isanchogives2 sur li a.wesove-readcrum (
arrière-plan : #49c593 ;
}
#breadcrumb-isanchogives2 ul li a:hover:after (
couleur de la bordure gauche : #49c593 ;
}
#breadcrumb-isanchogives2 sur li a.wesove-readcrum:after (
couleur de la bordure gauche : #49c593 ;
}

#breadcrumb-isanchogives3 (
alignement du texte : centre ;
marge supérieure : 30 px ;
}

#breadcrumb-isanchogives3 ul (
style de liste : aucun ;
affichage : tableau en ligne ;
}
#breadcrumb-isanchogives3 ul li (
affichage : en ligne ;
}

#breadcrumb-isanchogives3 ul li a (
bloc de visualisation;
flotteur : gauche ;
hauteur : 50px ;
arrière-plan : #ff818b ;
alignement du texte : centre ;
remplissage : 30px 40px 0 80px ;
position : relative ;
marge : 0 10px 0 0 ;

Taille de la police : 20 px ;
décoration de texte : aucune ;
couleur : #fff ;

}
#breadcrumb-isanchogives3 ul li a:après (
contenu: "";
hauteur : 80 px ;
largeur : 40 px ;
arrière-plan : #ff818b ;
position : absolue ; à droite : -40px ; haut : 0 ;
indice z : 1 ;

#breadcrumb-isanchogives3 ul li a:avant (
contenu: "";
hauteur : 80 px ;
largeur : 40 px ;
rayon de bordure : 0px 40px 40px 0px ;
arrière-plan :#f2f2f2 ;
position : absolue ; gauche : 0 ; haut : 0 ;
}

#breadcrumb-isanchogives3 ul li:premier-enfant a (
rayon de la bordure supérieure gauche : 10 px ; bordure inférieure gauche : 10 px ;
}
#breadcrumb-isanchogives3 ul li:premier-enfant a:avant (
affichage : aucun ;
}

#breadcrumb-isanchogives3 ul li:dernier-enfant a (
remplissage à droite : 80 px ;
rayon de bordure en haut à droite : 10 px ; bordure en bas à droite : 10 px ;
}
#breadcrumb-isanchogives3 ul li:last-child a:after (
affichage : aucun ;
}

#breadcrumb-isanchogives3 ul li a:hover (
arrière-plan : #ea606b ;
}
#breadcrumb-isanchogives3 sur li a.wesove-readcrum (
arrière-plan : #ea606b ;
}
#breadcrumb-isanchogives3 ul li a:hover:after (
arrière-plan : #ea606b ;
}
#breadcrumb-isanchogives3 sur li a.wesove-readcrum:after (
arrière-plan : #ea606b ;
}

#breadcrumb-isanchogives4 (
alignement du texte : centre ;
marge supérieure : 30 px ;
}

#breadcrumb-isanchogives4 ul (
style de liste : aucun ;
affichage : tableau en ligne ;
}
#breadcrumb-isanchogives4 ul li (
affichage : en ligne ;
}

#breadcrumb-isanchogives4 ul li a (
bloc de visualisation;
flotteur : gauche ;
hauteur : 50px ;
arrière-plan : #2b97cc ;
alignement du texte : centre ;
remplissage : 30px 40px 0 80px ;
position : relative ;
marge : 0 10px 0 0 ;

Taille de la police : 20 px ;
décoration de texte : aucune ;
couleur : #fff ;

}
#breadcrumb-isanchogives4 ul li a:après (
contenu: "";
hauteur : 80 px ;
largeur : 40 px ;
rayon de bordure : 0px 40px 40px 0px ;
arrière-plan : #2b97cc ;
position : absolue ; à droite : -40px ; haut : 0 ;
indice z : 1 ;

#breadcrumb-isanchogives4 ul li a:avant (
contenu: "";
hauteur : 80 px ;
largeur : 40 px ;
arrière-plan :#f2f2f2 ;
rayon de bordure : 0px 40px 40px 0px ;
position : absolue ; gauche : 0 ; haut : 0 ;
}

#breadcrumb-isanchogives4 ul li:premier-enfant a (
bordure-haut-gauche-radius : 0px ; bordure-bas-gauche-rayon : 0px ;
}

#breadcrumb-isanchogives4 ul li:dernier-enfant a (
remplissage à droite : 80 px ;
bordure en haut à droite : 0px ; bordure-bas-droit-radius : 0px ;
}

#breadcrumb-isanchogives4 ul li a:hover (
arrière-plan : #207ca8 ;
}
#breadcrumb-isanchogives4 sur li a.wesove-readcrum (
arrière-plan : #207ca8 ;
}
#breadcrumb-isanchogives4 ul li a:hover:after (
arrière-plan : #207ca8 ;
}
#breadcrumb-isanchogives4 sur li a.wesove-readcrum:after (
arrière-plan : #207ca8 ;
}

Ces identifiants ont la même structure interne, séparés par des styles différents selon leur identifiant.

L'article précédent, « Naviguer dans le fil d'Ariane avec des triangles en CSS », décrivait une manière de créer un menu en utilisant du CSS pur, sans utiliser de graphiques.

La méthode est bonne pour tout le monde, sauf pour une chose : la prise en charge d'un tel menu dans les anciens navigateurs est discutable. Mais lors de la traduction de cet article, un lien a été mentionné vers un moyen de créer une navigation à l'aide de graphiques.

L’article a été écrit il y a assez longtemps, mais la méthode fonctionne absolument. L'auteur de l'article est Veerle Pieters, et l'article lui-même s'intitule « Fil d'Ariane simple et évolutif basé sur CSS ». Ci-dessous, je n'en donne même pas une traduction gratuite, mais un récit gratuit.

Il y a quelques jours, j'ai été chargé de créer un menu de navigation de style fil d'Ariane pour un site Web sur lequel je travaillais. Je ne pense pas qu'un tel menu soit nécessaire pour chaque site Web, mais dans certains cas, il est très utile et pratique.

Cependant, cet exemple constitue comme une base qui peut être élargie et appliquée dans la pratique. Le menu sera créé à l'aide d'une liste à puces régulière

Mais d’abord, regardons l’exemple avec lequel nous allons travailler :

Le menu est assez simple, tout comme le code avec lequel nous allons le créer.

Code HTML - liste à puces ul

• Maison
• Section principale
• Sous-section
• Sous sous section
• La page sur laquelle vous vous trouvez actuellement

Tous les éléments de menu ont des liens, à l'exception du dernier - « La page sur laquelle vous vous trouvez actuellement ». Lorsque je travaillais sur le menu, je me demandais : une liste est-elle la structure la plus appropriée pour créer un menu ? Je pense que l'utilisation d'une liste dans ce cas n'est pas une règle stricte, mais il me semble que c'est l'option la plus sémantique et la plus correcte.

Code CSS - création de styles pour le menu

Nous définissons des styles généraux pour le menu - supprimons les marqueurs et réinitialisons les retraits dans les navigateurs Firefox, IE :

... que l'on « pousse » vers la droite (100 %) et que l'on place exactement verticalement (50 %). Nous mettons également en retrait le lien à droite

Presque tout a déjà été fait. Il ne reste plus qu'à définir les styles du texte du lien. Supprimons le soulignement standard et changeons sa couleur :

Le résultat de nos travaux est présenté ici :

Note du traducteur :

L'auteur de l'article a simplifié autant que possible l'exemple et le code lui-même, d'après ce que je comprends. Le fait est que l'exemple montre clairement un dégradé horizontal linéaire pour chaque élément de menu. Cependant, cela n’était en aucune façon reflété dans le code. Eh bien, pas de problème : est-ce vraiment un problème de créer un dégradé linéaire en CSS3 ? La tâche elle-même est terminée !