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

61–70 of 144 posts

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

#61

Post by xab9 »

Grumbledour wrote: post #24
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…

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/

Exactly my thoughts. Kids these days :))

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

#62

Post by mintplant »

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; ②…

> The menu is functionally completely broken.

Works fine for me on Firefox Nightly.

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

#63

Post by mintplant »

lucideer wrote: post #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.

Works for me.

https://vgy.me/DOVAXW.gif

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

#64

Post by pc86 »

Grumbledour wrote: post #24
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…

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?

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

#66

Post by function_seven »

mintplant wrote: post #62
chrismorgan wrote: post #29

Earlier quoted context omitted.

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; ②…

> The menu is functionally completely broken . Works fine for me on Firefox Nightly.

When you hover over an item in the main list, then move your mouse to the right, does the sub-menu stay the same or revert to the sub-menu for the first entry? (EDIT: Looks like that bug has been fixed. Earlier this morning, it would revert to the first sub-menu, now it works as expected)

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

#67

Post by pc86 »

analogmemory wrote: post #54
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…

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.

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

#68

Post by swaggyBoatswain »

That's pretty cool I was just about to make a write up of how to make a css dropdown mega menu, which is sort of semi-related in principle. I didn't find any good examples on codepen so I ended up writing my own.

I made a crude mockup here in PUG / SASS to cover just the essential "hello world" concept.

[link redacted]

A revised version

[link redacted]

and then an actual template for an ecommerce site I'm building

[link redacted]

I try to avoid JS if CSS can do the same job, because then I have the oppurtunity to change it much easier later.

the above examples uses no css frameworks or javascript libraries

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

#70

Post by bfred_it »

seba_dos1 wrote: post #53
amelius wrote: post #20

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

Sadly `auto` values can't be animated. It can only be done with a bunch of hard-coded sizes and positions. Remove an item anywhere and you'll have to manually adjust.
Post reply on HN