9 ms·
Show HN: Mimicking the Bloomberg menu widget without JavaScript
- dosy 8y agoContext: 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 agoI'd want to read it!
- daylightsavings 8y agoFirstly, 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 agoFor 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 agoMANY people? Source?
- sincerely 8y agozero 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 agoHaven't you studied cardinality? You don't have One to Multiple relationships, you have One to Many /s
- rodorgas 8y agoBetween zero or all, could be many or some.
- jrochkind1 8y agoOr perhaps "few".
- deleted 8y ago[deleted]
- ohitsdom 8y agoMost "stateful" functionality (including all you mentioned) can still be done with a CSS driven drop down menu.
- ThirdFoundation 8y agoCould this be handled by a templating engine like handlebars?
- Grumbledour 8y agoIt 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 agocss is often the slowest part of a webapp. complex css like this is not necessarily better accessibility-wise than javascipt
- Grumbledour 8y agoWhy 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 agoDo 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 agoAny 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 agoWhat exactly does "semantically meaningful and accessible html" mean?
- tgarv 8y agoHopefully "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 agoAs 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 agoGood point. Perhaps, I would think, Bloomberg's menu does this and he can just "borrow" their semantic + A11Y-centric markup?
- nathancahill 8y agoWow, blast from the past. Still remember implementing that on some of my first websites.
- 8y ago
- chrismorgan 8y agoThe 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 agoNice try but it works fine in all browsers for me.
- tabtab 8y agoIt'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 agoWhen 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 agoIt 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 agoCool stuff, You should check it out: https://careers.bloomberg.com/job/detail/57675 https://careers.bloomberg.com/job/detail/57675
- analogmemory 8y agoGreat 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 agoNo. Mac OS had it.
- __david__ 8y agoCorrect. 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 agoYou'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 agoyour html is over 400 lines. this is why you need JS man :)
- mariusmg 8y agoYeah, with JS it could be 800 lines :)
- chiefalchemist 8y agoAny 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 agoObviously 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 agoThanks!
- ddtaylor 8y agoRemember with hidden checkbox elements CSS can be used for multiple states!
- pmilla1606 8y agoWell 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-dropdown http://bjk5.com/post/44698559168/breaking-down-amazons-mega-... 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 />.
- albanberg 8y agoI noticed the same. If one clicks on the top folder on the left, the submenu holds open but it would be better to not need to do this.
- yscik 8y agoEven 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.
- ckluis 8y agoSubmit a PR.
- chrismorgan 8y agoThe 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.)
- k8martian 8y agoI 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 8y agoThey may have been testing a design with a small portion of their traffic. Perhaps you were bucketed into the variant group.
- elemakil 8y agoPretty 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 8y agoI think this is just how it's implemented. It works this way in Firefox on Windows as well.
- psychometry 8y agoAwful 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 8y agoThere'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-dropdown http://bjk5.com/post/44698559168/breaking-down-amazons-mega-...
- psychometry 8y agoYes, 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 8y agoAt 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 8y agoI 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.
- deleted 8y ago[deleted]
- amelius 8y agoI like the menu on Stripe.com. Make a pure CSS version of that and you're king :)
- seba_dos1 8y agoShould 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 8y agoSadly `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 8y ago> 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 8y agoNo easing though. You can't avoid the "snapping" at the end
- amelius 8y agoI agree. Browsers should communicate the user's OS settings of "animated GUI", so users can get what they prefer.
- a_r_8 8y agoOff topic but that is a gnarly commit history
- swyx 8y agolet he who is without sin cast the first stone...
- JoJoJoboop 8y agoAtleast it's okay though.
- Aardwolf 8y agoI 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
- codetrotter 8y ago> shouldn't there be double quotes around all href targets? Only the ones that need it. Like for example when there is a single quote in the link like you mentioned.
- CaveTech 8y agoQuotes aren't actually necessary unless the attribute contains HTML special characters (" ' ` = < >)
- gramstrong 8y agoJudging by some of these popular comments, I never want to show HN anything that I build in my free time, ever.
- cmpolis 8y agoPeople who appreciate the submission upvote, critics comment. There may be more of the former, but unfortunately the latter are more impactful
- chemochemo 8y agoIt sounds to me like this a feature, not a bug.
- lucideer 8y agoI 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.
- deleted 8y ago[deleted]
- astura 8y agoMakes 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 8y agoI experienced a broken back button after clicking a few different menu items.
- malydok 8y agoI, 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 8y agoOn 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.
- Kagerjay 8y agoThat'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/8d591195c12c9421b4db58734396e51b https://codepen.io/Kagerjay/pen/8d591195c12c9421b4db58734396... 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
- deleted 8y ago[deleted]
- deleted 8y ago[deleted]
- bytematic 8y agoYours is actually much smoother for me, but that might be due to some intended animation delays or something.
- DonHopkins 8y agoThere'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=21903 https://blogs.msdn.microsoft.com/oldnewthing/20080619-00/?p=... >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-mouse-movement-paths/ https://css-tricks.com/dropdown-menus-with-more-forgiving-mo... >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.
- Sawamara 8y agoI 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 8y agoJust 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 8y agoSure, 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.
- workinthehead 8y agoWhat's the point of your comment? If you can do the same thing without JavaScript or with, the implementation that doesn't use JavaScript is categorically preferable.
- yzmtf2008 8y agoThe point of the comment, is that if you can do the same thing without JavaScript or with, the implementation that doesn't use JavaScript is not categorically preferable.
- nkg 8y agoI had never noticed that "Where to invest $10,000" before.
- tabtab 8y agoIt'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.
- jcfrei 8y agoI wouldn't say the web UI got screwed. It's just that it grew out of a markup language whose main focus was adding semantics and hyperlinks to documents. Then commercial interests (among others) focused on adding more and more functionality to make them look pretty while maintaining some back portability and voila we ended up with the kludge that's todays web pages.
- tabtab 8y agoSame thing. Something that was meant for doing X was shoehorned to do Y, and the shoehorning has been ugly and kludgy. Let's try to throw it away and start fresh, or at least give it competition.
- robbrown451 8y agoI was coding UI stuff for desktops in the 90's, and I'd take browser programming in 2018 any day.
- tabtab 8y agoAt first the products were buggy, but got better with each release. Even now our Oracle Forms programmers get stuff done about 7x faster than the Dot-Netters, and with about 1/7 the code. It's embarrassing: RSI* City. The OF apps are ugly, but they "gitter done". (Oracle bleeped up the Oracle Forms installation process, but that's another story.) * Sometimes called "carpal tunnel syndrome"
- spiderfarmer 8y ago
- etaioinshrdlu 8y agoI 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.
- vanzorn 8y agoI 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 8y agoBloomberg 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.
- SkyMarshal 8y agoNice job. To add to the test db, works on Firefox 60.0.2 (64bit) on Ubuntu 18.04 too.