How To

Cara Membuat Breadcrumb

Pelajari cara membuat navigasi link breadcrumb dengan CSS.

Cara Membuat Navigasi Breadcrumb

Navigasi breadcrumb menyediakan link back ke setiap laman sebelumnya yang dinavigasi pengguna, dan menunjukkan lokasi pengguna saat ini di situs web.

Contoh:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
ul.breadcrumb {
  padding: 10px 16px;
  list-style: none;
  background-color: #eee;
}
ul.breadcrumb li {
  display: inline;
  font-size: 18px;
}
ul.breadcrumb li+li:before {
  padding: 8px;
  color: black;
  content: "/\00a0";
}
ul.breadcrumb li a {
  color: #0275d8;
  text-decoration: none;
}
ul.breadcrumb li a:hover {
  color: #01447e;
  text-decoration: underline;
}
</style>
</head>
<body>

<h2>Breadcrumb Pagination</h2>
<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>

</body>
</html>

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:

/* Beri Style pada list */ul.breadcrumb {
  padding: 10px 16px;
  list-style: none;
  background-color: #eee;
}

/* Menampilkan item list secara berdampingan */ul.breadcrumb li {
  display: inline;
  font-size: 18px;
}

/* Tambahkan simbol garis miring (/) sebelum/di belakang setiap item list */ul.breadcrumb li+li:before {
  padding: 8px;
  color: black;
  content: "/\00a0";
}

/* Aberi warna ke semua link di dalam list */ul.breadcrumb li a {
  color: #0275d8;
  text-decoration: none;
}

/* Tambahkan warna saat mengarahkan mouse */ul.breadcrumb li a:hover {
  color: #01447e;
  text-decoration: underline;
}

Catur Kurnia Sari

Share
Tags: How To