Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Show HN: Mimicking the Bloomberg menu widget without JavaScript

dosyago-coder-0.github.io

Post reply on HN
Print view View original

41–50 of 144 posts

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

#42

Post by astura »

Makes back button unusable.

EDIT: ok, I see what they are trying to do, using # URLs whereas the "real" url would be an actual link that directs you to another page so the back button would work fine. But why make them weird fake links? Why not just make them actual links? It would make sense and wouldn't make the menu jump around randomly.

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

#43

Post by lucideer »

daylightsavings wrote: post #18
dosy wrote: post #2

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…

Firstly, job well done. Secondly, what is the motivation of going pure CSS aside from the challenge of it? 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 querystr…

> Mainly I dislike using them because I have to refactor them to use Javascript so they can be stateful

You shouldn't need to refactor anything done in HTML or CSS to add JS-driven statefulness. This is what's great about using JS: it's power allows it to wrap/augment existing functionality quite flexibly.

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

#44

Post by onion2k »

jypepin wrote: post #17
alexggordon wrote: post #15

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.

In the Bloomberg JS menu the right hand menu changes when you move up and down, but not when you move 'up and right' or 'down and right' over the left hand menu. You can move to the option you want in the left menu and then move your mouse right to get the option you want without being very accurate. In the CSS version you have to move exactly out of the left hand menu option you want to get to the correct right hand menu.

This is a great example of why it sometimes takes a lot of effort to make a good front end UI. Bloomberg's version is considerably friendlier to users.

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

#45

Post by Sir_Cmpwn »

psychometry wrote: post #11

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.

Graceful degredation. Use JavaScript to add in these details, but it should still work without.

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

#46

Post by vxNsr »

astura wrote: post #42

Makes back button unusable. EDIT: ok, I see what they are trying to do, using # URLs whereas the "real" url would be an actual link that directs you to another page so the back button would work fine. But why make them weird fake links? Why not just make them actual links? It would make sense and wouldn't make the menu jump around randomly.

I experienced a broken back button after clicking a few different menu items.

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

#48

Post by cmpolis »

gramstrong wrote: post #38

Judging by some of these popular comments, I never want to show HN anything that I build in my free time , ever.

People who appreciate the submission upvote, critics comment. There may be more of the former, but unfortunately the latter are more impactful

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

#50

Post by [deleted] »

psychometry wrote: post #14
have_faith wrote: post #12

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.

[deleted]
Post reply on HN