Navigation Bar Horizontal
Ada dua cara untuk membuat navigation bar horizontal. Yaitu menggunakan inline atau floating.
Inline List Items
Salah satu cara membuat navigation bar horizontal adalah dengan menentukan elemen <li> sebagai inline:
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline;
}
</style>
</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">Tentang</a></li>
</ul>
</body></html>
Penjelasan:
display: inline;
Secara default, elemen <li> merupakan elemen blok. Pada contoh di atas diperlihatkan cara menghapus baris sebelum dan sesudah setiap item list, untuk menampilkannya dalam satu baris
Floating List Items
Cara lain untuk membuat navigation bar horizontal adalah dengan melayangkan tag elemen <li>, dan mengatur tata letak untuk link navigasi:
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
li a {
display: block;
padding: 8px;
background-color: #dddddd;
}
</style>
</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">Tentang</a></li>
</ul>
<p><b>Catatan:</b> Jika !DOCTYPE tidak ditentukan, elemen mengambang dapat memberikan hasil yang tidak diharapkan.</p>
<p>Warna latar ditambahkan ke tautan untuk menampilkan area tautan. Seluruh area tautan dapat diklik, bukan hanya teksnya.</p>
<p><b>Catatan:</b> overflow: hidden ditambahkan ke elemen ul untuk mencegah elemen li keluar dari daftar.</p>
</body></html>
Penjelasan:
float: left;
Gunakan float agar elemen blok mengapung bersebelahandisplay: block;
Memungkinkan untuk menentukan padding (tinggi, lebar, margin, dll. jika diperlukan)padding: 8px;
Menentukan padding antara setiap elemen <a>, agar terlihat lebih bagusbackground-color: #dddddd;
Tambahkan warna latar abu-abu ke setiap elemen <a>
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #dddddd;
}
li {
float: left;
}
li a {
display: block;
padding: 8px;
}
</style>
</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">Tentang</a></li>
</ul>
<p><b>Catatan:</b> overflow: hidden ditambahkan ke elemen ul untuk mencegah elemen li keluar dari daftar.</p>
</body></html>
Contoh Navigation Bar Horizontal
Berikut ini adalah contoh navigation bar horizontal dasar dengan warna latar belakang gelap dan warna latar belakang link saat pengguna menggerakkan mouse di atasnya akan berubah:
Contoh
<!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">Beranda</a></li>
<li><a href="#news">Berita</a></li>
<li><a href="#contact">Kontak</a></li>
<li><a href="#about">Tentang</a></li>
</ul>
</body></html>
Tautan Navigasi Aktif
Tambahkan class “active” ke dalam link untuk memberi tahu pengguna halaman mana yang aktif saat ini:
Contoh
<!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:not(.active) {
background-color: #111;
}
.active {
background-color: #04AA6D;
}
</style>
</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">Tentang</a></li>
</ul>
</body></html>
Right-Align Links
Luruskan link item list dengan menggunakan floating ke sisi kanan (float:right;
):
Contoh
<!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:not(.active) {
background-color: #111;
}
.active {
background-color: #04AA6D;
}
</style>
</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 class="active" href="#about">Tentang</a></li>
</ul>
</body></html>
Pembagi Batas (Border Dividers)
Tambahkan properti border-right
ke <li> untuk membuat pembagi link:
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
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: #04AA6D;
}
</style>
</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">Tentang</a></li>
</ul>
</body></html>
Navbar Horizontal Abu-abu
Contoh navigation bar horizontal berwarna abu-abu dengan border abu-abu tipis :
Contoh
<!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: #04AA6D;
}
</style>
</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">Tentang</a></li>
</ul>
</body></html>
Sticky Navbar
Tambahkan position: sticky;
ke <ul> untuk membuat navbar menempel.
Elemen sticky beralih antara relative dan fixed, bergantung pada posisi scroll. Elemen ini diposisikan relatif sampai posisi offset tertentu terpenuhi di viewport – kemudian akan “menempel” di tempatnya (seperti position: fixed).
Contoh
<!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 ke bawah</h2>
<p>Scroll ke bawah untuk melihat efek 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>Navigasi Sticky</h3>
<p>Navbar akan <strong>menempel</strong> di bagian atas saat Anda mencapai posisi scroll .</p>
<p><strong>Catatan:</strong> Internet Explorer tidak mendukung sticky dan Safari memerlukan awalan -webkit-.</p>
<p>Beberapa teks untuk mengaktifkan scroll. 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 iklannya. Eum no molestiae voluptatibus.</p>
<p>Beberapa teks untuk mengaktifkan scroll. 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 iklannya. Eum no molestiae voluptatibus.</p>
<p>Beberapa teks untuk mengaktifkan scroll. 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 iklannya. Eum no molestiae voluptatibus.</p>
<p>Beberapa teks untuk mengaktifkan scroll. 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 iklannya. Eum no molestiae voluptatibus.</p>
<p>Beberapa teks untuk mengaktifkan scroll. 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 iklannya. Eum no molestiae voluptatibus.</p>
<p>Beberapa teks untuk mengaktifkan scroll. 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 iklannya. Eum no molestiae voluptatibus.</p>
<p>Beberapa teks untuk mengaktifkan scroll. 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 iklannya. Eum no molestiae voluptatibus.</p>
</body></html>
Contoh Lainnya
Responsive Topnav
Cara menggunakan query media CSS untuk membuat navigasi atas yang responsif.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {margin: 0;}
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
ul.topnav li {float: left;}
ul.topnav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
ul.topnav li a:hover:not(.active) {background-color: #111;}
ul.topnav li a.active {background-color: #04AA6D;}
ul.topnav li.right {float: right;}
@media screen and (max-width: 600px) {
ul.topnav li.right,
ul.topnav li {float: none;}
}
</style>
</head>
<body>
<ul class="topnav">
<li><a class="active" href="#home">Beranda</a></li>
<li><a href="#news">Berita</a></li>
<li><a href="#contact">Kontak</a></li>
<li class="right"><a href="#about">Tentang</a></li>
</ul>
<div style="padding:0 16px;">
<h2>Contoh Navigasi Responsive</h2>
<p>Contoh ini menggunakan query media untuk menumpuk navigasi secara vertikal saat ukuran layar 600px atau kurang.</p>
<h4>Ubah ukuran jendela browser untuk melihat efeknya.</h4>
</div>
</body></html>
Responsive Sidenav
Cara menggunakan query media CSS untuk membuat navigasi samping yang responsif.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {margin: 0;}
ul.sidenav {
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}
ul.sidenav li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
ul.sidenav li a.active {
background-color: #4CAF50;
color: white;
}
ul.sidenav li a:hover:not(.active) {
background-color: #555;
color: white;
}
div.content {
margin-left: 25%;
padding: 1px 16px;
height: 1000px;
}
@media screen and (max-width: 900px) {
ul.sidenav {
width: 100%;
height: auto;
position: relative;
}
ul.sidenav li a {
float: left;
padding: 15px;
}
div.content {margin-left: 0;}
}
@media screen and (max-width: 400px) {
ul.sidenav li a {
text-align: center;
float: none;
}
}
</style>
</head>
<body>
<ul class="sidenav">
<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">Tentang</a></li>
</ul>
<div class= "content">
<h2>Navigasi Responsive</h2>
<p>Contoh ini menggunakan query media untuk mengubah navigasi menjadi navigasi atas saat ukuran layar 900px atau kurang.</p>
<p>Query media untuk layar berukuran 400 piksel atau kurang juga ditambahkan, yang akan membuat navigasi menumpuk secara vertikal dan memusatkan tautan navigasi.</p>
<h3>Ubah ukuran jendela browser untuk melihat efeknya.</h3>
</div>
</body></html>
Dropdown Navbar
Cara menambahkan menu dropdown di dalam Navbar.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color:white;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #38444d;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.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;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Beranda</a></li>
<li><a href="#news">Berita</a></li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">Drop-down</a>
<div class="dropdown-content">
<a href="#">Tautan 1</a>
<a href="#">Tautan 2</a>
<a href="#">Tautan 3</a>
</div>
</li>
</ul>
<h3>Menu Dropdown di dalam Navigasi</h3>
<p>Arahkan kursor ke tautan Dropdown untuk melihat menu dropdown.</p>
</body></html>
Tutorial sebelumnya : Membuat Bar Navigasi Vertikal Dengan CSS
Tutorial setelahnya : Membuat Dropdown Dengan CSS
Semua Tutorial CSS : Tutorial CSS