Membuat menu navigasi sampingan gelongsor untuk reka bentuk responsif

Tutorial ini menunjukkan kepada anda bagaimana untuk membina menu navigasi sampingan yang boleh diperkembangkan dengan menggunakan JavaScript dan CSS. Hasil akhir adalah menu moden yang anggun.

inilah demo langsung:

1. Struktur HTML:

Mula dengan menambahkan HTML untuk menu sampingan:

<div class="sidenav" id="sideNavigation">
  <a class="close-btn" href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">×</a>
  <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">About</a>
  <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Features</a>
  <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Contact Us</a>
</div>

<nav class="topnav">
  <a class="ham-icon" href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">
    <svg height="30" id="icoOpen" width="30">
      <path d="M0,5 30,5" stroke="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000" stroke-width="5"></path>
      <path d="M0,14 30,14" stroke="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000" stroke-width="5"></path>
      <path d="M0,23 30,23" stroke="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000" stroke-width="5"></path>
    </svg>
  </a>
</nav>

<main id="main">
  <h1>This Side Navigation Menu Looks Good!</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</main>

Ini menetapkan menu sampingan (

), ikon hamburger (sidenav) untuk membukanya, butang dekat (), dan kawasan kandungan utama (). ham-icon close-btn main 2. Fungsi JavaScript:

JavaScript ini mengendalikan tindakan terbuka dan tutup menu:

Mengklik ikon hamburger memperluaskan menu; Mengklik butang tutup runtuhnya.

document.querySelector("a.ham-icon").addEventListener("click", function(event){
  document.getElementById("sideNavigation").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
});

document.querySelector("a.close-btn").addEventListener("click", function(event){
  document.getElementById("sideNavigation").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
});

3. CSS Styling:

gaya CSS menu dan animasinya:

CSS ini menyediakan animasi slaid licin, mengendalikan limpahan, dan menambah respons untuk skrin yang lebih kecil.

pada badan menghalang bar skrol mendatar.

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bmain {
  transition: margin-left 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  padding: 20px;
  width: 100%;
}

body {
  overflow-x: hidden;
}

a svg {
  transition: all 0.5s ease;
}

a svg:hover {
  transform: rotate(180deg);
}

@media screen and (max-height: 480px) {
  .sidenav {
    padding-top: 3rem;
  }
  .sidenav a {
    font-size: 1.5rem;
  }
}

overflow-x: hidden; 4. Mengeluarkan animasi slaid (pilihan):

Untuk mengeluarkan animasi slaid, tetapkan sifat ke

dalam CSS anda:

transition 0s Ini menjadikan menu muncul dan hilang dengan serta -merta.

.sidenav {
  transition: 0s;
}

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bmain {
  transition: margin-left 0s;
}

Kesimpulan:

menu navigasi sampingan yang mudah namun mudah mudah disesuaikan dan disesuaikan dengan pelbagai keperluan reka bentuk. Pertimbangkan menggunakan kerangka CSS seperti bootstrap atau bulma untuk pilihan gaya yang lebih maju. Terima kasih kepada Monty Shokeen atas sumbangannya!

Atas ialah kandungan terperinci Membuat menu navigasi sampingan gelongsor untuk reka bentuk responsif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!