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

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 tag to go live.

The code looks like

☰
☰

    

        
Local News
        
Sports
    

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