Come creare un menu hamburger reattivo in AMP HTML

Question

Sto provando a creare un sito Web AMP HTML (vedere https://www.ampproject.org) Ma non riesco a trovare da nessuna parte come si suppone di creare un menu di hamburger reattivo? Javascript non è consentito e non ci sono componenti AMP disponibili per questo?

Answer 1

Questo non è attualmente possibile senza hack principali.

seguire nella richiesta funzione di bug: https://github.com/ampproject/amphtml/issues/827

Answer 2

ho compiuto questo con l'uso di un :target pseudoclasse.

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

Answer 3

Si può fare questo con il: focus classe di pseudo. Dai un'occhiata a https://fresnobee.relaymedia.com/amp/news/local/education/article61889207.html per un esempio dal vivo (anche www.washingtonpost.com fa così). Oppure puoi aspettare che il tag <amp-sidebar> venga pubblicato.

Il codice sembra

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

e 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 4

AMP ha ora il supporto per il menu utilizzando il componente amp-sidebar.