Veggie burger menu

The hamburger menu is a widely adopted UI pattern typically implemented using JavaScript, and that's what I've done in the past. However, for the last few years I've been using a CSS based version that has proved very reliable.

Stripped back to the basics it uses a <label> to activate an <input type="checkbox"/> with an adjacent sibling selector to control the display:

<style>
.menu-content {
    display: none;
}
.menu-toggle:checked + .menu .menu-content {
    display: block;
}
.menu-toggle {
    display: none;
}
</style>

<input type="checkbox" id="menu-toggle" class="menu-toggle"/>
<nav class="menu">
    <label for="menu-toggle">
        Menu control
    </label>
    <div class="menu-content">
        <p>Menu content</p>
    </div>
</nav>

This is extremely simple and reliable - to the point where I can include a fully operational demo in the content of this blog post. (Note that I've chosen not to hide the checkbox here to illustrate the mechanics at work.)

This is the minimum required for the feature to be functional using display to control the visibility of the menu content, with some more advanced CSS it's possible to add transitions and it can be further enhanced with JavaScript.