Bagaimana membuat: menu tetap

Bagaimana membuat menu atas yang tetap

Tahap pertama - Tambahkan HTML:

<div class="navbar">
  <a href="#home">Beranda</a>
  <a href="#news">Berita</a>
  <a href="#contact">Kontak</a>
</div>
<div class="main">
  <p>Beberapa teks beberapa teks beberapa teks beberapa teks..</p>
</div>

Tahap kedua - Tambahkan CSS:

Untuk membuat menu yang tetap di atas, gunakan position:fixed dan top:0Perhatikan, menu tetap akan menutupi konten lainnya. Untuk memperbaiki ini, tambahkan margin atas yang sama atau lebih tinggi seperti tinggi menu di atas konten.

/* Navigasi */
.navbar {
  overflow: hidden;
  background-color: #333;
  position: fixed; /* Menempatkan navigasi di posisi tetap */
  top: 0; /* Menempatkan navigasi di atas halaman */
  width: 100%; /* Lebar penuh */
}
/* Tautan di dalam navigasi */
.navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* Mengubah latar belakang saat menggerakkan mouse */
.navbar a:hover {
  background: #ddd;
  color: black;
}
/* Konten utama */
.main {
  margin-top: 30px; /* Menambahkan margin atas untuk menghindari gangguan konten */
}

Coba sendiri

Bagaimana membuat menu dasar yang tetap

Untuk membuat menu dasar yang tetap, gunakan position:fixed dan bottom:0:

/* Navigasi */
.navbar {
  position: fixed; /* Menempatkan navigasi di posisi tetap */
  bottom: 0; /* Menempatkan bawah navigasi di dasar halaman */
  width: 100%; /* Lebar penuh */
}
/* Konten utama */
.main {
  margin-bottom: 30px; /* Menambahkan margin bawah luar untuk menghindari gangguan konten */
}

Coba sendiri

Halaman yang berhubungan

Panduan:Navigasi CSS