Bagaimana untuk membuat: menu jendela kain

Buat menu jendela kain

Langkah pertama - Tambahkan HTML:

<!-- Latar belakang -->
<div id="myNav" class="overlay">
  <!-- Btutup latar belakang navigasi -->
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
  <!-- Overlay content -->
  <div class="overlay-content">
    <a href="#">Tentang</a>
    <a href="#">Layanan</a>
    <a href="#">Klien</a>
    <a href="#">Hubungi</a>
  </div>
</div>
/* Gunakan mana-mana elemen untuk membuka/tampilkan menu navigasi penutup (overlay) */
<span onclick="openNav()">buka</span>

Keseluruhan - Tambahkan CSS:

/* Lapisan penutup (latar belakang) */
.overlay {
  /* Tinggi dan lebar bergantung kepada cara anda ingin memaparkan lapisan penutup (lihat JS di bawah) */   
  height: 100%;
  width: 0;
  position: fixed; /* Tetap di tempat */
  z-index: 1; /* Letakkan di atas */
  left: 0;
  top: 0;
  background-color: rgb(0,0,0); /* Warna hitam alternatif (warna cadangan) */
  background-color: rgba(0,0,0, 0.9); /* Hitam dengan kecerahan */
  overflow-x: hidden; /* Litar sumbu x (sumbu horizontal) ditutup */
  transition: 0.5s; /* Efect peralihan 0.5 saat lapisan penutup masuk atau keluar (tinggi atau lebar, bergantung kepada cara pameran) */
}
/* Letakkan kandungan di dalam lapisan penutup (overlay) */
.overlay-content {
  position: relative;
  top: 25%; /* Jarak ke atas 25% tempat */
  width: 100%; /* Lebar 100% */
  text-align: center; /* Teks/tautan di tengah */
  margin-top: 30px; /* Bilangan luaran atas 30px, untuk menghindari konflik dengan tombol tutup di skrin kecil */
}
/* Pautan navigasi di dalam lapisan penutup (overlay) */
.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #818181;
  display: block; /* Tampilkan blok daripada baris dalam */
  transition: 0.3s; /* Efect peralihan warna saat kursor mouse di atas (warna) */
}
/* Apabila anda menempatkan kursor mouse di atas pautan navigasi, ubah warna ia */
.overlay a:hover, .overlay a:focus {
  warna: #f1f1f1;
}
/* Lokasi butang tutup (kanan atas) */
.overlay .closebtn {
  kedudukan: absolu:;
  atas: 20px;
  kanan: 45px;
  ukuran-bahasa: 60px;
}
/* Perubahan saiz bahasa pautan dan pemindahan butang tutup, apabila ketinggian skrin kurang daripada 450 piksel, untuk mengelakkan mereka berlapis */
@media screen and (max-height: 450px) {
  .overlay a {ukuran-bahasa: 20px}
  .overlay .closebtn {
    ukuran-bahasa: 40px;
    atas: 15px;
    kanan: 35px;
  }
}

Tahap ketiga - Tambahkan JavaScript：

Contoh di bawah, dalam masa ia diaktifkan, akan mengguraukan menu navigasi lapisan dari kiri ke kanan (daripada 0 ke 100% lebar):

Guraukan dari sisi

/* Buka semasa pengguna mengklik elemen <span> */
function openNav() {
  document.getElementById("myNav").style.width = "100%";
}
/* Buka semasa pengguna mengklik simbol "x" di dalam lapisan */
function closeNav() {
  document.getElementById("myNav").style.width = "0%";
}

亲自试一试

Contoh di bawah akan menutup menu navigasi lapisan dari atas ke bawah (daripada 0 ke 100% tinggi).

Perhatian:Dalam contoh ini, perhatikan bahawa CSS adalah sedikit berbeza daripada contoh di atas (tinggi asal kini adalah 0, lebar adalah 100%, dan kelebaran-vertikal Untuk tersembunyi（Lumpuhkan guraukan vertikal, kecuali skrin kecil））：

Guraukan dari atas ke bawah

/* Buang */
function openNav() {
  document.getElementById("myNav").style.height = "100%";
}
/* 佩zat */
function closeNav() {
  document.getElementById("myNav").style.height = "0%";
}

亲自试一试

Contoh ini membuka menu navigasi tanpa efek animasi:

Buka menu tanpa animasi

/* Buang */
function openNav() {
  document.getElementById("myNav").style.display = "block";
}
/* 佩zat */
function closeNav() {
  document.getElementById("myNav").style.display = "none";
}

亲自试一试

相关页面

教程：CSS 导航栏