Sepenuhnya kompatibel dengan menu lipat buffer sekunder yang dapat disorot

Akhir-akhir ini saya cukup sibuk dan tidak mengurus blog saya selama beberapa bulan. Sekarang saya akan memilah contoh menu yang baru saja dibuat di proyek dan membagikannya.

Tata letak yang paling umum digunakan dalam sistem backend atau OA sering kali adalah tata letak layar penuh, yang umumnya merupakan tata letak dengan tiga baris dan dua kolom di bagian atas, tengah, dan bawah, dengan header, footer, menu kiri, dan bingkai ifame halaman di sebelah kanan. Oleh karena itu, menu sekunder yang dapat dilipat sering digunakan. Contoh ini adalah untuk mengimplementasikan menu lipat buffer sekunder yang lebih umum dan dapat disorot.

Fitur :

1. Sepenuhnya kompatibel, browser diuji: IE5.5, IE6, IE7, IE8, FF3.0, Google, Safari 4.0, Opera9.0.
2. Struktur htmlnya elegan dan ringkas, tanpa tag yang berlebihan, yang kondusif untuk keluaran loop program.
3. Gaya dan struktur dipisahkan, dan Anda dapat memodifikasi gaya yang berbeda di lembar gaya.
4. Item yang dipilih saat ini disorot. Menu tingkat pertama dan menu tingkat kedua dapat disorot.
5. Animasi penyangga yang elegan dari lapisan lipat.
6. Paling cocok untuk backend dan beberapa antarmuka sistem OA.

kekurangan :

1. Anti-refresh tidak didukung. Fungsi ini seharusnya tidak banyak berguna di sistem aplikasi latar belakang, jadi fungsi ini belum ditambahkan.
2. Efek buffering tidak muncul di IE6. Untuk IE6, efeknya akan melemah.

3. Mari kita bahas secara singkat beberapa ide sederhana dan permasalahan yang dihadapi dalam membuat menu seperti itu.

   Secara umum, saat membuat efek, proses produksi saya adalah menggambar terlebih dahulu konten lapisan struktur HTML, kemudian menulis gayanya, lalu menambahkan beberapa lapisan gula pada efek kue, seperti efek khusus JS dan sebagainya. Saya tidak tahu model proses apa yang dimiliki para ahli.

   Lapisan struktural :

   Ide lapisan struktural umumnya didasarkan pada pemahaman persepsi, biasanya dengan rendering, dan berdasarkan rendering ini struktur HTML yang paling ringkas dibangun. Seperti yang ditunjukkan pada gambar di atas, kesan pertama yang muncul adalah menggunakan daftar UL yang tidak berurutan, tapi... ini adalah daftar bertingkat dua. Ini adalah masalah pertama yang perlu kita pertimbangkan.

   Jadi strukturnya akan terlihat seperti ini:

   Bila ada menu tingkat kedua, itu adalah struktur UL bersarang. Bila tidak ada menu tingkat kedua, maka adalah sebagai berikut:

   <ul kelas="menu">
   <li><a href="#none">Item menu tingkat pertama</a></li>
   </ul>

   Tentu saja, Anda juga dapat menggunakan metode daftar terurut dl-dt-dd untuk membuat struktur bersarang ini, bergantung pada situasi Anda yang sebenarnya.

   Dengan lapisan struktural paling orisinal, Anda perlu menambahkan beberapa kait yang diperlukan untuk CSS dan JS untuk mengontrol gaya dan efek. Saya selalu menentang metode menambahkan banyak nama kelas, yang akan meningkatkan ukuran halaman, jadi yang paling banyak efisien Pendekatannya adalah dengan menerapkan satu atau dua nama kelas yang diperlukan ke wadah induk, dan kemudian menggunakan pemilih anak (grup) untuk mengatur berbagai pengaturan yang dipersonalisasi di style sheet. Dalam struktur di atas, berapa banyak nama kelas yang ingin Anda gunakan untuk mendefinisikan semua gaya?

   Pendekatan saya adalah dengan hanya menggunakan tiga nama kelas untuk mengontrol semua tampilan gaya. Salah satunya adalah UL tingkat atas, yang didefinisikan sebagai class = "menu", yang lainnya adalah wadah menu tingkat kedua, yaitu, UL yang disarangkan mendefinisikan kelas = "level2", dan yang terakhir adalah item menu tingkat pertama. li mendefinisikan class="level1" , dengan tiga kait ini, Anda dapat memanipulasi gaya seluruh struktur.

   Lapisan presentasi :

   Pengaturan style sheet sangat sederhana. Satu-satunya hal yang perlu diperhatikan adalah untuk memudahkan JS mengontrol tampilan dan penyembunyian menu sekunder dan mencatat status sorotan dari item yang saat ini dipilih, saya tidak menggunakan hover pseudo -kelas untuk mencapai efek slide-in dan slide-out dari mouse. Kode kunci untuk mengontrol gaya menggunakan JS adalah sebagai berikut:

   Gaya menu tingkat pertama

   /*Menu tingkat pertama gaya tiga keadaan, untuk panggilan JS*/
   .menu li.level1 a{display:block;line-height:31px;height:31px;padding-left:50px; font-size:12px;color:#fff;background:url(../images/menubg.gif ) jangan ulangi kiri atas;}
   .menu li.level1 a.hove{posisi latar belakang:kiri -31px;}
   .menu li.level1 a.cur{posisi latar belakang:kiri -62px;}

   Gaya menu sekunder

   /*Menu sekunder gaya tiga keadaan untuk panggilan JS*/
   .menu li.level1 a{display:block;line-height:31px;height:31px;padding-left:50px; font-size:12px;color:#fff;background:url(../images/menubg.gif ) jangan ulangi kiri atas;}
   .menu li.level1 a.hove{posisi latar belakang:kiri -31px;}
   .menu li.level1 a.cur{posisi latar belakang:kiri -62px;}

   Lapisan perilaku :

   Seperti disebutkan sebelumnya, kita belum mendefinisikan efek tiga keadaan menu di style sheet, jadi kita perlu mengikat kejadian onmouseover, onmouseout, dan onclick ke setiap item menu untuk mensimulasikan efek ini. Di lapisan struktur, kami tidak menentukan ID dari total wadah ini, tetapi hanya menentukan nama kelas, jadi kami menambahkan metode getElementsByClassName() yang diperluas di JS (terima kasih kepada teman saya Situ Zhengmei) untuk mendapatkan objek ini berdasarkan kelas nama. Gunakan penutupan loop untuk mengikat ketiga peristiwa ini.

   Saya tidak akan menjelaskan kode detailnya satu per satu. Komentar di Demo sangat jelas. Silakan unduh ke komputer lokal Anda untuk menjelajah.

   Jika Anda memiliki pertanyaan, silakan posting dan diskusikan di blog ini. Semoga Anda senang menggunakannya!

   <li><a href="#none">Item menu tingkat pertama</a>
   <ul>
   <li><a href="#none">Item menu tingkat kedua</a></li>
   </ul>
   </li>