Barru Navigasi Horizontal CSS

Navigasi horisontal

Ada dua cara untuk membuat navigasi horisontal: menggunakanTeksatauGeserItem.

Item daftar dalam teks

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

实例

li {
  display: inline;
}

Coba sendiri

Pengertian contoh:

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

Item daftar yang digeser

Cara lain untuk membuat navigasi horisontal adalah menggeser elemen <li> dan menentukan tata letak tautan navigasi:

实例

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

Coba sendiri

Pengertian contoh:

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

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

实例

ul {
  background-color: #dddddd;
}

Coba sendiri

Contoh navigasi horisontal

Buat navigasi horisontal dasar dengan latar belakang berwarna gelap dan berubah 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;
}
/* 当鼠标悬停时把链接颜色更改为 #111（黑色） */
li a:hover {
  background-color: #111;
}

Coba sendiri

活动/当前导航链接

向当前链接添加 "active" 类，这样用户就知道他/她在哪个页面上：

实例

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

Coba sendiri

右对齐链接

通过将列表项向右浮动来右对齐链接（float:right;）：

实例

Coba sendiri

边框分隔栏

将 border-right 属性添加到

  • ，以创建链接分隔符：

    实例

    /* 为所有列表项添加灰色右边框，最后一项（last-child）除外 */
li {
  border-right: 1px solid #bbb;
}
li:last-child {
  border-right: none;
}

    Coba sendiri

    • 固定的导航栏

    使导航栏保持在页面的顶部或底部，即使用户滚动页面也是如此：

    固定在顶部

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

    Coba sendiri

    固定在底部

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

    Coba sendiri

    Perhatian:固定定位在移动设备上可能无法正常工作。

    灰色水平导航栏

    带有细灰色边框的灰色水平导航栏的实例

    实例

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

    Coba sendiri

    粘性导航栏

    为

      添加 posisi: sticky;，以创建粘性导航栏。

      粘性元素会根据滚动位置在相对和固定之间切换。它是相对定位的，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置（比如 position:fixed）。

      实例

      ul {
  posisi: -webkit-sticky; /* Safari */
  posisi: sticky;
  atas: 0;
}

      Coba sendiri

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

    Beberapa contoh lain

    Navigasi atas berespon
    Bagaimana menggunakan kueri media CSS untuk membuat navigasi atas berespon.
    Navigasi samping berespon
    Bagaimana menggunakan kueri media CSS untuk membuat navigasi samping berespon.
    Menu Navigasi Turun
    Bagaimana menambahkan menu turun di dalam menu navigasi.