Home >

Context menu without javascript

Demo

Triggered by a button:
Triggered by a link:
🍔

Code

<div class="menu-container">
  <button class="trigger">🍔</button>
  <nav class="menu">
    <ul>
      <li><a href="#">Never gonna give you up</a></li>
      <li><a href="#">Never gonna let you down</a></li>
      <li><a href="#">Never gonna run around…</a></li>
      <li><a href="#">…and desert you</a></li>
    </ul>
  </nav>
</div>

Basic functionality:

.menu-container {
  display: inline-block;
  position: relative;
}

.menu {
  visibility: hidden;
  position: absolute;
}

.trigger:focus + .menu, .menu:active {
  visibility: visible;
}

Additional styles applied for nicer visuals (see source).

Bonus: Animate menu by applying a transition to max-height.

.menu {
  overflow: hidden;
  transition: max-height .5s;
  max-height: 0;
}

.trigger:focus + .menu, .menu:active {
  max-height: 1000px;
}

Notes

The adjacent sibling combinator (+) separates two selectors and matches the second element only if it immediately follows the first element, and both are children of the same parent element.

Sources