Tutorial CSS

RUMAH CSS Pengenalan CSS Sintaks CSS Pemilih CSS CSS Bagaimana caranya? Komentar CSS Warna CSS Latar Belakang CSS Batas CSS Margin CSS Lapisan CSS Tinggi/Lebar CSS Model Kotak CSS Garis Besar CSS Teks CSS Font CSS Ikon CSS Tautan CSS Daftar CSS Tabel CSS Tampilan CSS CSS Max-lebar Posisi CSS indeks Z CSS CSS Meluap CSS Float CSS Inline-blok Perataan CSS Penggabung CSS Kelas Pseudo CSS CSS Pseudo-elemen Opasitas CSS Bilah Navigasi CSS Dropdown CSS Galeri Gambar CSS Sprite Gambar CSS Pemilih Attr CSS Formulir CSS Penghitung CSS Tata Letak Situs Web CSS Unit CSS Kekhususan CSS CSS !penting Fungsi Matematika CSS

CSS Lanjutan

Sudut Bulat CSS Gambar Perbatasan CSS Latar Belakang CSS Warna CSS Kata Kunci Warna CSS Gradien CSS Bayangan CSS Efek Teks CSS Font Web CSS Transformasi 2D CSS Transformasi 3D CSS Transisi CSS Animasi CSS Tips Alat CSS Gambar Gaya CSS Refleksi Gambar CSS Kesesuaian objek CSS Posisi objek CSS Penyamaran CSS Tombol CSS Paginasi CSS CSS Beberapa Kolom Antarmuka Pengguna CSS Variabel CSS Ukuran Kotak CSS Kueri Media CSS Contoh MQ CSS CSS Flexbox

CSS Responsif

Perkenalan RWD Area Pandang RWD Tampilan Kotak RWD Kueri Media RWD Gambar RWD Video RWD Kerangka RWD Template RWD

Kotak CSS

Pengenalan kisi-kisi Wadah Kotak Item Kotak

CSS SASS

Tutorial SASS

Contoh CSS

Template CSS Contoh CSS kuis css Latihan CSS Sertifikat CSS

Referensi CSS

Referensi CSS Pemilih CSS Fungsi CSS Referensi CSS Aural Font Aman Web CSS CSS Animasi Unit CSS Konverter CSS PX-EM Warna CSS Nilai Warna CSS Nilai Default CSS Dukungan Peramban CSS

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 lain
  • display: 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 bagus
  • background-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-rightproperti 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, bottomatau leftagar 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