Efek penyorotan menu adalah metode desain yang sering digunakan di setiap halaman web. Ini secara efektif dapat memberi tahu pengguna di kolom mana mereka berada saat ini. Ini juga cara yang sering saya gunakan. Umumnya halaman web memiliki setidaknya dua tingkat menu. Yang pertama adalah menu bilah navigasi umum di bagian atas, dan yang lainnya adalah menu navigasi kategori di sebelah kiri. Biasanya status saat ini juga harus direkam di menu tingkat kedua ketika menu tingkat pertama disorot.
Jika area header yang berisi menu atas sudah diperbaiki, artinya tidak perlu dimuat ulang setiap saat, dalam hal ini dapat dengan mudah diimplementasikan menggunakan CSS atau JS murni, tetapi hari ini saya tidak akan membicarakan hal ini. Apa yang kita bicarakan hari ini adalah bahwa menu tingkat pertama dan menu tingkat kedua dimuat secara dinamis di setiap halaman , yaitu dimuat sebagai kontrol pengguna. Dalam kasus ini, sulit untuk merekam status menu yang disorot.
Tentu saja, Anda mungkin mengatakan bahwa Anda dapat menggunakan cookie untuk mencatat status terakhir yang disorot yang direkam ketika setiap halaman dimuat. Ya, memang dapat direkam, tetapi metode ini akan menyebabkan masalah pada beberapa aplikasi kompleks yang berisi banyak sub-halaman banyak kebingungan dan masalah bagi pengguna. Misalnya, selama siklus hidup cookie, ketika proyek dibuka kembali, siklus hidup cookie belum sepenuhnya berakhir. Ini juga mencatat status penyimpanan terakhir, dan alamat halaman telah berubah saat ini, sehingga menu yang disorot saat ini Halaman menunjuk to bukanlah apa yang ingin dilihat pengguna. Praktek telah membuktikan bahwa tidak peduli berapa lama Anda mengatur siklus hidup cookie ini, cookie ini tidak dapat menyelesaikan masalah pengguna yang dengan sengaja menyegarkan halaman dengan sempurna. Ini memang merupakan hal yang buruk!
Jadi apakah ada cara yang lebih baik untuk mengatasi situasi ini?
Jawabannya adalah ya. Kita tahu bahwa cara paling ideal untuk mengatasi masalah ini adalah dengan secara eksplisit mengatur gaya sorotan menu saat ini sesuai dengan alamat URL laman saat setiap laman dimuat . Ini menyelesaikan masalah seperti ini dengan sempurna, dan dengan cara ini, tidak peduli seberapa jahatnya pengguna mengklik tombol segarkan, status yang disorot tetap tidak berubah. Begitu Anda mengetahui prinsipnya, penerapannya akan jauh lebih mudah.
lapisan struktural
Lapisan struktur menu tingkat pertama:
<ul id="menu">
<li><a href="default.html">Beranda</a></li>
<li><a href="clothing.html">Perlengkapan pakaian</a></li>
<li><a href="house.html">Perabot Rumah Tangga</a></li>
<li><a href="cosmetic.html">Kosmetik</a></li>
</ul>
Terlihat pada menu tingkat pertama ini, alamat link umumnya tidak memiliki nilai parameter. Lapisan struktural menu sekunder:
<ul id="menu lain">
<li><a href="house.html?pId=2&sId=1">Kebutuhan sehari-hari</a></li>
<li><a href="house.html?pId=2&sId=2">Perabotan kecil</a></li>
<li><a href="house.html?pId=2&sId=3">Aksesori listrik</a></li>
<li><a href="house.html?pId=2&sId=4">Perangkat Tempat Tidur</a></li>
<li><a href="house.html?pId=2&sId=5">Tempat tidur pernikahan</a></li>
<li><a href="house.html?pId=2&sId=6">Tempat tidur anak</a></li>
<li><a href="house.html?pId=2&sId=7">Dekorasi kerajinan</a></li>
<li><a href="house.html?pId=2&sId=8">Alat kebersihan</a></li>
<li><a href="house.html?pId=2&sId=9">Membersihkan Rumah</a></li>
</ul>
Berbeda dengan menu tingkat pertama, kami menambahkan dua nilai parameter ke alamat tautan di menu tingkat kedua. Parameter pId menunjuk ke nomor seri menu tingkat pertama teratas, dan sId adalah nomor urut menu tingkat pertama. menu itu sendiri. Kami menetapkan dua ID berbeda untuk total container ul dari kedua menu ini. Keduanya harus dipanggil di JS, jadi tidak boleh hilang.
lapisan gaya
Mengenai style sebenarnya tidak ada yang istimewa, Anda bisa mengaturnya sesuai style yang Anda inginkan. Satu-satunya hal yang perlu diperhatikan adalah kita perlu mengatur ketiga style status dari menu highlight secara terpisah untuk panggilan dinamis oleh JS. .
/*Tiga pengaturan gaya untuk menu tingkat pertama*/
#menu li a.normal{background:#fff;}//Gaya normal
#menu li a.over{background:#00ff00;} //Gaya bergulir
#menu li a.cur{background:#ff0000;color:#fff;} //Gaya sorot
/*Tiga pengaturan gaya untuk menu sekunder*/
#othermenu li a.normal{background:#fff;} //Gaya normal
#othermenu li a.over{background:#AA7F00;color:#fff;} //Gaya bergulir
#othermenu li a.cur{background:#7F0000;color:#fff;} //Gaya sorot