11 ms·

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 us

by dosy 8y ago

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-js https://github.com/dosyago-coder-0/mimic-bloomberg-menu-no-j... 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.

maneesh 8y ago
I'd want to read it!
daylightsavings 8y ago
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.
- mavidser 8y ago
  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.
  - jrochkind1 8y ago
    MANY people? Source?
    - sincerely 8y ago
      zero people block JS: false only one person blocks JS: false therefore many block JS
      - robbrown451 8y ago
        "Many" is not synonymous with "multiple". I would expect that the percentage of people who browse without javascript on is incredibly small. The absolute number might be largish, and I guess in that context is could be considered "many." Still, the vast majority use javascript.
        basica 8y ago
        Haven't you studied cardinality? You don't have One to Multiple relationships, you have One to Many /s
      - rodorgas 8y ago
        Between zero or all, could be many or some.
      - jrochkind1 8y ago
        Or perhaps "few".
    - deleted 8y ago
      [deleted]
- ohitsdom 8y ago
  Most "stateful" functionality (including all you mentioned) can still be done with a CSS driven drop down menu.
  - ThirdFoundation 8y ago
    Could this be handled by a templating engine like handlebars?
- Grumbledour 8y ago
  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 8y ago
    css is often the slowest part of a webapp. complex css like this is not necessarily better accessibility-wise than javascipt
    - Grumbledour 8y ago
      Why complex? Sure, this example is somewhat complex, but it does not need to be. Structure the menu in nested ul's, add simple hover css and don't use "display: none;" but rather "position: absolute; left: -999em;" and you get simple css and a good html structure that a screen reader for example can read easily and which also is clear to read if you turn css off entirely. Of course, small hover menus offer their own accessibility challenges, but they don't depend on the way they are implemented but rather the choice of UX. And no reason why you could not improve this simple css menu with some js to make it more user friendly (like turning hover into clicks etc.)
    - jensvdh 8y ago
      Do you have some proof to back this? CSS matching is incredibly fast.
      - deleted 8y ago
        [deleted]
- lucideer 8y ago
  > Mainly I dislike using them because I have to refactor them to use Javascript so they can be stateful You shouldn't need to refactor anything done in HTML or CSS to add JS-driven statefulness. This is what's great about using JS: it's power allows it to wrap/augment existing functionality quite flexibly.
Grumbledour 8y ago
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/ http://www.htmldog.com/articles/suckerfish/dropdowns/
- pc86 8y ago
  What exactly does "semantically meaningful and accessible html" mean?
  - tgarv 8y ago
    Hopefully "semantically meaningful" is pretty self-explanatory, it just means using HTML elements in an organized and structured way (like not using a span when you should use a paragraph). "Accessible" means usable by screen readers and potentially other accessibility tools for people with low vision or other disabilities.
  - tbolt 8y ago
    As an example: Consider using a <div class=“paragraph”> vs using <p>. The <p> tag is semantic and meaningful, whereas the <div> means nothing. A screen reader (or other markup interpreters) can’t tell what a <div> means
    - chiefalchemist 8y ago
      Good point. Perhaps, I would think, Bloomberg's menu does this and he can just "borrow" their semantic + A11Y-centric markup?
- nathancahill 8y ago
  Wow, blast from the past. Still remember implementing that on some of my first websites.
- 8y ago
chrismorgan 8y ago
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.
- Kiro 8y ago
  Nice try but it works fine in all browsers for me.
  - tabtab 8y ago
    It's getting truncated for me in Chrome.
- mintplant 8y ago
  > The menu is functionally completely broken. Works fine for me on Firefox Nightly.
  - function_seven 8y ago
    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)
  - chrismorgan 8y ago
    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-js/commits/master 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.)
dmitrytokmakov 8y ago
Cool stuff, You should check it out: https://careers.bloomberg.com/job/detail/57675 https://careers.bloomberg.com/job/detail/57675
analogmemory 8y ago
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 the current menu open if the movement is at a specific angle I'd like to read your write up if you do it :)
- pc86 8y ago
  > 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.
  - def_true_false 8y ago
    No. Mac OS had it.
    - __david__ 8y ago
      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.
      - DonHopkins 8y 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 https://news.ycombinator.com/item?id=17404345 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 I also linked to an article showing how to solve the problem with CSS and without JavaScript! https://css-tricks.com/dropdown-menus-with-more-forgiving-mouse-movement-paths/ https://css-tricks.com/dropdown-menus-with-more-forgiving-mo... Hopefully the author of this article (dosy) can use the css :hover delay technique to make his menus even better than Bloomberg's, without requiring any JavaScript! Subtle but important details like that easily get lost and forgotten, because it seemed important enough to write down in 1987, but now it's built into macOS and nobody can change it. It's hard for most people to notice, because the whole point is to invisibly work behind-the-scenes to make selecting from submenus easier without distracting you! So Apple doesn't mention it any more in their "modern" UI guidelines, since they don't expect macOS application developers to reimplement menus from scratch. But that's what web developers do all the time, so it's important to document and preserve details like this! I highly recommend reading the original 1987 Apple Human Interface Guidelines to any serious user interface designer! It's quite dated, but so is the Mona Lisa! https://archive.org/details/applehumaninterf00appl https://archive.org/details/applehumaninterf00appl
sungju1203 8y ago
your html is over 400 lines. this is why you need JS man :)
- mariusmg 8y ago
  Yeah, with JS it could be 800 lines :)
chiefalchemist 8y ago
Any chance of making it click-based? For example, once I open it, I'd rather click on Markets than hover to change the right side. Also, and I realize this was just for fun, making it responsive would be a nice touch. For example, force the right col under col 1 and col 2 below a certain width. That's easy and I think more people are likely to find the example more useful. Otherwise, sweet! Good stuff. Thanks for sharing.
9935c101ab17a66 8y ago
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.
ckluis 8y ago
@dosy great work. If I was a bit more skilled I'd try and help you out on mobile compatibility.
- dosy 8y ago
  Thanks!

by dosy 8y ago

maneesh 8y ago

I'd want to read it!

daylightsavings 8y ago

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.

mavidser 8y ago
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.
- jrochkind1 8y ago
  MANY people? Source?
  - sincerely 8y ago
    zero people block JS: false only one person blocks JS: false therefore many block JS
    - robbrown451 8y ago
      "Many" is not synonymous with "multiple". I would expect that the percentage of people who browse without javascript on is incredibly small. The absolute number might be largish, and I guess in that context is could be considered "many." Still, the vast majority use javascript.
      - basica 8y ago
        Haven't you studied cardinality? You don't have One to Multiple relationships, you have One to Many /s
    - rodorgas 8y ago
      Between zero or all, could be many or some.
    - jrochkind1 8y ago
      Or perhaps "few".
  - deleted 8y ago
    [deleted]
ohitsdom 8y ago
Most "stateful" functionality (including all you mentioned) can still be done with a CSS driven drop down menu.
- ThirdFoundation 8y ago
  Could this be handled by a templating engine like handlebars?
Grumbledour 8y ago
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 8y ago
  css is often the slowest part of a webapp. complex css like this is not necessarily better accessibility-wise than javascipt
  - Grumbledour 8y ago
    Why complex? Sure, this example is somewhat complex, but it does not need to be. Structure the menu in nested ul's, add simple hover css and don't use "display: none;" but rather "position: absolute; left: -999em;" and you get simple css and a good html structure that a screen reader for example can read easily and which also is clear to read if you turn css off entirely. Of course, small hover menus offer their own accessibility challenges, but they don't depend on the way they are implemented but rather the choice of UX. And no reason why you could not improve this simple css menu with some js to make it more user friendly (like turning hover into clicks etc.)
  - jensvdh 8y ago
    Do you have some proof to back this? CSS matching is incredibly fast.
    - deleted 8y ago
      [deleted]
lucideer 8y ago
> Mainly I dislike using them because I have to refactor them to use Javascript so they can be stateful You shouldn't need to refactor anything done in HTML or CSS to add JS-driven statefulness. This is what's great about using JS: it's power allows it to wrap/augment existing functionality quite flexibly.

Grumbledour 8y ago

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/ http://www.htmldog.com/articles/suckerfish/dropdowns/

pc86 8y ago
What exactly does "semantically meaningful and accessible html" mean?
- tgarv 8y ago
  Hopefully "semantically meaningful" is pretty self-explanatory, it just means using HTML elements in an organized and structured way (like not using a span when you should use a paragraph). "Accessible" means usable by screen readers and potentially other accessibility tools for people with low vision or other disabilities.
- tbolt 8y ago
  As an example: Consider using a <div class=“paragraph”> vs using <p>. The <p> tag is semantic and meaningful, whereas the <div> means nothing. A screen reader (or other markup interpreters) can’t tell what a <div> means
  - chiefalchemist 8y ago
    Good point. Perhaps, I would think, Bloomberg's menu does this and he can just "borrow" their semantic + A11Y-centric markup?
nathancahill 8y ago
Wow, blast from the past. Still remember implementing that on some of my first websites.
8y ago

chrismorgan 8y ago

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.

Kiro 8y ago
Nice try but it works fine in all browsers for me.
- tabtab 8y ago
  It's getting truncated for me in Chrome.
mintplant 8y ago
> The menu is functionally completely broken. Works fine for me on Firefox Nightly.
- function_seven 8y ago
  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)
- chrismorgan 8y ago
  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-js/commits/master 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.)

dmitrytokmakov 8y ago

Cool stuff, You should check it out: https://careers.bloomberg.com/job/detail/57675 https://careers.bloomberg.com/job/detail/57675

analogmemory 8y ago

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 the current menu open if the movement is at a specific angle I'd like to read your write up if you do it :)

pc86 8y ago
> 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.
- def_true_false 8y ago
  No. Mac OS had it.
  - __david__ 8y ago
    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.
    - DonHopkins 8y 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 https://news.ycombinator.com/item?id=17404345 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 I also linked to an article showing how to solve the problem with CSS and without JavaScript! https://css-tricks.com/dropdown-menus-with-more-forgiving-mouse-movement-paths/ https://css-tricks.com/dropdown-menus-with-more-forgiving-mo... Hopefully the author of this article (dosy) can use the css :hover delay technique to make his menus even better than Bloomberg's, without requiring any JavaScript! Subtle but important details like that easily get lost and forgotten, because it seemed important enough to write down in 1987, but now it's built into macOS and nobody can change it. It's hard for most people to notice, because the whole point is to invisibly work behind-the-scenes to make selecting from submenus easier without distracting you! So Apple doesn't mention it any more in their "modern" UI guidelines, since they don't expect macOS application developers to reimplement menus from scratch. But that's what web developers do all the time, so it's important to document and preserve details like this! I highly recommend reading the original 1987 Apple Human Interface Guidelines to any serious user interface designer! It's quite dated, but so is the Mona Lisa! https://archive.org/details/applehumaninterf00appl https://archive.org/details/applehumaninterf00appl

sungju1203 8y ago

your html is over 400 lines. this is why you need JS man :)

mariusmg 8y ago
Yeah, with JS it could be 800 lines :)

chiefalchemist 8y ago

Any chance of making it click-based? For example, once I open it, I'd rather click on Markets than hover to change the right side. Also, and I realize this was just for fun, making it responsive would be a nice touch. For example, force the right col under col 1 and col 2 below a certain width. That's easy and I think more people are likely to find the example more useful. Otherwise, sweet! Good stuff. Thanks for sharing.

9935c101ab17a66 8y ago

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.

ckluis 8y ago

@dosy great work. If I was a bit more skilled I'd try and help you out on mobile compatibility.

dosy 8y ago
Thanks!