DEV Community

joachim kliemann
joachim kliemann

Posted on

6

Toggling Mobile Navigation Visibility with CSS: The Checkbox Hack

In a mobile-first world, creating an intuitive and responsive navigation menu is crucial. The checkbox hack allows you to develop mobile flyout menus without JavaScript. This article will guide you through developing several styles of mobile navigation menus using the checkbox hack.

Basics of Checkbox Hack

The checkbox hack is based on three components:

  1. A <label> element.
  2. An associated <input type="checkbox">.
  3. A CSS rule that targets the :checked state of the checkbox.

The idea is to toggle the checkbox state by clicking on the label, and then using the :checked CSS pseudo-class to style or reveal a sibling element.

Basic HTML Structure

<input type="checkbox" id="menuToggle">
<label for="menuToggle">☰ Menu</label>
<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
Enter fullscreen mode Exit fullscreen mode

Different Styles of Menus

Side Menu (Left to Right)

nav {
    position: absolute;
    top: 0;
    left: -300px; /* width of the menu */
    width: 300px;
    height: 100vh;
    transition: 0.3s;
}

#menuToggle:checked + label + nav {
    left: 0;
}
Enter fullscreen mode Exit fullscreen mode

Sliding Menu (Top to Bottom)

nav {
    position: absolute;
    top: -100vh;
    left: 0;
    width: 100vw;
    height: 100vh;
    transition: 0.3s;
}

#menuToggle:checked + label + nav {
    top: 0;
}
Enter fullscreen mode Exit fullscreen mode

Splash Menu (Centered)

nav {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 80vw;
    height: 80vh;
    transition: 0.3s;
    background-color: rgba(0,0,0,0.7);
    color: white;
    border-radius: 15px;
}

#menuToggle:checked + label + nav {
    transform: translate(-50%, -50%) scale(1);
}
Enter fullscreen mode Exit fullscreen mode

Enhancements and Notes

  • You can further style the label as a hamburger icon, and change it to a close icon when the menu is open using CSS.
  • For better accessibility, ensure to provide fallbacks or alternatives for users who may not be able to interact with this kind of menu.
  • Although the checkbox hack is clever and works in most modern browsers, for more complex interactions or larger projects, JavaScript frameworks or libraries might be more suitable.

Conclusion

The checkbox hack offers a lightweight method to create interactive components without relying on JavaScript. Whether you choose a sidemenu, a top-down sliding menu, or a splash menu, you can achieve a smooth user experience on mobile devices. Experiment with styles and transitions to fit the look and feel of your website!

Image of AssemblyAI tool

Transforming Interviews into Publishable Stories with AssemblyAI

Insightview is a modern web application that streamlines the interview workflow for journalists. By leveraging AssemblyAI's LeMUR and Universal-2 technology, it transforms raw interview recordings into structured, actionable content, dramatically reducing the time from recording to publication.

Key Features:
🎥 Audio/video file upload with real-time preview
🗣️ Advanced transcription with speaker identification
⭐ Automatic highlight extraction of key moments
✍️ AI-powered article draft generation
📤 Export interview's subtitles in VTT format

Read full post

Top comments (0)

Cloudinary image

Video API: manage, encode, and optimize for any device, channel or network condition. Deliver branded video experiences in minutes and get deep engagement insights.

Learn more

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay