How TO - CSS-broodkruimels
Leer hoe u een broodkruimelnavigatie maakt met CSS.
Een breadcrumb-navigatie maken
Een broodkruimelnavigatie biedt links terug naar elke vorige pagina waar de gebruiker doorheen heeft genavigeerd, en toont de huidige locatie van de gebruiker op een website.
Stap 1) HTML toevoegen:
Voorbeeld
<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>
Stap 2) CSS toevoegen:
Voorbeeld
/* 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;
}
Ga naar onze CSS Paginering Tutorial voor meer informatie over paginering.