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>
    #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;
    <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>


Home Archive atom.xml Hexo⤴