Bagaimana caranya - Remah Roti CSS
Pelajari cara membuat navigasi breadcrumb dengan CSS.
Cara Membuat Navigasi Breadcrumb
Navigasi breadcrumb menyediakan tautan kembali ke setiap halaman sebelumnya yang dinavigasi pengguna, dan menunjukkan lokasi pengguna saat ini di situs web.
Langkah 1) Tambahkan HTML:
Contoh
<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>
Langkah 2) Tambahkan CSS:
Contoh
/* 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;
}
Buka Tutorial Pagination CSS kami untuk mempelajari lebih lanjut tentang pagination.