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

1–10 of 144 posts

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

#2

Post by dosy »

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: https://github.com/dosyago-coder-0/mimic-bloomberg-menu-no-j...

Maybe this post should be a Medium post titled "How I mimicked the Bloomberg menu widget without JavaScript." I might write one if many people want that.

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

#4

Post by pmilla1606 »

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 .

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

#6

Post by albanberg »

pmilla1606 wrote: post #4

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 .

I noticed the same. If one clicks on the top folder on the left, the submenu holds open but it would be better to not need to do this.

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

#7

Post by elemakil »

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 actual bloomberg menu.

Don't know whether this is a limitation of the html+css approach?

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

#8

Post by nkrisc »

k8martian wrote: post #5

I am sorry if this is kind of out of topic. I remember weeks ago I've visited their website with new design. Seems like now bloomberg went back to the old design of their website. Any clue?

They may have been testing a design with a small portion of their traffic. Perhaps you were bucketed into the variant group.

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

#9

Post by maneesh »

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…

I'd want to read it!

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

#10

Post by yscik »

pmilla1606 wrote: post #4

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.
Post reply on HN