CSS - Navigation Bar: Gerbang Navigasi Website Anda

Hai teman-teman, pengembang web masa depan! Hari ini, kita akan memulai perjalanan yang menarik ke dunia Navigation Bars CSS. Sebagai guru komputer yang ramah di lingkungan Anda, saya di sini untuk membimbing Anda melalui aspek penting dari desain web. Jadi, ambil minumannya yang favorit, duduk nyaman, dan mari kita masuk ke dalam!

CSS - Navbar

Apa Itu Navigation Bar?

Sebelum kita mulai mengoding, mari kita pahami apa itu navigation bar. Bayangkan Anda berada di sebuah perpustakaan besar. Bagaimana Anda menemukan buku yang Anda inginkan? Anda menggunakan tanda dan direktori, kan? Well, navigation bar seperti itu untuk website. Itu adalah sebuah set tautan yang membantu pengguna bergerak mudah di situs Anda.

Sekarang, mari kita lihat jenis-jenis navigation bar yang berbeda dan cara membuatnya menggunakan CSS.

CSS Horizontal Navbar

Navigation bar horizontal mungkin jenis yang paling umum Anda lihat di website. Itu seperti baris tombol di bagian atas halaman.

Ini adalah contoh sederhana:

<ul class="navbar">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>

Dan ini adalah CSS untuk membuatnya terlihat bagus:

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

.navbar li {
float: left;
}

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

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

mari kitauraikan ini:

Kita menghapus titik-bullet dari daftar dengan list-style-type: none;
Kita membuat item daftar terapung ke kiri untuk membuatnya horizontal
Kita gayakan tautan agar terlihat seperti tombol
Kita tambahkan efek hover untuk membuatnya interaktif

CSS Vertical Navbar

kadang-kadang, Anda mungkin ingin navigation bar Anda menjadi vertikal, terutama di perangkat mobile atau sidebar. Ini adalah cara Anda bisa melakukannya:

<ul class="vertical-navbar">
<li><a 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>

Dan CSS nya:

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

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

.vertical-navbar li a:hover {
background-color: #555;
color: white;
}

Perbedaan utama di sini adalah kita tidak mengaplikasikan float ke item daftar. Sebaliknya, kita menetapkan lebar untuk navigation bar keseluruhan dan membiarkan item daftar bertumpuk secara alami.

CSS Dropdown Navbar

Sekarang, mari kita tambahkan sedikit keanggotaan dengan menu dropdown! Ini sangat bagus untuk mengatur subkategori.

<ul class="navbar">
<li><a href="#home">Home</a></li>
<li class="dropdown">
<a href="#" class="dropbtn">Products</a>
<div class="dropdown-content">
<a href="#">Laptops</a>
<a href="#">Tablets</a>
<a href="#">Smartphones</a>
</div>
</li>
<li><a href="#contact">Contact</a></li>
</ul>

Dan CSS nya:

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

.navbar li {
float: left;
}

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

.navbar li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1;}

.dropdown:hover .dropdown-content {
display: block;
}

CSS ini menggunakan pseudo-class :hover untuk menampilkan konten dropdown saat pengguna mengarahkan mouse ke tautan "Products".

CSS Fixed Navbar

Navigation bar tetap berada di tempatnya bahkan saat Anda gulir. Itu seperti memiliki panduan pribadi yang selalu ada saat Anda membutuhkannya.

Untuk membuat navigation bar tetap, kita hanya perlu menambahkan satu baris ke CSS kita:

.navbar {
/* ... gaya lain ... */
position: fixed;
top: 0;
width: 100%;
}

Ini membuat navigation bar tetap di bagian atas layar pada saat Anda gulir.

CSS Sticky Navbar

Navigation bar sticky mirip dengan navigation bar tetap, tetapi itu hanya menjadi tetap setelah Anda gulir melewatinya. Itu seperti seorang teman yang mengikuti Anda, tapi hanya setelah Anda telah berjalan sejauh tertentu.

Ini cara membuat navigation bar sticky:

.navbar {
/* ... gaya lain ... */
position: sticky;
top: 0;
}

Perbedaan adalah kita menggunakan position: sticky instead of position: fixed.

Garis Pemisah untuk Navigation Bar

kadang-kadang, Anda ingin memisahkan item navigation bar dengan garis. Ini adalah trik menarik untuk melakukannya:

.navbar li {
border-right: 1px solid #bbb;
}

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

Ini menambahkan garis antara setiap item, kecuali untuk item terakhir.

Navigation Bar Vertikal Tetap

Akhirnya, mari kita gabungkan apa yang kita pelajari untuk membuat navigation bar vertikal tetap:

<ul class="fixed-vertical-navbar">
<li><a 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>

Dan CSS nya:

.fixed-vertical-navbar {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}

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

.fixed-vertical-navbar li a:hover {
background-color: #555;
color: white;
}

Ini membuat navigation bar vertikal yang tetap di sebelah kiri layar saat Anda gulir.

Kesimpulan

Dan itu adalah, teman-teman! Kita telah melihat berbagai jenis navigation bar, dari horizontal ke vertikal, dropdown ke tetap. Ingat, latihan membuat sempurna, jadi jangan takut untuk mencoba gaya-gaya ini dan menciptakan desain navigation bar Anda sendiri.

Berikut ini adalah tabel yang menggabungkan jenis-jenis navigation bar yang kita pelajari:

Jenis Navbar	Properti CSS Utama	Karakteristik Utama
Horizontal	`float: left;`	Item diatur secara horizontal
Vertikal	`width: [value];`	Item ditumpuk secara vertikal
Dropdown	`:hover`	Menampilkan opsi tambahan saat diarahkan
Tetap	`position: fixed;`	Tetap di tempat saat digulir
Sticky	`position: sticky;`	Menjadi tetap setelah digulir melewatinya

Ingat, pengodingan seperti memasak - Anda mulai dengan resep dasar, tetapi saat Anda merasa nyaman, Anda bisa mulai menambahkan rasa Anda sendiri. Jadi, cobalah untuk mencampur dan mencari gaya-gaya ini, dan buat sesuatu yang visually appealing!

Selamat pengodingan, dan may your navbars always lead to exciting destinations!

Credits: Image by storyset

Tutorial Sebelumnya:

CSS - Bawah

Tutorial Selanjutnya:

CSS - Overlay