search

HEIGE-PCloud / DoIt

A clean, elegant and advanced blog theme for Hugo.
https://hugodoit.pages.dev
MIT License
772 stars 194 forks source link

[FEATURE] Dropdown menu functionality #451

Open gerdanfs opened 2 years ago

gerdanfs commented 2 years ago

Describe the feature you want 描述你的功能需求

Dropdown menu functionality for multilevel navigation.

link: https://codingnconcepts.com/hugo/nested-menu-hugo/

eallion commented 1 year ago

👀

keybasegit commented 1 year ago

https://github.com/hugo-fixit/FixIt/blob/master/README.md Hello dear developers. Hugo Theme fixit based on hugo loveit and doit has got demo with drop down menu. You're much better than me to see big picture, correct implementation, criteria which need yo be met. From my viewpoint half way its already done.

I am seeing you're adding new enhancement every week. Thanks very much. Faust

HEIGE-PCloud commented 3 months ago

This is surprisingly difficult. A "hover dropdown menu" with good accessibility that works on all devices requires some careful design and implementation. I am not satisfied with neither https://codingnconcepts.com/hugo/nested-menu-hugo/ nor FixIt's implementation.

A trivial hover menu works great on mouse and keyboard devices, but is completely unusable on a touch device (say a tablet). Upon clicking, the browser just follows the link on the parent element before it can display the menu. Both implementations mentioned previously failed on this. CodingnConcepts' implementation kind of gets around this with its little triangle, but that's too small as a touch target.

Another important functionality is that the menus need to be keyboard navigable. Tabs should be able to iterate through them, arrows keys should work as well, escape key should close them. This needs to be handled carefully.

There are other details such as handling horizontal and vertical overflows. Time delay between the mouse leaving and menu closing. Animinations.

I didn't manage to find any off the shelf library that does all of this. I welcome anyone who want to attempt this share their plans here before proceeding a full implementation.

HEIGE-PCloud commented 3 months ago

The Popover API might save us https://developer.mozilla.org/en-US/docs/Web/API/Popover_API