menu css tunjukkan dan sembunyikan

Memaparkan dan menyembunyikan menu CSS

CSS ialah salah satu kemahiran penting untuk pembangun bahagian hadapan Hari ini kita akan belajar cara menggunakan CSS untuk memaparkan dan menyembunyikan menu. Dalam reka bentuk web, menu adalah elemen yang sangat penting Ia boleh meningkatkan pengalaman pengguna, mengoptimumkan susun atur halaman, meningkatkan navigasi laman web dan fungsi carian, dll.

CSS boleh merealisasikan paparan dan penyembunyian menu Kaedah pelaksanaan khusus adalah seperti berikut:

1 Gunakan pemilih CSS untuk memilih elemen yang perlu disembunyikan:

.menu {
     display: none;
}

Dalam menu kod di atas bermaksud memilih elemen dengan menu kelas, dan paparan:tiada bermaksud menyembunyikan elemen ini.

2. Tambahkan gaya CSS pada elemen yang menu perlu dipaparkan:

#show-menu:hover + .menu {
     display: block;
}

#show-menu dalam kod di atas bermaksud memilih elemen dengan id show-menu, + : bermaksud memilih yang berikut Elemen adik beradik .menu bermaksud memilih elemen dengan menu kelas. Elemen .menu dipaparkan apabila tetikus dilegar di atas #show-menu.

Kod lengkap adalah seperti berikut:

<style>
.menu {
     display: none;
}
#show-menu:hover + .menu {
     display: block;
}
</style>

<div id="show-menu">显示菜单</div>
<ul class="menu">
     <li><a href="#">菜单项1</a></li>
     <li><a href="#">菜单项2</a></li>
     <li><a href="#">菜单项3</a></li>
     <li><a href="#">菜单项4</a></li>
</ul>

Dalam kod di atas, apabila tetikus melayang di atas "Tunjukkan Menu", menu akan dipaparkan, dan apabila tetikus keluar, menu akan hilang.

Selain itu, CSS juga menyediakan pelbagai kaedah lain untuk memaparkan dan menyembunyikan menu, termasuk: menggunakan peralihan dalam CSS3, menggunakan JavaScript, dsb. Pembangun boleh memilih kaedah yang hendak digunakan berdasarkan keperluan sebenar.

Selepas mengkaji artikel ini, saya percaya anda telah menguasai kaedah menunjukkan dan menyembunyikan menu dalam CSS Ini adalah kemahiran yang sangat asas untuk pembangun bahagian hadapan dan cara penting untuk meningkatkan pengalaman pengguna tapak web.

Atas ialah kandungan terperinci menu css tunjukkan dan sembunyikan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!