Show HN: Mimicking the Bloomberg menu widget without JavaScript

Re:Show HN: Mimicking the Bloomberg menu widget without Java... by btown on Tuesday June 26, 2018 @06:42PM (#17404546)

You could just create an invisible :hover::before on the <a> tag that renders an invisible triangle that overlaps the neighbors. Since it's still part of the <a> 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're off to the races.

[ Parent | on HN ]

Re:Show HN: Mimicking the Bloomberg menu widget without Java... by andrewingram on Tuesday June 26, 2018 @06:59PM (#17404640)

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

So I think you can get pretty close to a CSS-only solution in modern browsers, but the the small touches that make it feel great would still probably require writing some JavaScript.

[ Parent | on HN ]

Re:Show HN: Mimicking the Bloomberg menu widget without Java... by kroltan on Tuesday June 26, 2018 @08:29PM (#17404979)

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

[ Parent | on HN ]

Re:Show HN: Mimicking the Bloomberg menu widget without Java... by wyattpeak on Tuesday June 26, 2018 @09:48PM (#17405236)

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

[ Parent | on HN ]

Re:Show HN: Mimicking the Bloomberg menu widget without Java... by andrewingram on Wednesday June 27, 2018 @12:55PM (#17409769)

Built a quick demo that shows that (a) you can mostly do it with HTML/CSS and (b) the experience isn't great:

https://codepen.io/andy-ingram/pen/MXPqZN?editors=1100

[ Parent | on HN ]

Re:Show HN: Mimicking the Bloomberg menu widget without Java... by dosy on Thursday June 28, 2018 @10:06AM (#17416940)

That is cool.

[ Parent | on HN ]