11–20 of 144 posts
If hovering over a section doesn't enable access to that section, then don't show the expanded version. Wait for a click event to show it at all.
Awful usability. I expect that when hovering over a section and moving my cursor to the right I would stay within that section, but it always just reverts to home or whatever other section I've clicked. If hovering over a section doesn't enable access to that section, then don't show the expanded version. Wait for a click event to show it at all.
http://bjk5.com/post/44698559168/breaking-down-amazons-mega-...
Awful usability. I expect that when hovering over a section and moving my cursor to the right I would stay within that section, but it always just reverts to home or whatever other section I've clicked. If hovering over a section doesn't enable access to that section, then don't show the expanded version. Wait for a click event to show it at all.
There's a good article about Amazon implementing this feature for their mega menu. Blew me away when I first read it, it's very obvious and simple in hindsight. http://bjk5.com/post/44698559168/breaking-down-amazons-mega-...
Awful usability. I expect that when hovering over a section and moving my cursor to the right I would stay within that section, but it always just reverts to home or whatever other section I've clicked. If hovering over a section doesn't enable access to that section, then don't show the expanded version. Wait for a click event to show it at all.
Well done! Moving the mouse to a child resets the position though. You may need some JS to do some fancy stuff like here: http://bjk5.com/post/44698559168/breaking-down-amazons-mega-... Or to keep it JS free there might be a way to structure the HTML similar to: . Hover a :hover pseudo on will also fire when hovering over .
Even the triangular cursor path thing could probably be done with just CSS, a short-lived extra element in the childnav that starts transforming away on hover, making the next nav item accessible if the intent turns out not to be to move to the submenu.
Awful usability. I expect that when hovering over a section and moving my cursor to the right I would stay within that section, but it always just reverts to home or whatever other section I've clicked. If hovering over a section doesn't enable access to that section, then don't show the expanded version. Wait for a click event to show it at all.
That's not the actual Bloomberg[0] menu. This copy does not seem to implement that feature, which is one of the most important features to have I think. [0] http://www.bloomberg.com/
Context: I like the Bloomberg site and their drop-down menu is cool. Purely as a challenge, I set out to mimick the styles and behaviour of that menu without using JavaScript and trying to keep the HTML/CSS as minimal as possible. Their menu widget does not work if you switch of JS (but this was not a motivation for me to make this). Tested on IE 11, Edge 12, latest Chrome stable and Firefox dev on Windows 10. Source…
I once prefered Pure CSS stuff until I learned Javascript myself. Now I've come to loathe that approach on complex menus and widgets.
Mainly I dislike using them because I have to refactor them to use Javascript so they can be stateful (reacting to an active category or something indicated by the url or querystrings, etc.
Again, good job though if it's just for the lulz.
Earlier quoted context omitted.
That's not the actual Bloomberg[0] menu. This copy does not seem to implement that feature, which is one of the most important features to have I think. [0] http://www.bloomberg.com/
not sure what you mean. I've clicked on your link and found the same menu as OP is showing.
Make a pure CSS version of that and you're king :)