Yours is actually much smoother for me, but that might be due to some intended animation delays or something.
Show HN: Mimicking the Bloomberg menu widget without JavaScript
51–60 of 144 posts
Re: Show HN: Mimicking the Bloomberg menu widget without JavaScript
#52Earlier quoted context omitted.
Yes, there are some great tips. I still think this style menu is just bad, though. Although certain tweaks can improve the UX, it's still an frustratingly unusable interface for people with certain motor disabilities and even just older users whose mouse/trackpad skills are not great.
At this point, the department menu is an alternative to search. It doesn't need to be universally accessible or forgiving to poor motor control, because in terms of footprint it is tiny. I have used it before and it was just fine for me, and if some proportion of their customers have a similar experience, then it seems well worthwhile.
I completely disagree with this sentiment. Everything in a UI that you can do with a mouse should be tolerant of disabilities that people who use a mouse might be going throug (tremors etc). A user shouldn't have to try to do something and become frustrated in order to discover that it is "not for people with poor motor skills". We should do better. What you describe as "well worthwhile" still strikes me as woefully incomplete and annoying. Every user could potentially have poor motor skills at some point due to temporary causes.
It's not the end of the world of course. I just wouldn't think of "I have used it before and it was just fine for me" as a good reason to not strive for a more universal approach to interface design.
Re: Show HN: Mimicking the Bloomberg menu widget without JavaScript
#53I like the menu on Stripe.com. Make a pure CSS version of that and you're king :)
Should be possible, but I don't get what's to like so much in unnecessary animations sucking your battery and making the whole experience awful on underpowered hardware.
I have Intel GPU with hidpi screen - Stripe's menu drops frames and spins up the fans.
Re: Show HN: Mimicking the Bloomberg menu widget without JavaScript
#54Context: 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…
Great job mimicking the menu with just pure CSS! You even got the fade/slide down effect mostly there.
From a UX perspective there's a reason they used Javascript. For example, if you hover over "Politics" and want to click on "2018 Women Candidates" naturally you move your mouse at an angle. Which causes you to lose the menu when it mouses over "Technology". This is solved by tracking the mouse movement and holding the current menu open if the movement is at a specific angle
I'd like to read your write up if you do it :)
Re: Show HN: Mimicking the Bloomberg menu widget without JavaScript
#55Awful 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-...
Yeah I've had to build a similar menu, it's simple solution but makes a huge usability difference.
Re: Show HN: Mimicking the Bloomberg menu widget without JavaScript
#56Awful 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.
I agree, so I went on and fixed it! I explained what I thought was the issue, which turned out to be a very minor visual bug, and the actual issue and fix in a Medium post:
https://medium.com/@fpresencia/fixing-bloomberg-menu-mimic-6...
Edit: PR merged; removed own link
Re: Show HN: Mimicking the Bloomberg menu widget without JavaScript
#57Context: 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…
Any specific reason why you haven't used the old "Son of Suckerfish" approach? [0] It would have solved the "stay open on hover" problem and made for much cleaner, more semantically meaningful and accessible html IMHO. Still, really glad to see people trying and succeeding in doing simple web stuff without the need for unnecessary javascript. Good job! [0] http://www.htmldog.com/articles/suckerfish/dropdowns/
Wow, blast from the past. Still remember implementing that on some of my first websites.
Re: Show HN: Mimicking the Bloomberg menu widget without JavaScript
#58Awful 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.
I agree, so I went on and fixed it! I explained what I thought was the issue, which turned out to be a very minor visual bug, and the actual issue and fix in a Medium post: https://medium.com/@fpresencia/fixing-bloomberg-menu-mimic-6... Edit: PR merged; removed own link
Merged!
Re: Show HN: Mimicking the Bloomberg menu widget without JavaScript
#59Earlier quoted context omitted.
I agree, so I went on and fixed it! I explained what I thought was the issue, which turned out to be a very minor visual bug, and the actual issue and fix in a Medium post: https://medium.com/@fpresencia/fixing-bloomberg-menu-mimic-6... Edit: PR merged; removed own link
Merged!
Thanks! BTW, the :active trick is very, very neat. It took me a bit to understand that it was so you can actually click on the links. I normally use checkboxes for that, but I might find some use for the :active hack.
Re: Show HN: Mimicking the Bloomberg menu widget without JavaScript
#60I like the menu on Stripe.com. Make a pure CSS version of that and you're king :)
Should be possible, but I don't get what's to like so much in unnecessary animations sucking your battery and making the whole experience awful on underpowered hardware. I have Intel GPU with hidpi screen - Stripe's menu drops frames and spins up the fans.
I agree. Browsers should communicate the user's OS settings of "animated GUI", so users can get what they prefer.