Toggling Mobile Navigation Visibility with CSS: 3 Ways

As a frontend developer, I sometimes need to change the visibility of mobile navigation or other ui elements without using JavaScript. Although it may seem hard at first, you can easily do this with CSS. In this article, I'll show you three easy ways to do it

1. Checkbox Hack

The checkbox hack is an ingenious way to use the :checked pseudo-class to manipulate other elements.

HTML:

<label for="menuToggle" class="menu-toggle">Menu</label>
<input type="checkbox" id="menuToggle" class="menu-checkbox">
<nav class="mobile-nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

CSS:

.menu-toggle {
  cursor: pointer;
  background-color: #333;
  color: #fff;
  padding: .5rem 1rem;
}

.menu-checkbox {
  display: none;
}

.mobile-nav {
  display: none;
}

.menu-checkbox:checked ~ .mobile-nav {
  display: block;
}

https://codepen.io/joxx/pen/QWzqbrE

2. Leveraging the :focus-within pseudo-class

Leveraging the :focus-within pseudo-class is another handy trick to toggle visibility.

HTML:

<a href="#" class="menu-toggle">Menu</a>
<nav class="mobile-nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

CSS:

.menu-toggle {
  background-color: #333;
  color: #fff;
  padding: .5rem 1rem;
  text-decoration: none;
}

.mobile-nav {
  display: none; 
}

.menu-toggle:focus-within + .mobile-nav {
  display: block; 
}

https://codepen.io/joxx/pen/MWZEYrg

3. Using the :target Pseudo-Class

This method revolves around the :target pseudo-class which gets triggered when an element with an ID matches the current URL's fragment.

<div id="mobileNav">
  <a href="#mobileNav" class="menu-toggle menu-open">Menu</a>
  <a href="#" class="menu-toggle menu-close">Close</a>
  <nav class="mobile-nav">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</div>

CSS:

.menu-toggle {
  background-color: #333;
  color: #fff;
  padding: .5rem 1rem;
  text-decoration: none;
}

#mobileNav:not(:target) .mobile-nav,
#mobileNav:not(:target) .menu-close {
  display: none;
}

#mobileNav:target .menu-open {
  display: none;
}

https://codepen.io/joxx/pen/oNJeROV

Conclusion

You can easily change the visibility of mobile navigation using only CSS. This way, frontend developers can create interactive features that are usually made with JavaScript. But, be sure to check if it suits your project's needs and is accessible. In certain situations, using JavaScript might still be a better choice, especially for complicated tasks or to help users using assistive technologies.