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

Answer 1

Ivey has already mentioned amp-sidebar, from which everything is probably straightforward for most webdesigners, but it's worth mentioning that the AMP project also has a tutorial about the actual "hamburger" part.

Beware that it uses a bagua symbol that does not exist in every font. Better use a picture :

<div role="button" on="tap:sidebar.toggle" tabindex="0" class="hamburger">
  <amp-img src="/images/logo_menu.svg" height="50" width="50">
</div>

In addition, before implementing it one may want to check that the hamburger menu is an appropriate solution for each particular case, since it has some downsides. There are a number of articles online about its pros and cons and when to avoid it.

Answer 2

You can do this with the :focus pseudo class. Take a look at https://fresnobee.relaymedia.com/amp/news/local/education/article61889207.html for a live example (www.washingtonpost.com also does it this way). Or you could wait for the <amp-sidebar> tag to go live.

The code looks like

<a id="burger" tabindex="0">&#9776;</a>
<div id="burgerCancel" tabindex="0">&#9776;</div>
<div id="burgerMenu">
    <ul>
        <li><a href="/news/local/#navlink=ampnav">Local News</a></li>
        <li><a href="/sports/#navlink=ampnav">Sports</a></li>
    </ul>
</div>
<button id="burgerMask"></button>

and the css

#burger:focus ~ #burgerMenu {
  transform: translateY(0px); /* or whatever other way you want it to appear */
}

#burgerMask {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: #000;
z-index: 998;
border: 0;
opacity: 0;
transition: opacity 250ms cubic-bezier(0, .67,0,.67);
pointer-events: none; /*this is important */
}


#burger:focus ~ #burgerMask {
    pointer-events: auto;
    opacity: 0.7;
    display: block;
}

Answer 3

This is not currently possible without major hacks.

Follow along in the feature request bug: https://github.com/ampproject/amphtml/issues/827

Answer 4

AMP now has support for menu using the amp-sidebar component.

Answer 5

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);
}