Hamburger Menu With Only HTML and CSS

Stack Overflow had some people trying to do a hamburger menu with JavaScript. Here’s my attempt at it but only with HTML and CSS. It works by using the CSS general sibling combinator ~ and a checkbox. When the checkbox is checked the menu is shown. The preview is below and the inspiration came from Opera’s main menu.

<!DOCTYPE html>
<html>
<head>
  <style>
    #hamburger {
      cursor: pointer;
      display: inline-block;
      margin-left: 0.5em;
    }

    #menuToggler {
      display: none;
    }

    #menu {
      border-bottom: 1px solid #000000;
      overflow: hidden;
      height: 0px;
      transition: height 0.3s;
    }

    #menu a {
      display: block;
      width: 200px;
    }

    #menuToggler:checked + div {
      border-top: 1px solid #000000;
      height: 100px;
    }
  </style>
</head>
<body>
  <form>
    <label id="hamburger" for="menuToggler">☰ open menu</label>
    <input id="menuToggler" type="checkbox">
    <div id="menu">
      <a href="/">one</a>
      <a href="/">two</a>
      <a href="/">three</a>
    </div>
  </form>
</body>
</html>

Preview




Author Tony Crowe, Salt Lake City, UT
top
home
Attribution
Lato font by Łukasz Dziedzicwww.latofonts.com/team
Roboto font by Christian Robertson, Google Incchristianrobertson.comwww.google.com/fonts
Inconsolata font by Raph Levien, Google Incwww.levien.comwww.google.com/fonts
hexo: fast, simple & powerful blog frameworkhexo.io
ace editorace.c9.io
virtual-domwww.npmjs.com/package/virtual-dom
Black Granite Water Droplets, William Warbyhttps://www.flickr.com/photos/wwarby