Hover-triggered Off-Canvas Side Menu – Less Annoying Hotzone

Preview:

Description:

Less Annoying Hotzone is a sleek, modern off-canvas side menu that slides out from the left when you hover over the left edge of a webpage.

Traditional hover-activated off-canvas sidebars often disappear abruptly when a user’s cursor moves slightly outside the element boundaries. Less Annoying Hotzone solves this by implementing an overflow hover behavior that keeps the sidebar visible even when the cursor moves outside its boundaries.

See It In Action:

How to use it:

1. Place the menu for your off-canvas sidebar within a <div> element.

<div id="left_nav">
  Your Nav Here
</div>

2. Add the following CSS snippets to your page. These styles handle the positioning, appearance, and smooth transition of the sidebar.

• –hotzone-size: This CSS variable defines the width of the invisible “hotzone” that triggers the sidebar.
• transform: translateX(-100%): This initially hides the sidebar by moving it completely off-screen to the left.
• transition: This property ensures a smooth animation when the sidebar slides in and out.
• :hover and &.on: The sidebar becomes visible either when the user hovers directly over it (:hover) or when the JavaScript adds the .on class.
• ::after: This pseudo-element creates the “hotzone” itself. It’s an invisible area extending to the left of the sidebar.

#left_nav {
  --hotzone-size: 5rem;
  position: fixed; top: 0; left: 0;
  height: 100%;
  background: var(--color-dark-max);
  padding: var(--spacing-l);
  color: var(--color-bright-4);
  max-width: 300px;
  /* Transition effects */
  transform: translateX(-100%);
  transition: all .2s ease;
  transition-delay: .05s;
  &:hover,
  &.on { transform: none; }
  /* Hotzone overflow (optional, but enhances behavior) */
  &::after {
    content: '';
    position: absolute;
    top: 0;
    height: 100%;
    width: var(--hotzone-size);
    right: calc(var(--hotzone-size) * -1);
  }
}

3. Add this JavaScript code to enable the hover behavior:

• mouseleave Event: The JavaScript listens for the mouseleave event on the entire document.
• event.clientX < 20: This condition checks if the mouse cursor has left the window and is within 20 pixels of the left edge. If it is, the .on class is added to the sidebar, keeping it open.
• mouseenter Event: This detects if you hover the hotzone, and remove the .on to make the sidebar close again.

const fn = {
  el: document.getElementById('left_nav'),
  hotzone_left: function() {
    if (!this.el) return;
    document.addEventListener('mouseleave', (event) => {
      if (event.clientX < 20) this.el.classList.add('on');
    });
    document.addEventListener('mouseenter', () => {
      this.el.classList.remove('on');
    });
  },
};

FAQs

Q: Can I use this for a right-side sidebar?
A: Yes, but you’ll need to modify the CSS (change left to right, adjust transform), and update the JavaScript to check for event.clientX near the right edge of the window.

Q: How can I customize the animation speed?
A: Adjust the transition property in the CSS. For example, transition: all .3s ease; would make the animation slightly slower.

Q: How do I adapt this for touch devices?
A: You’ll need to add a separate touch-based trigger, such as a button or a swipe gesture. The core concept of keeping the sidebar open can be adapted, but the mouse-specific events won’t apply. You might use touchstart and touchend events, combined with a class toggle.