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

71–80 of 144 posts

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

#71

Post by dmitrytokmakov »

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…

Cool stuff, You should check it out: https://careers.bloomberg.com/job/detail/57675

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

#72

Post by def_true_false »

pc86 wrote: post #67
analogmemory wrote: post #54

Earlier quoted context omitted.

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…

> This is solved by tracking the mouse movement and holding the current menu open if the movement is at a specific angle Was it Amazon that first used this trick on their giant dropdown menus? I remember reading an article about their implementation but do not recall if they were the first or merely the most visible.

No. Mac OS had it.

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

#73

Post by Kiro »

chrismorgan wrote: post #29
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…

The menu is functionally completely broken . Because panel visibility is determined purely by :hover or :focus, as soon as you try to click on an item in the panel, that focus is lost and the panel disappears, taking your attempted click with it. There are only three approaches that you can reasonably use here (they can be combined, too): ① Labels, which allow some rather nifty structure-breaking tricks on :hover; ②…

Nice try but it works fine in all browsers for me.

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

#74

Post by jrochkind1 »

mavidser wrote: post #22
daylightsavings wrote: post #18

Earlier quoted context omitted.

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…

For one, many people prefer to browse websites with javascript turned off. Aside from performance benefits, you turn off user tracking, flashy ads, autoplay videos, annoying popovers, etc.

MANY people? Source?

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

#75

Post by ThirdFoundation »

ohitsdom wrote: post #23
daylightsavings wrote: post #18

Earlier quoted context omitted.

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…

Most "stateful" functionality (including all you mentioned) can still be done with a CSS driven drop down menu.

Could this be handled by a templating engine like handlebars?

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

#77

Post by sungju1203 »

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…

your html is over 400 lines. this is why you need JS man :)

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

#78

Post by tgarv »

pc86 wrote: post #64
Grumbledour wrote: post #24

Earlier quoted context omitted.

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/

What exactly does "semantically meaningful and accessible html" mean?

Hopefully "semantically meaningful" is pretty self-explanatory, it just means using HTML elements in an organized and structured way (like not using a span when you should use a paragraph). "Accessible" means usable by screen readers and potentially other accessibility tools for people with low vision or other disabilities.

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

#79

Post by mariusmg »

sungju1203 wrote: post #77
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…

your html is over 400 lines. this is why you need JS man :)

Yeah, with JS it could be 800 lines :)

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

#80

Post by tbolt »

pc86 wrote: post #64
Grumbledour wrote: post #24

Earlier quoted context omitted.

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/

What exactly does "semantically meaningful and accessible html" mean?

As an example: Consider using a vs using

. The

tag is semantic and meaningful, whereas the means nothing. A screen reader (or other markup interpreters) can’t tell what a means

Post reply on HN