
Show HN: Mimicking the Bloomberg menu widget without JavaScript - dosy
https://dosyago-coder-0.github.io/mimic-bloomberg-menu-no-js
======
dosy
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: [https://github.com/dosyago-coder-0/mimic-bloomberg-menu-
no-j...](https://github.com/dosyago-coder-0/mimic-bloomberg-menu-no-js)

Maybe this post should be a Medium post titled "How I mimicked the Bloomberg
menu widget without JavaScript." I might write one if many people want that.

~~~
daylightsavings
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 querystrings, etc.

Again, good job though if it's just for the lulz.

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

~~~
nebulous1
css is often the slowest part of a webapp. complex css like this is not
necessarily better accessibility-wise than javascipt

~~~
jensvdh
Do you have some proof to back this? CSS matching is incredibly fast.

------
elemakil
Pretty cool indeed!

Found a bug with Chrome 67.0.3396.87 on Mac OS 10.11.6: When you hover over a
menu item (e.g. "Markets"), the sub-menu updates based on the sub-items for
the "Markets" item. However, when moving the cursor right (towards the sub-
menu), the sub-menu state reverts back to the last activated menu item. Only
clicking a menu item makes the respective sub-menu "stick". This is not the
case for the actual bloomberg menu.

Don't know whether this is a limitation of the html+css approach?

~~~
jschwartzi
I think this is just how it's implemented. It works this way in Firefox on
Windows as well.

------
pmilla1606
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-...](http://bjk5.com/post/44698559168/breaking-down-amazons-mega-
dropdown)

Or to keep it JS free there might be a way to structure the HTML similar to:
<Nav1><ChildNav1.../></Nav1>. Hover a :hover pseudo on <Nav1> will also fire
when hovering over <ChildNav1 />.

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

~~~
chrismorgan
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.)

------
tabtab
It's 2018 and we still have to jump through hoops to get browsers to do things
perfected on desktops by the mid 1990's. (Without bugs and browser
incompatibilities.)

The Web royally screwed UI development and standards to Hell's basement, and
nobody seems to want to fix it because the current mess is job security for
low-level DOM diddlers.

~~~
furgooswft13
I doubt many 90s desktop apps were designed around the expectation that the
Turing Complete programming logic behind them could be explicitly disabled by
the user.

And exactly what 90s desktop app had a menu that looked quite like that?
Platform's then supported cascading popup menus with titles and icons rendered
in native GUI chrome, ala the Windows 95 Start Menu. Any more flexibility
required a lot of "low-level (whatever) diddling".

"Browser" incompatibilities are not much of a thing when you are developing
for a platform provided by just a single vendor. But go ahead and try to port
a Win95 app to OS7, you'll soon be longing to deal with the minor
incompatibilities between different browsers (and yes, it's 2018, you don't
need jQuery shims to reliably add two numbers together anymore).

CSS has long supported cascading popup menus without the need for any
Javascript and browsers have long supported that CSS in a standards compliant
way. Yes, if you really want some Win95 style menus you'll have an easier time
in Visual Basic, but for most everything else it will be nearly impossible.

The webstack is not ideal by any means, but to suggest that it is somehow
worse than win32 programming or easier to create responsive good looking apps
in classic VB requires some mighty fine rose-colored-glasses.

~~~
tabtab
I'm not proposing we go back to desktop apps as done in Windows et al. I'm
proposing an open-source network-friendly GUI standard be created, or at least
experimented with to test the power and limits of.

I suggest it be coordinate-vector based, and any layout and "flow" decisions
be done on the server. Yes, if you resize your screen it would be slower than
client-side re-flowing, but would simplify the client-side greatly, making it
mostly a dumb vector plotter. Fat clients led to fat problems. Shift more to
the server so you are using and testing with one render engine instead of the
50+ that browser brand/version combos result in. 1 < 50.

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

[https://codepen.io/Kagerjay/pen/ZRogMy](https://codepen.io/Kagerjay/pen/ZRogMy)

A revised version

[https://codepen.io/Kagerjay/pen/Paaoee?editors=1100](https://codepen.io/Kagerjay/pen/Paaoee?editors=1100)

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

[https://codepen.io/Kagerjay/pen/8d591195c12c9421b4db58734396...](https://codepen.io/Kagerjay/pen/8d591195c12c9421b4db58734396e51b)

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

------
ddtaylor
Remember with hidden checkbox elements CSS can be used for multiple states!

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

~~~
have_faith
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-...](http://bjk5.com/post/44698559168/breaking-down-amazons-mega-
dropdown)

~~~
psychometry
Yes, there are some great tips. I still think this style menu is just bad,
though. Although certain tweaks can improve the UX, it's still an
frustratingly unusable interface for people with certain motor disabilities
and even just older users whose mouse/trackpad skills are not great.

~~~
microcolonel
At this point, the department menu is an alternative to search. It doesn't
need to be universally accessible or forgiving to poor motor control, because
in terms of footprint it is tiny. I have used it before and it was just fine
for me, and if some proportion of their customers have a similar experience,
then it seems well worthwhile.

~~~
themarkn
I completely disagree with this sentiment. Everything in a UI that you _can do
with a mouse_ should be tolerant of disabilities that people who use a mouse
might be going throug (tremors etc). A user shouldn't have to try to do
something and become frustrated in order to discover that it is "not for
people with poor motor skills". We should do better. What you describe as
"well worthwhile" still strikes me as woefully incomplete and annoying. Every
user could potentially have poor motor skills at some point due to temporary
causes.

It's not the end of the world of course. I just wouldn't think of "I have used
it before and it was just fine for me" as a good reason to not strive for a
more universal approach to interface design.

~~~
microcolonel
> _Everything in a UI that you can do with a mouse should be tolerant of
> disabilities that people who use a mouse might be going throug (tremors
> etc)._

Why? Should we give up on first person shooter games? Set minimum mouse target
sizes for RTS games? The point of the department menu is to convert dexterity
into information rapidly. If you lack dexterity, that's no strike on your
character, but it somewhat defeats the purpose of a dexterity-limited input.
There is an alternative to the department menu in the left side of the search
bar, which has a simple list.

~~~
psychometry
We're talking about websites. You're talking about games.

------
Sawamara
I really, really do not get this obsession with Javascriptless interactivity.

I mean, seriously. Its 2018. JS engines are REALLY fast. And by the way, lets
not be deluded into thinking that the Chrome is a lightweight nothing without
JS execution. There are already GPU-aided reflow/repaint operations, your
whole UI context lives on a different thread, tons of services are pulled back
for audio/video capabilities, not to mention addons, HTML engine, etc.

So just learn proper JS, do not overdo it, and write efficient scripts. Its
doable.

~~~
g_delgado14
Just because a JS engine is really fast doesn't mean you should do everything
in JS, esp if CSS is the right tool for the job (not to say that this
particular demo is a good example of using the right tool for the job).

~~~
Sawamara
Sure, right tool for the right job, etc. Animations are _almost always_ better
when they can be hinted to the GPU (will-change), can be transitioned with
translate2d changes, and do not cause reflow by being used on absolute/fixed
positioned elements. For example.

My point is that not using JS will not make browsing experience into something
"pure". It will remain an incredibly compplex stuff in itself, which JS is
only a part of. And when it comes to firing off XHR's, setting some data or
providing interactivity (with real states, etc), then JS is a good tool for
the job.

------
malydok
I, on the other hand, would like to point out the lack of accessibility of
this approach, it's unusable with a keyboard. Let's not forget about assistive
technologies.

~~~
tabtab
On many sites, such menus are meant as shortcuts to content that is otherwise
reach-able by other means, such as typical web-site category links. However,
automated accessibility grading systems won't necessarily "understand" this
fact and score it poorly.

------
astura
Makes back button unusable.

EDIT: ok, I see what they are trying to do, using # URLs whereas the "real"
url would be an actual link that directs you to another page so the back
button would work fine. But why make them weird fake links? Why not just make
them actual links? It would make sense and wouldn't make the menu jump around
randomly.

~~~
vxNsr
I experienced a broken back button after clicking a few different menu items.

------
Aardwolf
I looked at the source, looks neat except one thing: shouldn't there be double
quotes around all href targets?

The ones that have a single quote (e.g. <a
href=#/what'sinsidealltheiphones.html>What's Inside All the iPhones</a>) get
marked in red in firefox's view source due to this

~~~
CaveTech
Quotes aren't actually necessary unless the attribute contains HTML special
characters (" ' ` = < >)

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

~~~
mintplant
Works for me.

[https://vgy.me/DOVAXW.gif](https://vgy.me/DOVAXW.gif)

~~~
lucideer
Yeah, there's been a lot of new commits since I commented.

Looks like one of the commenters here—franciscop—fixed that particular issue
just after my comment.

------
k8martian
I am sorry if this is kind of out of topic. I remember weeks ago I've visited
their website with new design. Seems like now bloomberg went back to the old
design of their website. Any clue?

~~~
nkrisc
They may have been testing a design with a small portion of their traffic.
Perhaps you were bucketed into the variant group.

------
amelius
I like the menu on Stripe.com.

Make a pure CSS version of that and you're king :)

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

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

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

~~~
bfred_it
No easing though. You can't avoid the "snapping" at the end

------
vanzorn
I love what you've done here!

One recommendation (if it hasn't already been mentioned)... easy dismissal of
the drop-down. Once I have opened the menu, if I choose not to click on any of
the navigation, I cannot simply click outside the <nav> element to dismiss it
and return to my content. I'm forced to either engage with the Menu button
again, or make a navigation selection.

Tested on Chrome Version 67.0.3396.87 and Firefox 60.0.2

------
bobthechef
Bloomberg and Amazon do there right thing when moving from menu to submenu. I
have to thread carefully here so that I don't jump to another one, which is
bad. I believe Amazon computes it based on velocity and direction of the
cursor.

------
etaioinshrdlu
I think the bloomberg marquee is one of the most CPU heavy things ever on a
big news site. I let them know years ago, they acknowledged it and never fixed
it.

------
bytematic
Yours is actually much smoother for me, but that might be due to some intended
animation delays or something.

~~~
DonHopkins
There's actually a very good reason to implement a delay in switching
submenus.

Recent versions of Apple's human interface guidelines don't make any mention
of it, because those decisions are baked into the toolkit and not under
control of application designers, but the earlier editions of Apple's
guidelines went into some detail about why and how pop-up submenus were
delayed.

1995 edition of Macintosh Human Interface Guidelines:

[http://interface.free.fr/Archives/Apple_HIGuidelines.pdf](http://interface.free.fr/Archives/Apple_HIGuidelines.pdf)

>pp. 79: Hierarchical menus are menus that include a menu item from which a
submenu descends. You can offer additional menu item choices without taking up
more space in the menu bar by including a submenu in a main menu. When the
user drags the pointer through a menu and rests it on a hierarchical menu
item, a submenu appears after a brief delay. To indicate that a submenu
exists, use a triangle facing right, as shown in Figure 4-36.

The original 1987 version of the Apple Human Interface Guidelines can be
checked out from the Internet Archive, and should be required reading for
serious user interface designers, the same way that serious art students
should contemplate the Mona Lisa, and serious music students should listen to
Mozart. Even though it's quite dated, it's a piece of classic historic
literature that explicitly explains the important details of the design and
the rationale behind the it, in a way that modern UI guidelines just gloss
over because so much is taken for granted and not under the control of the
intended audience (macOS app designers using off-the-shelf menus -vs- people
rolling their own menus in HTML, who do need to know about those issues):

Apple Human Interface Guidelines (1987):
[https://archive.org/details/applehumaninterf00appl](https://archive.org/details/applehumaninterf00appl)

>pp. 87: The delay values enable submenus to function smoothly, without
jarring distractions to the user. The _submenu delay_ is the length of time
before a submenu appears as the user drags the pointer through a hierarical
menu item. It prevents flashing caused by rapid appearance-disappearance of
submenus. The _drag delay_ allows the user to drag diagonally from the submenu
title into the submenu, briefly crossing parent of the main menu, without the
submenu disappearing (which would ordinarily happen when the pointer was
dragged into another menu item). This is illustrated in Figure 3-42.

pp. 87: Hierarchical Menus:
[https://i.imgur.com/RrEDo3m.png](https://i.imgur.com/RrEDo3m.png)

pp. 88: Figure 3-42: Dragging diagonally to a submenu item:
[https://i.imgur.com/a0gNWHh.png](https://i.imgur.com/a0gNWHh.png)

Others have written about this issue in the context of the web:

Why is there a menu show delay, anyway?
[https://blogs.msdn.microsoft.com/oldnewthing/20080619-00/?p=...](https://blogs.msdn.microsoft.com/oldnewthing/20080619-00/?p=21903)

>I run into this problem all the time on the Web. Web site designers forget to
incorporate a menu show delay, resulting in frustration when trying to
navigate around them. For example, let's look at the navigation bar on the
home page of The Discovery Channel. Hover over TV Shows, and the menu appears.
Suppose you want to go to Koppel on Discovery, but instead of moving the mouse
straight downward, the way you hold your arm on the desk moves the mouse in an
arc that happens to swing to the right before it arcs downward. You touch TV
Schedules and your navigation is screwed up. You have to start over and make
sure to move the mouse exactly straight down.

You can even solve the problem with CSS and without JavaScript, by using
":hover":

Dropdown Menus with More Forgiving Mouse Movement Paths: [https://css-
tricks.com/dropdown-menus-with-more-forgiving-mo...](https://css-
tricks.com/dropdown-menus-with-more-forgiving-mouse-movement-paths/)

>This is a fairly old UX concept that I haven't heard talked about in a while,
but is still relevant in the case of multi-level dropdown menus. A fine-
grained pointer like a mouse sometimes has to travel through pretty narrow
corridors to accurately get where it needs to in a dropdown menu. It's easy to
screw up (have the mouse pointer leave the path) and be penalized by having it
close up on you. Perhaps we can make that less frustrating.

~~~
jehlakj
It should be extremely subtle that users can skim through the categories also.
I think they call this debouncing in the JavaScript world.

------
SkyMarshal
Nice job. To add to the test db, works on Firefox 60.0.2 (64bit) on Ubuntu
18.04 too.

------
nkg
I had never noticed that "Where to invest $10,000" before.

------
a_r_8
Off topic but that is a gnarly commit history

~~~
swyx
let he who is without sin cast the first stone...

------
gramstrong
Judging by some of these popular comments, I never want to show HN anything
that I build in my _free time_ , ever.

~~~
cmpolis
People who appreciate the submission upvote, critics comment. There may be
more of the former, but unfortunately the latter are more impactful

