Bilah Navigasi Horizontal CSS
Bilah Navigasi Horisontal
Ada dua cara untuk membuat bilah navigasi horizontal. Menggunakan item daftar sebaris atau mengambang .
Item Daftar Sebaris
Salah satu cara untuk membuat bilah navigasi horizontal adalah dengan menetapkan elemen <li> sebagai sebaris, selain kode "standar" dari halaman sebelumnya:
Contoh
li
{
display: inline;
}
Contoh menjelaskan:
display: inline;
- Secara default, elemen <li> adalah elemen blok. Di sini, kami menghapus jeda baris sebelum dan sesudah setiap item daftar, untuk menampilkannya dalam satu baris
Item Daftar Mengambang
Cara lain untuk membuat bilah navigasi horizontal adalah dengan mengapungkan elemen <li>, dan menentukan tata letak untuk tautan navigasi:
Contoh
li
{
float: left;
}
a
{
display: block;
padding: 8px;
background-color:
#dddddd;
}
Contoh menjelaskan:
float: left;
- Gunakan float untuk membuat elemen blok mengapung di samping satu sama laindisplay: block;
- Memungkinkan kami untuk menentukan padding (dan tinggi, lebar, margin, dll. jika Anda mau)padding: 8px;
- Tentukan beberapa padding di antara setiap elemen <a>, agar terlihat bagusbackground-color: #dddddd;
- Tambahkan warna latar belakang abu-abu ke setiap elemen <a>
Tip: Tambahkan warna latar belakang ke <ul> alih-alih setiap elemen <a> jika Anda menginginkan warna latar belakang lebar penuh:
Contoh
ul
{
background-color: #dddddd;
}
Contoh Bilah Navigasi Horizontal
Buat bilah 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;
}
Tautan Navigasi Aktif/Saat Ini
Tambahkan kelas "aktif" ke tautan saat ini untuk memberi tahu pengguna di halaman mana dia berada:
Contoh
.active {
background-color: #04AA6D;
}
Tautan Rata Kanan
Ratakan kanan tautan dengan melayangkan 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>
Pembagi Perbatasan
Tambahkan border-right
properti ke <li> untuk membuat pembagi 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;
}
Bilah Navigasi Tetap
Jadikan bilah navigasi tetap berada di bagian atas atau bawah halaman, bahkan saat pengguna menggulir halaman:
Tetap Atas
ul {
position: fixed;
top: 0;
width: 100%;
}
Tetap Bawah
ul {
position: fixed;
bottom: 0;
width: 100%;
}
Catatan: Posisi tetap mungkin tidak berfungsi dengan baik di perangkat seluler.
Navbar Horisontal Abu-abu
Contoh bilah navigasi horizontal abu-abu dengan batas abu-abu tipis:
Contoh
ul {
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}
li a {
color:
#666;
}
Navbar Lengket
Tambahkan position: sticky;
ke <ul> untuk membuat bilah navigasi lengket.
Elemen lengket beralih antara relatif dan tetap, tergantung pada posisi gulir. Itu diposisikan relatif sampai posisi offset yang diberikan terpenuhi di viewport - lalu "menempel" di tempatnya (seperti position:fixed).
Contoh
ul {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
Catatan: Internet Explorer tidak mendukung pemosisian lengket. Safari memerlukan awalan -webkit- (lihat contoh di atas). Anda juga harus menentukan setidaknya satu dari top
, right
, bottom
atau left
agar penempatan tetap berfungsi.
Lebih Banyak Contoh
Topnav Responsif
Cara menggunakan kueri media CSS untuk membuat navigasi teratas yang responsif.
Sidenav responsif
Cara menggunakan kueri media CSS untuk membuat navigasi samping yang responsif.
Navbar tarik-turun
Cara menambahkan menu tarik-turun di dalam bilah navigasi.
Pernah mendengar tentang W3Schools Spaces ? Di sini Anda dapat membuat situs web Anda dari awal atau menggunakan template, dan menghostingnya secara gratis.
Mulai gratis* tidak perlu kartu kredit