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 that leverages Element.closest().

var menu = document.querySelector(".menu-dropdown");

function handleClick(evt) {
  // Only if a click on a dropdown trigger happens, either close or open it.
  …
  
  // If a click happens somewhere outside .menu-dropdown, close it.
  if (!evt.target.closest(".menu-dropdown")) {
    menu.classList.add("is-hidden");
  }
}

window.addEventListener("click", handleClick);

Here’s a pen with the result:

🔥 If you haven’t checked out Hakim El Hattab’s dynamically drawn hit areas for menus, as talked about in Building Better Interfaces, be sure to do so, as they’re amazing:

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 use of this technique: a <details-menu> and a <details-dialog> custom element.

Details on <details>
Details on <details> (slides)
<details-menu> element →
<details-dialog> element →

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 things — menus — in Codea. I was trying to solve a problem that has been solved for decades.

So I set out to make the best menus I could make for iOS.

The resulting code has been published as a separate pod.

pod 'Menu'

In to blogpost author Simeon Saëns focuses on the details that made it into this nice library. be sure to check out the videos too!

Menu Source (GitHub) →
The iOS Menu →
Detailing the iOS Menu →

Sidenote: Also see PanelKit and TabView, also two nice community-created UI components that found their birth in bigger projects that needed them (just like my own ansi-php package for example).

Implementing Off-Canvas Navigation For A Responsive Website

offscreenresponsivenavigation

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 2D transform’s translate() vs absolute positioning: performance evaluation then.

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.)
  • unusable to all other users

Problem is that you have to know the name of the action you want to invoke. Sometimes — especially when you’re new in a program — you’ll want to skim through the menu/options to get to know the app or to get to the action you want.

However, it does seem like a quick jump to voice control: instead of typing, just say what you want. An ideal situation would be to keep the menu as we know it, and provide the mechanics/features of the HUD via voice control.

Introducing the HUD. Say hello to the future of the menu. →

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 you can add new options to these without having to write a browser add-on. In Firefox 8 (the current one) we have support for those

HTML5 context menus in Firefox (Screencast and Code) →