5 ms·
Yep, the trick here is to keep the menu open even after the mouse has left the parent menu area. It's so simple yet probably quite difficult to code.
by jameswyse 14y ago
Yep, the trick here is to keep the menu open even after the mouse has left the parent menu area. It's so simple yet probably quite difficult to code.
- trapexit 14y agoNot difficult at all. For a simple fix, one just needs to add a timeout between receiving the mouseOut event and hiding the menu. OS X appears to do something slightly more complicated; it hides the menu immediately if you mouse out away from the submenu, but keeps the menu open for about one second if you mouse out towards it.
- aeosynth 14y agoBut then you couldn't use the `:hover` pseudo selector; you'd have to replace css with javascript.
- dchest 14y agoIn usability vs "purity" of implementation wins usability.
- shimon_e 14y agoThis should really be considered a bug of the css spec.
- TazeTSchnitzel 14y agoThe CSS spec's :hover was never made for dropdowns, it was made for simple on-hover effects, IMO.
- aeosynth 14y agoApparently the CSS spec does allow delayed behavior - http://www.w3.org/TR/css3-transitions/#transition-delay-property http://www.w3.org/TR/css3-transitions/#transition-delay-prop...
- JCB_K 14y agoCould use transition-delay. Supported in all browsers except IE.
- aeosynth 14y agoTHAT IS SO USEFUL.
- dchest 14y agoYes. Not only that, it should keep the submenu open when traveling inside this triangle (but close on timeout if mouse stays still inside it): +--------+ | parent | | +--------+ | /|submenu | | / | | |=====/==| | |=====\==| | | \ | | +------ \| | +--------+ and close immediately when not inside the triangle. Also, if in the parent there's another menu item with submenu somewhere on the path of mouse inside this triangle, ignore this item. For best results, if mouse was inside the submenu for a moment, keep the submenu open until clicking away from it or moving over a different item in the parent menu. So many details!
- spitfire 14y agoUpvoted for the ASCII art alone. That seems to be a lost art, particularly here on HN. Long live the ASCII art diagram!
- reedlaw 14y agoYeah! Was it done in Emacs artist-mode by any chance?
- dchest 14y agoHaha, no, Vim in replace mode. But yeah, artist-mode is awesome.
- nathan_long 14y agoI'm also a big fan of ASCII diagrams. The ones I use to explain my Rails authorization gem, Authority (https://github.com/nathanl/authority#the-flow-of-authority https://github.com/nathanl/authority#the-flow-of-authority), were made using a great tool called Asciiflow: http://www.asciiflow.com/ http://www.asciiflow.com/
- markdotto 14y agoYes! Absolutely. We wanted to add some javascript love to the dropdowns, but ultimately didn't have the time to get it in there for launch. The beautiful part of it is we can always improve :). Much love for the diagram as well—I'll see if I can get Jacob to cook this up.
- esamek 14y agoIts not difficult at all actually. Just requires a timeout for the onmouseover event. jQuery's hover intent would work wonders. Basically show the submenu onmouseover of parent and if no mouseover is detected on the submenu within 400ms => hide the submenu. It gives the user a slight bit of time to move the mouse to the submenu rather than relying on perfect mouse movements.