Jak utworzyć elastyczne menu hamburgerów w AMP HTML

Question

Próbuję utworzyć stronę HTML AMP (zobacz https://www.ampproject.org) Ale nie mogę znaleźć nigdzie, jak masz stworzyć responsywne menu hamburgera? JavaScript jest niedozwolony i nie ma dostępnych komponentów AMP?

Answer 1

Nie jest to obecnie możliwe bez większych hacków.

Idź wzdłuż na żądanie funkcja błędu: https://github.com/ampproject/amphtml/issues/827

Answer 2

I dokonał tego z użyciem :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); 
} 

Answer 3

Można to zrobić za pomocą: skupić pseudo klasy. Spójrz na https://fresnobee.relaymedia.com/amp/news/local/education/article61889207.html na przykład na żywo (www.washingtonpost.com również robi to w ten sposób). Możesz też poczekać, aż tag <amp-sidebar> uruchomi się.

kod wygląda

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

i 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 ma teraz wsparcie dla menu przy użyciu komponentu amp-sidebar.