Open and Close without javascript.

Introduction

Check out the hamburger icon button to the right of the screen.

When you click on it a few things happen:

  1. the button itself changes to a close button
  2. it shows the table of content

The table of content lists links to sections in this page and clicking on one of them jumps the page to that section (good old anchor). Then the menu is closed and the hamburger button restored.

Here's the thing: there's no javascript whatsoever.

Long story short: it's a trick with the :target pseudo-class.

The :target pseudo-class represents the unique element, if any, with an id matching the fragment identifier of the URI of the document.

Mozilla Developer Network

And in this case it turns out that if the link, (the a element) has an id matching the target (href) then it will target itself and therefor is hide-able with CSS.

HTML

<nav class="nh-layout-inpageNav">
  <a id="nh-cmp-menu-link" href="#nh-cmp-menu-link" title="open menu"></a>
    <div class="nh-menu" id="nh-cmp-menu">
      <p class="heading">Table of Content</p>
        <a id="nh-btn-close" href="#" title="close menu"></a>
        <ul>
          <li><a href="#intro">Introduction</a></li>
          <li><a href="#section1"><abbr title="Hypertext Markup Language">HTML</abbr></a></li>
          <li><a href="#section2"><abbr title="Cascading Stylesheets">CSS</abbr></a></li>
          <li><a href="#section3">Browser Support</a></li>
    </ul>
  </div>
</nav>

CSS

Below here is just the CSS that actually matters for the functionality. The Hamburger link, which is to show the menu, <a id="nh-cmp-menu-link" href="#nh-cmp-menu-link" title="open menu"></a> has the same value for href and id so it will hide itself on click by the :target rule.

The rule after that, with the adjacent selector or next-sibling selector tells the menu to show up.

#nh-cmp-menu {
  display: none;
}

#nh-cmp-menu-link:target {
  display: none;
}

#nh-cmp-menu-link:target + #nh-cmp-menu {
  display: block;
}

Browser Support

According to MDN the :target pseudo class is supported by all major browsers latest versions and even by IE9. Also should work on mobile and so far I've been able to test it does.