Live data from Hacker News

Show HN: Mimicking the Bloomberg menu widget without JavaScript

dosyago-coder-0.github.io

31–40 of 144 posts

Re: Show HN: Mimicking the Bloomberg menu widget without JavaScript

#31

I looked at the source, looks neat except one thing: shouldn't there be double quotes around all href targets? The ones that have a single quote (e.g. What's Inside All the iPhones ) get marked in red in firefox's view source due to this

> shouldn't there be double quotes around all href targets?

Only the ones that need it. Like for example when there is a single quote in the link like you mentioned.

Re: Show HN: Mimicking the Bloomberg menu widget without JavaScript

#32

I looked at the source, looks neat except one thing: shouldn't there be double quotes around all href targets? The ones that have a single quote (e.g. What's Inside All the iPhones ) get marked in red in firefox's view source due to this

Quotes aren't actually necessary unless the attribute contains HTML special characters (" ' ` = )

Re: Show HN: Mimicking the Bloomberg menu widget without JavaScript

#33

Earlier quoted context omitted.

It seems to me, many web developers today don't even realize, that creating features without js and enriching the experience from that baseline, not only enhances performance and accessibility, but in the end is often not more work and might even lead to cleaner, leaner code. I guess in the end it just comes down to which tools one learned first and based on that which approach one takes to solve the problem at hand.…

css is often the slowest part of a webapp. complex css like this is not necessarily better accessibility-wise than javascipt

Why complex? Sure, this example is somewhat complex, but it does not need to be. Structure the menu in nested ul's, add simple hover css and don't use "display: none;" but rather "position: absolute; left: -999em;" and you get simple css and a good html structure that a screen reader for example can read easily and which also is clear to read if you turn css off entirely.

Of course, small hover menus offer their own accessibility challenges, but they don't depend on the way they are implemented but rather the choice of UX. And no reason why you could not improve this simple css menu with some js to make it more user friendly (like turning hover into clicks etc.)

Re: Show HN: Mimicking the Bloomberg menu widget without JavaScript

#34

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/

The original implementation at bloomberg.com is really well-executed, even solving the famous problem that when you accidentally hover another menu item while moving the cursor to the right, you might activate the adjacent menu item. [1]

It took VLC ages to get rid of this issue, but it is solved as of VLC 3.0.3 (relevant Qt bug: [2]).

[1] https://www.youtube.com/watch?v=90NsjKvz9Ns&t=18m46s

[2] https://bugreports.qt.io/browse/QTBUG-20094

Re: Show HN: Mimicking the Bloomberg menu widget without JavaScript

#36

Earlier quoted context omitted.

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-...

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.

Re: Show HN: Mimicking the Bloomberg menu widget without JavaScript

#37
post #7

Pretty cool indeed! Found a bug with Chrome 67.0.3396.87 on Mac OS 10.11.6: When you hover over a menu item (e.g. "Markets"), the sub-menu updates based on the sub-items for the "Markets" item. However, when moving the cursor right (towards the sub-menu), the sub-menu state reverts back to the last activated menu item. Only clicking a menu item makes the respective sub-menu "stick". This is not the case for the actua…

I think this is just how it's implemented. It works this way in Firefox on Windows as well.

Re: Show HN: Mimicking the Bloomberg menu widget without JavaScript

#39

Earlier quoted context omitted.

It seems to me, many web developers today don't even realize, that creating features without js and enriching the experience from that baseline, not only enhances performance and accessibility, but in the end is often not more work and might even lead to cleaner, leaner code. I guess in the end it just comes down to which tools one learned first and based on that which approach one takes to solve the problem at hand.…

css is often the slowest part of a webapp. complex css like this is not necessarily better accessibility-wise than javascipt

Do you have some proof to back this? CSS matching is incredibly fast.

Re: Show HN: Mimicking the Bloomberg menu widget without JavaScript

#40
I don't mean to be overcritical of someone learning to code—this is much more a criticism of people upvoting links without clicking them—why is this on the HN frontpage? It doesn't work. At all.

Try clicking on the "Markets > Read: Economics" link.

Post reply on HN