Menu dengan 'kawasan hit dinamik'

Menu flyout menunjukkan cabaran yang unik: mewujudkan menu hover yang diaktifkan yang masih boleh digunakan untuk semua pengguna, termasuk mereka yang tidak mempunyai tikus. Isu teras terletak pada tingkah laku hover-off. Apabila submenu muncul pada hover, tetikus pengguna mesti menavigasi jalan sempit untuk berinteraksi dengannya. Pergerakan tetikus yang tidak disengajakan di luar kawasan ini menyebabkan menu ditutup, mengakibatkan pengalaman pengguna yang mengecewakan.

Masalah ini telah ditangani sebelum ini, terutamanya dengan penggunaan "kawasan hit tersembunyi." Walaupun kurang biasa sekarang, teknik ini, yang sebelum ini digunakan oleh Amazon, melibatkan secara dinamik mewujudkan kawasan yang tidak kelihatan (sering menggunakan SVG) yang memanjangkan sasaran hover di luar submenu yang kelihatan. Ini memastikan menu tetap terbuka walaupun tetikus secara ringkas meninggalkan kawasan submenu yang kelihatan.

Pelaksanaan moden pendekatan ini, yang dipamerkan oleh Hakim El Hattab pada CSS Day 2019, dengan elegan menggunakan SVG untuk mewujudkan kawasan hit secara dinamik. Bidang itu sendiri tidak kelihatan, tetapi mereka secara berkesan mewujudkan zon hover yang lebih besar dan lebih memaafkan.

Petikan video persembahan El Hattab (bermula di bahagian yang berkaitan) boleh didapati [di sini - YouTube embed akan pergi ke sini jika ini adalah laman web ]

Demo langsung teknik ini boleh didapati di perpustakaan corak Slides.com.

Atas ialah kandungan terperinci Menu dengan 'kawasan hit dinamik'. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!