How to create a responsive hamburger menu in AMP HTML

Question

I'm trying to create an AMP HTML website (see https://www.ampproject.org) But i can't find anywhere how you are supposed to create a responsive hamburger menu ? Javascript is not allowed and there are no AMP Components available for it ?

Answer 1

I have accomplished this with the use of a :target pseudoclass.

HTML

<nav id="slide-in-menu">
  ...nav menu content...
</nav>
<section class="content-section">
  <a href="#slide-in-menu">Hamburger Icon</a>
</section>

CSS

#slide-in-menu {
  transform: translateX(-100%);
  transition: transform .2s ease-in-out;
  ... additional required styles ...
}
#slide-in-menu:target {
  transform: translateX(0);
}