Bagaimana membuat: Navigasi breadcrumb CSS

Bagaimana membuat navigasi breadcrumb

Navigasi breadcrumb menyediakan tautan setiap halaman yang diakses pengguna sebelumnya, serta menunjukkan posisi pengguna dalam situs web.

Keterangan pertama - Tambahkan HTML:

<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>

Keterangan kedua - Tambahkan CSS:

/* Sets list style */
ul.breadcrumb {
  padding: 10px 16px;
  list-style: none;
  background-color: #eee;
}
/* Displays list items side by side */
ul.breadcrumb li {
  display: inline;
  font-size: 18px;
}
/* Adds slash symbol (/) before and after each list item */
ul.breadcrumb li+li:before {
  padding: 8px;
  color: black;
  content: "/\00a0";
}
/* Adds color to all links in the list */
ul.breadcrumb li a {
  color: #0275d8;
  text-decoration: none;
}
/* Mouse hover adds color */
ul.breadcrumb li a:hover {
  color: #01447e;
  text-decoration: underline;
}

Coba sendiri

Halaman yang berhubungan

Tutorial:Halaman berikutnya