Using JavaScript’s closest() Method to Capture a “Click outside” an Element

In Practical Use Cases for JavaScript’s closest() Method, Andreas Remdt talks about some nice use cases that use Element.closest(). I especially like this example with a menu. Click on one of the links and it will show the menu which has the class menu-dropdown. Clicking outside said menu will close it. It’s that latter one …

Using the <details> element to create modals and menus

The folks over at GitHub have been leveraging the <details> element to create modals and menus: <details class=“dropdown”> <summary class=“btn” aria-haspopup=“menu”>…</summary> <ul class=“dropdown-content”> <li><a href="/muan">profile</a></li> … </ul> </details> Very clever, as <details> trumps the <modal> element in many ways: Semantic Accessible No JavaScript Next to that, they’ve also released a few custom elements that make …

Create beautiful menus on iOS with Codea’s iOS “Menu” pod

The folks who created Codea — an app for creative coding — recently adjusted it to make it also run on the iPhone. While Autolayout tackles most of the screen adapations, they were in need of menus. I realised six months ago as I was using my Mac, using the menus, that I need these …

Implementing Off-Canvas Navigation For A Responsive Website

Not only a good example on how to do it, but also an example on how to do it right: enhance progressively, don’t over-rely on jQuery, and trick your browser into using hardware acceleration where possible Implementing Off-Canvas Navigation For A Responsive Website → Not convinced or 100% about hardware acceleration? Be sure to watch …

Concept: Ubuntu’s HUD

Say hello to the Head-Up Display, or HUD, which will ultimately replace menus in Unity applications. Here’s what we hope you’ll see in 12.04 when you invoke the HUD from any standard Ubuntu app that supports the global menu. To me, this seems: good to keyboarders like me (I’m a fan of QuickSilver/Alfred, shortcuts, etc.) …

HTML5 context menus in Firefox

You may not know it, but the HTML5 specifications go beyond what we put in the pages and also define how parts of the browser should become available to developers with HTML, CSS and JavaScript. One of these parts of the specs are context menus, or “right click menus”. Using HTML5 and a menu element …