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

21–30 of 144 posts

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

#21

Post by chrismorgan »

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

The tricky thing is getting the triangle’s node to be the position of the cursor; you need it to start at the left of the menu item, then animate rightwards only while the cursor is hovering over it, stopping when it’s not—so that it will naturally come to rest. This is possible to express with animations (animation-play-state is key), except for the fact that :hover calculations are not done constantly in most browsers, but only when the user does something to trigger it, such as moving the cursor. And so basically the whole scheme falls apart: it will work just barely OK, but if you move your mouse just a bit too slowly, it’ll effectively stop working.

It’s still an interesting thought. If you’re interested and my explanation isn’t clear enough, I’ll put a simple proof-of-concept-and-why-it’s-sadly-not-really-enough together.

(OK, since then I’ve come up with an insane approach that relies upon this behaviour, and it might just work, though I’m concerned about how reliable it’ll be across browsers. If it does work, it will definitely be blog-post worthy.)

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

#22

Post by mavidser »

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…

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.

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

#23

Post by ohitsdom »

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…

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

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

#24

Post by Grumbledour »

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/

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

#26

Post by Grumbledour »

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…

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.

I can only encourage everyone that thinks js is the catch-all solution to dive a bit deeper into html&css and try out alternate solutions. It's worth it for the knowledge gain in itself but offers many other benefits.

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

#27

Post by nebulous1 »

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

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

That technique was used long before Amazon used it. Actually, the first comment on that article confirms this: Bruce Tognazzini came up with it for Apple in 1986.

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

#28

Post by nebulous1 »

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

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

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

#29

Post by chrismorgan »

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;

② Change the .bmenu > a things from links (because you can’t nest links), and put the panel contents inside that node, then use :hover;

③ Use radio buttons and :checked.

Post reply on HN