Comment FAIRE - Fil d'Ariane CSS
Apprenez à créer une navigation par fil d'Ariane avec CSS.
Comment créer une navigation par fil d'Ariane
Une navigation par fil d'Ariane fournit des liens vers chaque page précédente parcourue par l'utilisateur et indique l'emplacement actuel de l'utilisateur sur un site Web.
Étape 1) Ajoutez du HTML :
Exemple
<ul class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Pictures</a></li>
<li><a href="#">Summer 15</a></li>
<li>Italy</li>
</ul>
Étape 2) Ajoutez CSS :
Exemple
/* Style the list */
ul.breadcrumb {
padding: 10px
16px;
list-style: none;
background-color: #eee;
}
/* Display list items side by side */
ul.breadcrumb li {
display: inline;
font-size: 18px;
}
/* Add a
slash symbol (/) before/behind each list item */
ul.breadcrumb li+li:before
{
padding: 8px;
color: black;
content: "/\00a0";
}
/* Add a color to all links inside the list */
ul.breadcrumb li a {
color: #0275d8;
text-decoration: none;
}
/* Add a color on mouse-over */
ul.breadcrumb li a:hover {
color: #01447e;
text-decoration: underline;
}
Accédez à notre didacticiel de pagination CSS pour en savoir plus sur la pagination.