Barru Navigasi Horizontal CSS

Perekomendan kursus:

Garisan navigasi horizontalAda dua cara untuk membuat garisan navigasi horizontal: menggunakanatauInlineFloating

Item daftar

Cara untuk membangun garisan navigasi horizontal adalah, selain kode 'standar' di bab sebelumnya, tentukan elemen <li> sebagai inline:

实例

li {
  display: inline;
}

Coba Sendiri

Penjelasan contoh:

display: inline; - Secara default, elemen <li> adalah elemen blok. Disini, kami menghapus paragraf pindah sebelum dan setelah setiap item daftar, sehingga mereka dapat ditampilkan di baris satu:

Daftar floating

Cara lain untuk membuat garisan navigasi horizontal adalah dengan menggerakkan elemen <li> dengan floating dan menentukan tata letak tautan navigasi:

实例

li {
  float: kiri;
}
a {
  display: blok;
  padding: 8px;
  background-color: #dddddd;
}

Coba Sendiri

Penjelasan contoh:

  • float: kiri; - Gunakan float untuk menggerakkan elemen blok mendekati satu sama lain
  • display: blok; - Menampilkan tautan sebagai elemen blok memungkinkan seluruh area tautan dapat diklik (tidak hanya teks), dan memungkinkan kami untuk menentukan pengisian (jika diperlukan, dapat juga menentukan tinggi, lebar, margin, dll):
  • padding: 8px; - Membuat elemen blok lebih indah
  • background-color: #dddddd; - Tambahkan warna latar abu-abu untuk setiap elemen

Petunjuk:Untuk latar belakang yang mencakup keseluruhan lebar, tambahkan background-color ke <ul> bukannya setiap elemen <a>:

实例

ul {
  background-color: #dddddd;
}

Coba Sendiri

Contoh navigasi horizontal

Buat penuh garisan navigasi horizontal dengan latar belakang berwarna gelap dan ubah warna latar belakang tautan saat pengguna memindahkan kursor ke atas tautan:

实例

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}
li {
  float: kiri;
}
li a {
  display: blok;
  color: putih;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* Ganti warna tautan ke hitam (#111) saat kursor mouse berada di atas */
li a:hover {
  background-color: #111;
}

Coba Sendiri

Tautan navigasi aktif/tidak aktif

Tambahkan kelas "active" ke tautan saat ini, sehingga pengguna tahu dia berada di halaman mana:

实例

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

Coba Sendiri

Menaruh tautan di sebelah kanan

Menggeser item daftar ke kanan untuk menaruh tautan di sebelah kanan (float:right;）：

实例

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

Coba Sendiri

lantai garis

Taruh border-right atur atribut ke <li> untuk membuat penanda pemisah tautan:

实例

/* Tambahkan garis pinggiran abu-abu untuk semua item daftar, kecuali untuk item terakhir (last-child) */
li {
  border-right: 1px solid #bbb;
}
li:last-child {
  border-right: none;
}

Coba Sendiri

Navigasi yang tetap

Mengatur navigasi untuk tetap berada di atas atau di dasar halaman, bahkan saat pengguna menggulir halaman:

Ditempatkan di atas

ul {
  position: fixed;
  atas: 0;
  width: 100%;
}

Coba Sendiri

Ditempatkan di dasar

ul {
  position: fixed;
  bottom: 0;
  width: 100%;
}

Coba Sendiri

Perhatian:Posisi tetap mungkin tidak berfungsi dengan baik di perangkat bergerak.

Tabung navigasi horizontal berwarna abu-abu

Contoh tabung navigasi horizontal berwarna abu-abu dengan garis pinggiran halus

实例

ul {
  border: 1px solid #e7e7e7;
  background-color: #f3f3f3;
}
li a {
  color: #666;
}

Coba Sendiri

Navigasi yang tumpat

Tambahkan penempatan: tetap;untuk membuat navigasi yang tumpat.

Tumpat element akan berpindah antara relatif dan tetap berdasarkan posisi gerakan. Ia berada dalam posisi relatif, sampai mendapat posisi offset yang diberikan di dalam viewport - kemudian disematkan di posisi yang sesuai (contoh: position:fixed).

实例

ul {
  penempatan: -webkit-tetap; /* Safari */
  penempatan: tetap;
  atas: 0;
}

Coba Sendiri

Perhatian:Internet Explorer, Edge 15 dan versi yang lebih awal tidak mendukung penempatan lepas. Safari memerlukan awalan -webkit- (lihat contoh di atas). Anda juga harus menentukan atas、kanan、bawah atau kiri Setidaknya satu, untuk membuat penempatan lepas bekerja.

Lebih Banyak Contoh

Navigasi Atas Beraksi
Bagaimana untuk Membuat Navigasi Atas Beraksi dengan Kueri Media CSS.
Navigasi Sisi Beraksi
Bagaimana untuk Membuat Navigasi Sisi Beraksi dengan Kueri Media CSS.
Navigasi Tarik Turun
Bagaimana untuk Menambahkan Menu Tarik Turun di Paling Atas Navigasi.