Navbar Horizontal di CSS: Contoh Sintak dan Cara membuatnya

Section Artikel

1 Bar Navigasi Horizontal
- 1.1 Item Daftar Sebaris
2 Item Daftar Floating
3 Contoh Bar Navigasi Horizontal
4 Tautan Navigasi Aktif / Saat Ini
5 Tautan Rata Kanan
6 Border Dividers
7 Bar Navigasi Tetap
8 Navbar Horizontal Abu-abu
9 Navbar Sticky

Bar Navigasi Horizontal

Ada dua cara untuk membuat bar navigasi horizontal. Menggunakan item daftar sebaris atau mengambang.

Item Daftar Sebaris

Salah satu cara membuat bar navigasi horizontal adalah dengan menetapkan <li> elemen sebagai sebaris, selain kode “standar” dari materi sebelumnya :

Contoh :

li {
  display: inline;
}

Penjelasan Kode :

tampilan: sebaris; – Secara default <li>elemen adalah elemen blok. Di sini, kita menghapus jeda baris sebelum dan sesudah setiap item daftar, untuk menampilkannya dalam satu baris.

Item Daftar Floating

Cara lain untuk membuat bar navigasi horizontal adalah dengan float elemen <li> dan menentukan tata letak untuk tautan navigasi:

Contoh :

li {
  float: left;
}

a {
  display: block;
  padding: 8px;
  background-color: #dddddd;
}

Penjelasan Kode :

float: left; – gunakan float agar elemen blok bergeser bersebelahan
display: block; – Menampilkan tautan sebagai elemen blok membuat seluruh area tautan dapat diklik (bukan hanya teks), dan memungkinkan kita untuk menentukan padding,tinggi, lebar, margin, dll.
padding: 8px; – Karena elemen blok mengambil lebar penuh yang tersedia, elemen tersebut tidak dapat float bersebelahan. Oleh karena itu, tentukan beberapa padding agar terlihat bagus
background-color: #dddddd; – Tambahkan warna latar belakang abu-abu untuk setiap elemen
Catatan:Tambahkan warna latar belakang ke <ul>alih-alih setiap elemen <a> jika kita menginginkan warna latar belakang penuh:

Contoh :

ul {
  background-color: #dddddd;
}

Contoh Bar Navigasi Horizontal

Buat bar navigasi horizontal dasar dengan warna latar belakang gelap dan ubah warna latar belakang tautan saat pengguna menggerakkan mouse ke atasnya:

Contoh :

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change the link color to #111 (black) on hover */
li a:hover {
  background-color: #111;
}

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

Tautan Navigasi Aktif / Saat Ini

Tambahkan kelas “aktif” ke tautan saat ini agar kita tahu sedang berada di halaman mana :

Contoh :

.active {
  background-color: #4CAF50;
}

Tautan Rata Kanan

Ratakan kanan tautan dengan mengambang item daftar ke kanan (float: right;):

Contoh :

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li style="float:right"><a class="active" href="#about">About</a></li>
</ul>

Border Dividers

Tambahkan properti border-right ke <li>untuk membuat pemisah tautan:

Contoh :

/* Add a gray right border to all list items, except the last item (last-child) */
li {
  border-right: 1px solid #bbb;
}

li:last-child {
  border-right: none;
}

Bar Navigasi Tetap

Buat bar navigasi tetap berada di bagian atas atau bawah halaman, bahkan saat kita menggulir halaman:

Contoh Fixed Top :

ul {
  position: fixed;
  top: 0;
  width: 100%;
}

<!DOCTYPE html>
<html>
<head>
<style>
body {margin:0;}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #111;
}

.active {
  background-color: #4CAF50;
}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

<div style="padding:20px;margin-top:30px;background-color:#1abc9c;height:1500px;">
  <h1>Fixed Top Navigation Bar</h1>
  <h2>Scroll kebawah untuk melihat efekya</h2>
  <h2>bar navigasi akan tetap berada di atas</h2>

  <p> Contoh Text </p>
  <p> Contoh Text </p>
  <p> Contoh Text </p>
  <p> Contoh Text </p>
  <p> Contoh Text </p>
  <p> Contoh Text </p>
  <p> Contoh Text </p>
  <p> Contoh Text </p>
  <p> Contoh Text </p>
  <p> Contoh Text </p>
  <p> Contoh Text </p>
  <p> Contoh Text </p>
  <p> Contoh Text </p>
  <p> Contoh Text </p>
  <p> Contoh Text </p>
  <p> Contoh Text </p>
  <p> Contoh Text </p>
  <p> Contoh Text </p>
  <p> Contoh Text </p>
  <p> Contoh Text </p>
</div>

</body>
</html>

Contoh Fixed Bottom :

ul {
  position: fixed;
  bottom: 0;
  width: 100%;
}

<!DOCTYPE html>
<html>
<head>
<style>
body {margin:0;}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  position: fixed;
  bottom: 0;
  width: 100%;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #111;
}

.active {
  background-color: #4CAF50;
}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

<div style="padding:20px;background-color:#1abc9c;height:1500px;">
  <h1>Fixed Bottom Navigation Bar</h1>
  <h2>Scroll kebawah untuk melihat efekya</h2>
  <h2>bar navigasi akan tetap berada di bawah</h2>

  <p>Contoh Text</p>
  <p>Contoh Text</p>
  <p>Contoh Text</p>
  <p>Contoh Text</p>
  <p>Contoh Text</p>
  <p>Contoh Text</p>
  <p>Contoh Text</p>
  <p>Contoh Text</p>
  <p>Contoh Text</p>
  <p>Contoh Text</p>
  <p>Contoh Text</p>
  <p>Contoh Text</p>
  <p>Contoh Text</p>
  <p>Contoh Text</p>
  <p>Contoh Text</p>
  <p>Contoh Text</p>
  <p>Contoh Text</p>
  <p>Contoh Text</p>
  <p>Contoh Text</p>
  <p>Contoh Text</p>
  <p>Contoh Text</p>

</div>

</body>
</html>

Navbar Horizontal Abu-abu

Contoh bar navigasi horizontal abu-abu dengan batas tipis abu-abu:

Contoh :

ul {
  border: 1px solid #e7e7e7;
  background-color: #f3f3f3;
}

li a {
  color: #666;
}

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #e7e7e7;
  background-color: #f3f3f3;
}

li {
  float: left;
}

li a {
  display: block;
  color: #666;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #ddd;
}

li a.active {
  color: white;
  background-color: #4CAF50;
}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

Navbar Sticky

Tambahkan position: sticky; ke <ul>untuk membuat bar navigasi yang sticky

Elemen sticky beralih antara relatif dan tetap bergantung pada posisi scroll.Ini diposisikan relatif hingga posisi offset tertentu terpenuhi di viewport – lalu “sticky”di tempatnya (seperti posisi: tetap).

Contoh :

ul {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

<!DOCTYPE html>
<html>
<head>
<style>
body {
  font-size: 28px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}

.active {
  background-color: #4CAF50;
}
</style>
</head>
<body>

<div class="header">
  <h2>Scroll Down</h2>
  <p>Scroll down to see the sticky effect.</p>
</div>

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
</ul>

<h3>Sticky Navigation Bar Example</h3>
<p>The navbar will <strong>stick</strong> to the top when you reach its scroll position.</p>
<p><strong>Note:</strong> Internet Explorer, Edge 15 and earlier versions do not support sticky positioning. Safari requires a -webkit- prefix.</p>
<p>Some text to enable scrolling. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>

</body>
</html>

Catatan: Internet Explorer, Edge 15 dan versi sebelumnya tidak mendukung pemosisian sticky ini. Safari membutuhkan awalan -webkit- (lihat contoh di atas). kita juga harus menentukan setidaknya satu dari top, right, bottom, atau left agar pemosisian sticky berfungsi.

CSS

Navbar Horizontal di CSS: Contoh Sintak dan Cara membuatnya

Bar Navigasi Horizontal

Item Daftar Sebaris

Item Daftar Floating

Contoh Bar Navigasi Horizontal

Tautan Navigasi Aktif / Saat Ini

Tautan Rata Kanan

Border Dividers

Bar Navigasi Tetap

Navbar Horizontal Abu-abu

Navbar Sticky

Navigation Bar di CSS: Navbar CSS – Sintak dan cara Membuatnya

Navigation Bar Vertikal di CSS: Contoh Sintak dan Cara Membuatnya

You may also like