Contoh untuk menerangkan cara menyembunyikan dan memaparkan bar menu menggunakan css

Dalam pembangunan laman web, bar menu selalunya merupakan bahagian penting dalam tapak web, menjadikannya mudah untuk pengguna menavigasi dan mengendalikan. Walau bagaimanapun, kadangkala kami ingin menyembunyikan bar menu dalam situasi tertentu, seperti untuk mengurangkan ruang halaman semasa mengoptimumkan untuk mudah alih, atau semasa membuat tapak web responsif, bar menu perlu disembunyikan pada peranti skrin kecil, dan apabila butang hamburger diklik Baru menunjukkannya. Dalam artikel ini, kami akan memperkenalkan beberapa teknik CSS asas untuk menyembunyikan dan menunjukkan bar menu.

1. Gunakan atribut paparan untuk mengawal paparan dan menyembunyikan bar menu

Atribut paparan ialah atribut yang sangat asas dalam CSS, digunakan untuk mengawal mod paparan elemen HTML. Atribut ini mempunyai berbilang parameter, termasuk beberapa nilai biasa: blok (elemen peringkat blok), sebaris (elemen sebaris), tiada (tidak dipaparkan), dsb.

Untuk menyembunyikan bar menu, anda boleh menambah kod CSS berikut pada helaian gaya:

.menu {
    display: none;
}

Dengan cara ini, apabila halaman dimuatkan, bar menu akan disembunyikan . Jika kita ingin memaparkan bar menu apabila butang hamburger diklik, kita boleh mengikat acara pada butang dan memaparkannya dengan mengubah suai atribut paparan elemen bar menu untuk disekat apabila diklik. Contoh kod adalah seperti berikut:

Kod HTML:

<div class="menu-toggle">
  <button>Toggle Menu</button>
</div>
<nav class="menu">
  <ul>
    <li><a href="#">Menu Item 1</a></li>
    <li><a href="#">Menu Item 2</a></li>
    <li><a href="#">Menu Item 3</a></li>
  </ul>
</nav>

Kod CSS:

.menu {
  display: none;
}

/* 在移动端，菜单展现后将其置为 fixed 定位 */
@media screen and (max-width: 600px) {
  .menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    padding: 2em;
    box-sizing: border-box;
    z-index: 9999;
  }
}

/* 汉堡按钮样式 */
.menu-toggle button {
  background-color: #000;
  color: #fff;
  padding: 0.6em;
  border: none;
}

/* 展开菜单时的样式 */
.menu-toggle.active + .menu {
  display: block;
}

Kod JavaScript:

const toggleBtn = document.querySelector('.menu-toggle button');
const menu = document.querySelector('.menu');

toggleBtn.addEventListener('click', function() {
  this.parentElement.classList.toggle('active');
  menu.classList.toggle('active');
});

Sebagai ditunjukkan di atas, Kami menggunakan pemilih kelas pseudo :active dalam CSS dan atribut classList dalam JavaScript untuk menambah kelas .active pada butang hamburger apabila mengkliknya Apabila mengembangkan menu, kami mengubah suai atribut paparan bar menu elemen untuk disekat untuk melaksanakan bar menu Tunjukkan dan sembunyikan.

2. Kawal paparan gelongsor bar menu melalui animasi CSS

Selain menggunakan atribut paparan untuk mengawal paparan dan menyembunyikan elemen, terdapat banyak animasi yang menarik teknik dalam CSS. Bantu kami mencapai kesan paparan yang lebih lancar. Antaranya, beberapa kesan peralihan elemen mudah boleh dicapai dengan menggunakan atribut peralihan dalam CSS.

Khususnya, dalam paparan bar menu, anda boleh menambah kesan peralihan pada elemen bar menu untuk mengubahnya daripada keadaan tersembunyi kepada keadaan yang dipaparkan.

Tambah kod CSS berikut:

.menu {
  position: fixed;
  top: 0;
  left: -100%;
  width: 80%;
  height: 100%;
  background-color: #fff;
  padding: 2em;
  box-sizing: border-box;
  transition: left 0.3s ease-in-out;
}

/* 展开菜单时加上移动效果 */
.menu.active {
  left: 0;
}

Tetapkan kedudukan kepada tetap pada elemen bar menu .menu untuk mengekalkannya dalam kedudukan tetap, dan kemudian tetapkan sifat kiri kepada -100 %. Dengan cara ini, bar menu tersembunyi di sebelah kiri halaman, di luar skrin pengguna. Pada masa yang sama, kami menetapkan kesan peralihan untuk elemen bar menu: apabila atribut kirinya berubah, peralihan dibuat melalui kesan pelonggaran mudah masuk untuk mencapai kesan paparan yang lebih lancar.

Apabila butang hamburger diklik, kami menggunakan kod JavaScript untuk menukar atribut kiri elemen bar menu daripada -100% kepada 0, dan pada masa yang sama menambah kelas yang sepadan .active pada bar menu unsur. Contoh kod adalah seperti berikut:

const toggleBtn = document.querySelector('.menu-toggle button');
const menu = document.querySelector('.menu');

toggleBtn.addEventListener('click', function() {
  this.parentElement.classList.toggle('active');
  menu.classList.toggle('active');
});

Dalam peristiwa klik butang hamburger, kami menggunakan atribut classList dalam JavaScript untuk mengawal paparan dan menyembunyikan bar menu dengan menukar kelas .active. Pada masa yang sama, apabila kelas .menu ditambahkan pada elemen .active, atribut kiri elemen bar menu berubah daripada -100% kepada 0, mewujudkan kesan gelongsor yang lancar melalui kesan peralihan yang ditetapkan.

Ringkasan

Dalam proses pembangunan laman web, kaedah pembentangan bar menu merupakan isu yang sering perlu dipertimbangkan. Menggunakan pelbagai teknik sifat CSS, anda boleh merealisasikan kaedah paparan yang berbeza seperti menyembunyikan dan meluncurkan paparan bar menu, memberikan pengguna pengalaman operasi yang lebih mudah. Saya harap artikel ini akan memberi inspirasi kepada anda dalam pembangunan laman web dan membantu anda mencapai reka bentuk web yang lebih baik.

Atas ialah kandungan terperinci Contoh untuk menerangkan cara menyembunyikan dan memaparkan bar menu menggunakan css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!