Bagaimana untuk menyembunyikan bar navigasi menggunakan CSS

Seperti yang kita sedia maklum, bar navigasi adalah bahagian yang sangat penting dalam tapak web. Ia boleh membantu pengguna menavigasi kandungan tapak web dengan lebih baik dan memberikan pengalaman pengendalian yang mesra pengguna. Walau bagaimanapun, dalam beberapa kes khas, kadangkala kita perlu menyembunyikan bar navigasi untuk menjadikan halaman web lebih mudah dan lebih cantik. Artikel ini akan memperkenalkan cara menggunakan CSS untuk menyembunyikan bar navigasi.

1. Atribut paparan CSS

Atribut paparan CSS digunakan untuk menentukan cara elemen dipaparkan dalam dokumen. Antaranya, display:none; boleh menyembunyikan sepenuhnya elemen dan tidak mengisi ruang dalam aliran dokumen, seperti yang ditunjukkan di bawah:

nav {
  display: none;
}

Menggunakan kod CSS di atas pada elemen bar navigasi akan menjadikan ini Bar navigasi hilang sepenuhnya, termasuk ruang yang diduduki oleh unsur tersebut. Walau bagaimanapun, kaedah ini mempunyai kelemahan yang ketara, iaitu, sebaik sahaja kami menyembunyikan elemen bar navigasi menggunakan kaedah ini, kami tidak boleh memulihkan paparan elemen ini. Oleh itu, kaedah ini tidak begitu sesuai dalam sesetengah situasi di mana kawalan dinamik paparan elemen diperlukan.

2. Atribut keterlihatan CSS

Atribut keterlihatan CSS digunakan untuk menentukan keterlihatan elemen dalam dokumen. Antaranya, visibility:hidden; boleh menyembunyikan elemen dalam dokumen, tetapi elemen itu masih akan menduduki ruang dalam aliran dokumen, seperti yang ditunjukkan di bawah:

nav {
  visibility: hidden;
}

Gunakan atribut keterlihatan untuk menyembunyikan elemen bar navigasi , dan anda boleh mengekalkan ruang yang diduduki oleh ruang, yang sangat berguna dalam senario di mana elemen bar navigasi perlu dipaparkan semula. Walau bagaimanapun, elemen tersembunyi tidak akan hilang lagi, yang boleh menjejaskan reka letak halaman web.

3. Gunakan atribut kedudukan CSS

Jika kita ingin menyembunyikan elemen bar navigasi, tetapi tidak mahu menjejaskan reka letak halaman web, kita boleh menggunakan atribut kedudukan CSS untuk mencapai ini . Kaedah khusus adalah untuk menetapkan ketinggian elemen bar navigasi dahulu kepada 0, dan kemudian menggunakan kedudukan mutlak untuk meletakkan bar navigasi ke bahagian atas skrin, seperti ditunjukkan di bawah:

nav {
  height: 0;
  position: absolute;
  top: 0;
}

Dengan cara ini , elemen bar navigasi akan disembunyikan dan tidak menjejaskan kedudukan elemen lain dalam aliran dokumen. Perlu diingatkan bahawa kaedah ini sesuai untuk situasi di mana ketinggian bar navigasi diketahui Jika ketinggian bar navigasi tidak pasti, anda mungkin perlu menggunakan JavaScript untuk mendapatkan ketinggian bar navigasi.

4. Gunakan atribut CSS3

Dalam CSS3, kami juga boleh menggunakan beberapa atribut untuk mengawal paparan atau penyembunyian elemen dengan lebih fleksibel. Dua atribut yang paling biasa digunakan ialah kelegapan dan transformasi.

• atribut kelegapan

Atribut kelegapan digunakan untuk menentukan nilai lalainya ialah 1, yang bermaksud kelegapan lengkap. Apabila kita menetapkan kelegapan elemen kepada 0, elemen itu hilang sepenuhnya tetapi masih mengambil ruang dalam aliran dokumen, seperti yang ditunjukkan di bawah:

nav {
  opacity: 0;
}

• transformasikan atribut

Atribut ubah bentuk digunakan untuk menentukan kesan ubah bentuk unsur Dua kesan ubah bentuk yang paling biasa digunakan ialah skala dan terjemah. Apabila kita skala(0) atau menterjemah(-100%) elemen, elemen itu akan hilang sepenuhnya, tetapi masih akan menempati ruang dalam aliran dokumen, seperti yang ditunjukkan di bawah:

nav {
  transform: scale(0);
  // 或
  transform: translate(-100%);
}

Dengan cara ini, Kami boleh menggunakan sifat CSS3 untuk mengawal paparan dan penyembunyian elemen dengan lebih fleksibel.

Ringkasnya, kita boleh menggunakan beberapa sifat CSS mudah untuk menyembunyikan elemen bar navigasi Kaedah yang paling biasa ialah menggunakan sifat kedudukan CSS untuk meletakkan bar navigasi ke bahagian atas skrin. Sudah tentu, jika kita perlu mengawal paparan atau penyembunyian elemen dalam adegan dinamik, kita boleh memilih untuk menggunakan sifat CSS3 seperti kelegapan atau mengubah untuk mencapai ini.

Atas ialah kandungan terperinci Bagaimana untuk menyembunyikan bar navigasi menggunakan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!