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

121–130 of 144 posts

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

#121

Post by wyattpeak »

kroltan wrote: post #116
andrewingram wrote: post #105

Earlier quoted context omitted.

You'd want to use clip-path which isn't supported that well yet, but it does let you define non-rectangular hover regions. But there is still a problems with this approach. It's subtle, but if you look at the Bloomberg implementation, if you move the pointer to the left at any point, it abandons the behaviour and highlights the menu item below the pointer -- even if the pointer is still inside the conceptual triangle…

You can also use a very acute 3D perspective transform to create almost any quadrilateral shape, so the support can be a bunch better.

What the parent is describing isn't a shape at all, though. The behaviour is different depending on the direction the cursor is moving.

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

#122

Post by chrismorgan »

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.

It got fixed a while after my comment, in one of the many commits with the message “ok” (!) at https://github.com/dosyago-coder-0/mimic-bloomberg-menu-no-j....

(Author: commit messages are a nice thing and worth putting at least some effort into.)

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

#123

Post by 9935c101ab17a66 »

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…

Obviously you can develop things however you want, but IMO, not using a descriptive message in your commits (like repeatedly naming them "ok") is a pretty bad habit.

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

#125

Post by hayyyyydos »

bfred_it wrote: post #70
seba_dos1 wrote: post #53

Earlier quoted context omitted.

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.

> Sadly `auto` values can't be animated.

Sure, height:auto can't be animated - but max-height:800px, for example, can be used to similar effect.

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

#126

Post by [deleted] »

chrismorgan wrote: post #21
yscik wrote: post #10

Earlier quoted context omitted.

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 brows…

[deleted]

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

#127

Post by [deleted] »

btown wrote: post #103
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…

You could just create an invisible :hover::before on the tag that renders an invisible triangle that overlaps the neighbors. Since it's still part of the tag, as long as you're hovering over it, you won't activate other menu entries. You could even animate the triangle's size (or existence), shrinking it over time to mimic Amazon or Mac OS behavior. Set z-indices correctly so the right-hand panel is on top, and you'r…

[deleted]

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

#128

Post by Rapzid »

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.

This seems like something that would be obvious to a seasoned interactive programmer(video games, animated UX, etc) or somebody in that mindset. I would be extremely surprised if some form of this technique doesn't have prior art going way back.

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

#129

Post by dosy »

DonHopkins wrote: post #97
__david__ wrote: post #83

Earlier quoted context omitted.

Correct. I first used a Mac with System 6 somewhere around 1991-1992. I remember using other GUIs (maybe windows 3.1 or X) and being frustrated by the menus, then realizing that the Mac had this diagonal most movement detection and that's what made their menus so much easier to use. Apple figured this out 30 years ago.

You're right -- in fact it was at least 31 years ago! I just posted a comment about this with a link to the 1987 Apple Human Interface Guidelines and page snapshots explaining the design. https://news.ycombinator.com/item?id=17404345 pp. 87: Hierarchical Menus: https://i.imgur.com/RrEDo3m.png pp. 88: Figure 3-42: Dragging diagonally to a submenu item: https://i.imgur.com/a0gNWHh.png I also linked to an article showin…

I just added triangular hover regions based on the comments. Debug outlines showing the open paths to the submenus: https://vgy.me/nBfeiA.gif

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

#130

Post by cachvico »

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.

Here's an article that reverse engineers Amazon's implementation; http://bjk5.com/post/44698559168/breaking-down-amazons-mega-... - not the first implementation by a long shot, as pointed out elsewhere in this thread, but perhaps the first implementation for the web.
Post reply on HN