mimic-bloomberg-menu-no-js
Learning and science
css menu demo
SHOW HN2018
Legend
mimic-bloomberg-menu-no-js
Mimicking the Bloomberg menu widget without JavaScript
dosyago-coder-0.github.io#css dropdown menu#no javascript#hover menu#bloomberg menu clone
How HN took it
12 positive, 16 neutral or asking, 7 mixed, 18 critical, out of 53 comments about the project. Thread score -0.10.
Execution: 5 for, 10 againstDesign: 1 for, 5 againstPerformance: 1 for, 0 againstIdea: 1 for, 0 againstPrivacy: 1 for, 0 against
The thread, comment by comment
Each row is a top-level comment and its replies, in HN's order. Select a cell to open that comment on HN.
positive neutral or mixed critical about another commenter or something else the maker
What HN said
What people liked
Good job mimicking the menu with pure CSS
From 2 comments
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,…
analogmemory on HNFirstly, 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…
daylightsavings on HN
Works in several browsers for some commenters
From 2 comments
Nice try but it works fine in all browsers for me.
Kiro on HNNice job. To add to the test db, works on Firefox 60.0.2 (64bit) on Ubuntu 18.04 too.
SkyMarshal on HN
Objections
Menu closes when moving the cursor toward the submenu
From 3 comments
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…
elemakil on HNWell done! Moving the mouse to a child resets the position though. You may need some JS to do some fancy stuff like here:…
pmilla1606 on HNAwful 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…
psychometry on HN
Breaks keyboard and assistive technology use
From 1 comment
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.
malydok on HN
Back button and # links cause problems
From 1 comment
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…
astura on HN
Clicking submenu links fails because panel disappears on hover loss
From 2 comments
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…
chrismorgan on HNI 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…
lucideer on HN
Requests
Add diagonal mouse-movement tolerance like Amazon and Mac menus
From 3 comments
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,…
analogmemory on HNYou 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…
btown on HNYou'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…
DonHopkins on HN
Dismiss menu by clicking outside it
From 1 comment
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…
vanzorn on HN
Write-up of the technique
From 2 comments
I'd want to read it!
maneesh on HNGreat 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,…
analogmemory on HN
Questions
Why avoid JavaScript for this menu
From 1 comment
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…
daylightsavings on HN
Why not use the Son of Suckerfish approach
From 1 comment
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…
Grumbledour on HN
Alternatives named
Amazon mega dropdown
From 2 comments
http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown
mavci on HNHere's an article that reverse engineers Amazon's implementation; http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown - not the first implementation by a long…
cachvico on HN
Stripe.com menu
From 1 comment
I like the menu on Stripe.com. Make a pure CSS version of that and you're king :)
amelius on HN
Son of Suckerfish dropdowns
From 1 comment
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…
Grumbledour on HN