Re:Show HN: Mimicking the Bloomberg menu widget without Java...
by dosy on Tuesday June 26, 2018 @11:31PM
(#17405581)
I just added triangular hover regions based on the comments. Debug outlines showing the open paths to the submenus: https://vgy.me/nBfeiA.gif
Re:Show HN: Mimicking the Bloomberg menu widget without Java...
by DonHopkins on Wednesday June 27, 2018 @01:08AM
(#17405905)
Nicely done!
I just posted a comment about this with a link to the 1987 Apple Human Interface Guidelines and page snapshots explaining the design.
https://news.ycombinator.com/item?id=17404345
pp. 87: Hierarchical Menus: https://i.imgur.com/RrEDo3m.png
pp. 88: Figure 3-42: Dragging diagonally to a submenu item: https://i.imgur.com/a0gNWHh.png
I also linked to an article showing how to solve the problem with CSS and without JavaScript!
https://css-tricks.com/dropdown-menus-with-more-forgiving-mo...
Hopefully the author of this article (dosy) can use the css :hover delay technique to make his menus even better than Bloomberg's, without requiring any JavaScript!
Subtle but important details like that easily get lost and forgotten, because it seemed important enough to write down in 1987, but now it's built into macOS and nobody can change it.
It's hard for most people to notice, because the whole point is to invisibly work behind-the-scenes to make selecting from submenus easier without distracting you!
So Apple doesn't mention it any more in their "modern" UI guidelines, since they don't expect macOS application developers to reimplement menus from scratch. But that's what web developers do all the time, so it's important to document and preserve details like this!
I highly recommend reading the original 1987 Apple Human Interface Guidelines to any serious user interface designer! It's quite dated, but so is the Mona Lisa!
https://archive.org/details/applehumaninterf00appl