Belajar CSS Part 26 - Navigation Bar

CSS Navigation Bar

Navigation bar adalah menu navigasi yang dimaksudkan untuk membantu pengunjung situs web dalam mengakses informasi. Hal penting untuk setiap situs web adalah dengan adanya navigation bar yang mudah digunakan oleh pengguna.

Dengan menggunakan CSS, kita dapat mengubah menu HTML yang terlihat membosankan menjadi navigation bar yang menarik.

Navigasi Bar = Daftar Link

Sebuah navigasi bar memerlukan HTML standar sebagai dasar / basis. Jadi, kita membangun navigasi bar dari HTML standar terlebih dahulu.

Sebuah navigasi bar pada dasarnya adalah terdiri dari satu atau beberapa link, sehingga menggunakan elemen <ul> dan <li>.

Dalam contoh ini, kita akan membuat navigasi bar dari daftar HTML standar.

Contoh

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<ul>
  <li><a href="#home">Beranda</a></li>
  <li><a href="#news">Berita</a></li>
  <li><a href="#contact">Kontak</a></li>
  <li><a href="#about">About</a></li>
</ul>

<p>Catatan: Kita menggunakan href="#" untuk menguji link.</p>

</body>
</html>

Hasilnya:

Sekarang mari kita menghapus bullet (tanda bulat hitam), margin dan padding dari daftar link tersebut:

Contoh

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<p>Pada contoh ini, kita menghapus bullet (titik hitam) dari list, default padding dan margin ditentukan secara default.</p>

<ul>
  <li><a href="#home">Beranda</a></li>
  <li><a href="#news">Berita</a></li>
  <li><a href="#contact">Kontak</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

Hasilnya:

Penjelasan dari contoh di atas:

list-style-type: none; untuk menghilangkan bullet (titik hitam). Navigasi bar tidak memerlukan penanda list item
Setel margin: 0; dan padding: 0; untuk menghapus pengaturan default browser

Kode dalam contoh di atas adalah kode standar yang digunakan pada navigasi bar vertikal dan horizontal.

Vertikal Navigation Bar

Untuk membangun sebuah navigasi bar vertikal, kita dapat mengatur elemen <a> di dalam list, selain dari kode di atas:

Contoh

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

li a {
    display: block;
    width: 60px
    background-color: #dddddd;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<ul>
  <li><a href="#home">Beranda</a></li>
  <li><a href="#news">Berita</a></li>
  <li><a href="#contact">Kontak</a></li>
  <li><a href="#about">About</a></li>
</ul>

<p>Warna latar belakang ditambahkan ke link untuk menunjukkan area link.</p>
<p>Perhatikan bahwa seluruh area link dapat diklik, bukan hanya teks.</p>

</body>
</html>

Hasilnya:

Penjelasan dari contoh di atas:

display: block;

Menampilkan link sebagai elemen block membuat seluruh area link yang dapat diklik (bukan hanya teks), dan ini memungkinkan kita untuk menentukan width (lebar), padding, margin, height (tinggi), dll.

width: 60px;

Elemen Block mengambil lebar secara keseluruhan yang tersedia secara default.

Kita juga dapat mengatur lebar <ul>, dan menghapus lebar <a>, karena mereka akan mengambil lebar penuh yang tersedia ketika ditampilkan sebagai elemen block. Ini akan menghasilkan hasil yang sama seperti pada contoh sebelumnya.

Contoh

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 60px;
} 

li a {
    display: block;
    background-color: #dddddd;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<ul>
  <li><a href="#home">Beranda</a></li>
  <li><a href="#news">Berita</a></li>
  <li><a href="#contact">Kontak</a></li>
  <li><a href="#about">About</a></li>
</ul>

<p>Warna latar belakang ditambahkan ke link untuk menunjukkan area link.</p>
<p>Perhatikan bahwa seluruh area link dapat diklik, bukan hanya teks.</p>

</body>
</html>

Hasilnya:

Contoh Navigation Bar Vertikal

Pada contoh di bawah ini, kita membuat navigasi bar vertikal dasar dengan warna latar belakang abu-abu dan mengubah warna latar belakang link ketika pengguna menggerakkan mouse di atas link tersebut.

Contoh

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #f1f1f1;
}

li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}

/* Mengubah link saat disentuh mouse */
li a:hover {
    background-color: #555;
    color: white;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Vertical Navigation Bar</h2>

<ul>
  <li><a href="#home">Beranda</a></li>
  <li><a href="#news">Berita</a></li>
  <li><a href="#contact">Kontak</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

Hasilnya:

Active / Current Navigasi Link

Tambahkan class "active" ke link saat ini untuk memberitahu pengguna agar mengetahui di halaman mana dia berada.

Contoh

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #f1f1f1;
}

li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}

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

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

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Vertical Navigation Bar</h2>
<p> Dalam contoh ini, kita membuat class "active" dengan warna latar hijau dan teks putih. Class ditambahkan ke link "Beranda".</ P>

<ul>
  <li><a class="active" href="#home">Beranda</a></li>
  <li><a href="#news">Berita</a></li>
  <li><a href="#contact">Kontak</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

Hasilnya:

Memposisikan Link di Tengah & Menambakan Borders

Tambahkan text-align: center; ke <li> atau <a> untuk menempatkan link ke tengah.

Tambahkan properti border ke <ul> untuk menambahkan garis di sekitar navigasi bar. Jika kita juga ingin border di dalam navigasi bar, tambahkan border-bottom untuk semua elemen <li>, kecuali <li> yang terakhir.

Contoh

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #f1f1f1;
    border: 1px solid #555;
}

li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}

li {
    text-align: center;
    border-bottom: 1px solid #555;
}

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

li a.active {
    background-color: #4dd2ff;
    color: white;
}

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

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Vertical Navigation Bar</h2>
<p>Dalam contoh ini, kita memposisikan link navigasi dan menambahkan border ke navigasi bar.</p>

<ul>
  <li><a class="active" href="#home">Beranda</a></li>
  <li><a href="#news">Berita</a></li>
  <li><a href="#contact">Kontak</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

Hasilnya:

Full-height Tetap Vertikal Navbar

Pada contoh berikut kita akan membuat sebuah navigasi bar secara full-height, dan memiliki side navigasi "sticky".

Contoh

body {
    margin: 0;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 25%;
    background-color: #f1f1f1;
    position: fixed;
    height: 100%;
    overflow: auto;
}

li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}

li a.active {
    background-color: #4dd2ff;
    color: white;
}

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

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<ul>
  <li><a class="active" href="#home">Beranda</a></li>
  <li><a href="#news">Berita</a></li>
  <li><a href="#contact">Kontak</a></li>
  <li><a href="#about">About</a></li>
</ul>

<div style="margin-left:25%;padding:1px 16px;height:1000px;">

<h2>Memperbaiki Full-height Side Nav</h2>
  <h3>Coba gulir area ini, dan lihat bagaimana sidenav menempel ke halaman</h3>

  <p> Perhatikan bahwa elemen div ini memiliki margin kiri 25%. Ini karena navigasi samping diatur ke lebar 25%. Jika kita menghapus margin, sidenav akan overlay / duduk di atas div ini. </p>
  <p> Juga perhatikan bahwa kami telah mengatur sidenav ke overflow: auto. Ini akan menambahkan scroll bar ketika sidenav terlalu panjang (misalnya jika memiliki lebih dari 50 tautan di dalamnya). </ P>
  <p>Teks yang lain...</p>
  <p>Teks yang lain...</p>
  <p>Teks yang lain...</p>
  <p>Teks yang lain...</p>
  <p>Teks yang lain...</p>
  <p>Teks yang lain...</p>
  <p>Teks yang lain...</p>
  <p>Teks yang lain...</p>
  <p>Teks yang lain...</p>
  <p>Teks yang lain...</p>
  <p>Teks yang lain...</p>
</div>

</body>
</html>

Hasilnya:

Catatan: Contoh ini mungkin tidak bekerja dengan baik pada perangkat mobile.

Navigasi Bar Horizontal

Ada dua cara untuk membuat sebuah navigasi bar horizontal. Menggunakan inline atau floating daftar item.

Inline List Item

Salah satu cara untuk membangun sebuah navigasi bar horizontal adalah untuk menentukan elemen <li> sebagai inline, di samping kode "standard" di atas.

Contoh

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

li {
    display: inline;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<ul>
  <li><a href="#home">Beranda</a></li>
  <li><a href="#news">Berita</a></li>
  <li><a href="#contact">Kontak</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

Hasilnya:

Penjelasan dari contoh di atas:

display: inline;

Secara default, elemen <li> adalah elemen block. Di sini, kita menghapus baris baru sebelum dan sesudah disetiap list item, untuk menampilkan tiap isi dari elemen tersebut pada satu baris.

Floating List Item

Cara lain untuk menciptakan sebuah navigasi bar horizontal adalah untuk memberikan float ke elemen <li>, dan menentukan layout untuk link navigasi.

Contoh

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

li {
    float: left;
}

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

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<ul>
  <li><a href="#home">Beranda</a></li>
  <li><a href="#news">Berita</a></li>
  <li><a href="#contact">Kontak</a></li>
  <li><a href="#about">About</a></li>
</ul>

<p><b>Catatan:</b> Jika DOCTYPE tidak ditentukan, item floating dapat menghasilkan hasil yang tidak diharapkan.</p>
<p>Warna latar belakang ditambahkan ke link untuk menunjukkan area link. Seluruh area link dapat diklik, bukan hanya teks. </ P>
<p><b>Catatan:</b> overflow: hidden; ditambahkan ke elemen <ul> untuk mencegah elemen <li> keluar dari list.</p>

</body>
</html>

Hasilnya:

Penjelasan dari contoh di atas:

float: left;

Penggunaan float untuk mendapatkan elemen-elemen block berada di sisi / samping satu sama lain

display: block;

Menampilkan link sebagai elemen block membuat seluruh area link yang dapat diklik (bukan hanya teks), dan ini memungkinkan kita untuk menentukan width (lebar), padding, margin, height (tinggi), dll

padding: 8px;

Sejak elemen blok mengambil lebar penuh yang tersedia, mereka tidak bisa mengapung di samping satu sama lain. Oleh karena itu, tentukan beberapa padding untuk membuat mereka terlihat baik

background-color: #dddddd;

Menambahkan warna background abu-abu ke setiap elemen

Tips: Tambahkan background-color ke <ul>, bukan hanya untuk setiap elemen <a> jika kita ingin mewarnai lebar sepenuhnya latar belakang.

Contoh

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

li {
    float: left;
}

li a {
    display: block;
    padding: 8px;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<ul>
  <li><a href="#home">Beranda</a></li>
  <li><a href="#news">Berita</a></li>
  <li><a href="#contact">Kontak</a></li>
  <li><a href="#about">About</a></li>
</ul>

<p>Warna latar belakang ditambahkan ke list, bukan hanya untuk setiap link, tapi untuk menentukan warna latar secara penuh sesuai lebar dari halaman. </p>
<p><b>Catatan: </ b> overflow: hidden; ditambahkan ke elemen <ul> untuk mencegah elemen <li> keluar dari list.</p>

</body>
</html>

Hasilnya:

Contoh Navigasi Bar Horizontal

Pada contoh di bawah ini, kita membuat navigasi bar horizontal dasar dengan warna latar belakang gelap dan mengubah warna latar belakang dari link ketika pengguna menggerakkan mouse di 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;
}

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

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<ul>
  <li><a class="active" href="#home">Beranda</a></li>
  <li><a href="#news">Berita</a></li>
  <li><a href="#contact">Kontak</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

Hasilnya:

Active / Current Navigasi Link

Tambahkan class "active" ke link saat ini untuk memberitahu pengguna agar mengetahui di halaman mana dia berada.

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

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

.active {
    background-color: #3399ff;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<ul>
  <li><a class="active" href="#home">Beranda</a></li>
  <li><a href="#news">Berita</a></li>
  <li><a href="#contact">Kontak</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

Hasilnya:

Right-Align Link (Penyelarasan Link ke Kanan)

Right-align link yaitu dengan memberikan float untuk list item ke kanan (float:right;).

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

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

.active {
    background-color: #3399ff;
}


<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<ul>
  <li><a href="#home">Beranda</a></li>
  <li><a href="#news">Berita</a></li>
  <li><a href="#contact">Kontak</a></li>
  <li style="float:right"><a href="#about" class="active">About</a></li>
</ul>

</body>
</html>

Penempatan href dan class jangan sampai tertukar. Apabila tertukar hasilnya tidak seperti yang diharapkan.

Hasilnya:

Border Dividers (Garis Pembagi)

Tambahkan properti border-right ke <li> untuk membuat garis pembagi link.

Contoh

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

li {
    float: left;
    border-right:1px solid #bbb;
}

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

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: #3399ff;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<ul>
  <li><a class="active" href="#home">Beranda</a></li>
  <li><a href="#news">Berita</a></li>
  <li><a href="#contact">Kontak</a></li>
  <li style="float:right"><a href="#about">About</a></li>
</ul>

</body>
</html>

Hasilnya:

Fixed Navigation Bar

Pada contoh berikut, kita membuat navigasi bar tetap berada di bagian atas atau bawah halaman, bahkan ketika pengguna menggulir halaman.

Fixed Top

Contoh

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: #3399ff;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<ul>
  <li><a class="active" href="#home">Beranda</a></li>
  <li><a href="#news">Berita</a></li>
  <li><a href="#contact">Kontak</a></li>
  <li><a href="#about">About</a></li>
</ul>

<div style="padding:20px;margin-top:30px;background-color:#b3d9ff;height:1500px;">
<h1>Fixed Top Navigation Bar</h1>
<h2>Gulir halaman ini untuk melihat efeknya </ h2>
<h2>Navigasi bar akan tetap berada di bagian atas halaman saat menggulir halaman </ h2>

<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
</div>

</body>
</html>

Hasilnya:

Fixed Buttom

Contoh

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: #3399ff;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<ul>
  <li><a class="active" href="#home">Beranda</a></li>
  <li><a href="#news">Berita</a></li>
  <li><a href="#contact">Kontak</a></li>
  <li><a href="#about">About</a></li>
</ul>

<div style="padding:20px;background-color:#b3d9ff;height:1500px;">
<h1>Fixed Bottom Navigation Bar</h1>
<h2>Gulir halaman ini untuk melihat efeknya </ h2>
<h2>Navigasi bar akan tetap berada di bagian bawa halaman saat menggulir halaman </ h2>

<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
</div>

</body>
</html>

Hasilnya:

Catatan: Posisi "Fixed" mungkin tidak bekerja dengan baik pada perangkat mobile.

Gray Horizontal Navbar

Di bawah ini merupakan sebuah contoh dari navigasi bar horizontal abu-abu dengan border abu-abu tipis.

Contoh

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: #3399ff;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<ul>
  <li><a class="active" href="#home">Beranda</a></li>
  <li><a href="#news">Berita</a></li>
  <li><a href="#contact">Kontak</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

Hasilnya:

Sticky Navbar (Navbar Menempel)

Gunakan position: sticky; ke <li> untuk membuat navbar sticky (lengket / menempel).

Elemen yang melekat antara relatif dan fixed, tergantung pada posisi gulir. Diposisikan relatif sampai posisi offset yang diberikan terpenuhi di viewport - kemudian "lengket" di tempat (seperti posisi: fixed).

Contoh

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: #3399ff;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div class="header">
  <h2>Scroll Ke bawah</h2>
  <p>Scroll ke bawah untuk melihat effect sticky.</p>
</div>

<ul>
  <li><a class="active" href="#home">Beranda</a></li>
  <li><a href="#news">Berita</a></li>
  <li><a href="#contact">Kontak</a></li>
</ul>

<h3>Contoh Sticky Navigation Bar</h3>
<p>Navbar akan <strong> menempel </strong> ke atas saat kita mencapai posisi gulirnya. </p>
<p><strong>Catatan: </strong>Internet Explorer, Edge 15 dan versi sebelumnya tidak mendukung pemosisian sticky. Safari membutuhkan awalan -webkit.</p>
<p>Teks di bawah ini hanyalah teks biasa untuk mengetes apaka efeknya akan working atau tidak.</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>

Hasilnya:

Catatan: Internet Explorer, Edge 15 dan versi sebelumnya tidak mendukung position sticky. Safari membutuhkan awalan -webkit- (lihat contoh di atas). Kita juga harus menentukan setidaknya satu dari top, right, bottom atau left untuk penentuan posisi sticky agar working.

Demikian pembahasan mengenai cara membuat navigation bar dengan menambahkan CSS sehingga terlihat menarik.
Semoga bermanfaat!

Sumber: https://www.w3schools.com