AMP HTML'ye duyarlı bir hamburger menüsü nasıl oluşturulur

Question

Bir AMP HTML web sitesi oluşturmaya çalışıyorum (bkz. https://www.ampproject.org) Ancak, duyarlı bir hamburger menüsü oluşturmanın nasıl bir yolunu bulamıyorum? Javascript'e izin verilmiyor ve bunun için AMP Bileşenleri mevcut değil mi?

Answer 1

Bu, büyük çaplı kesiciler olmadan şu anda mümkün değildir.

özellik isteği hata tümüyle izleyin: Bir :target pseudoclass kullanımı ile bu başardık https://github.com/ampproject/amphtml/issues/827

Answer 2

.

HTML

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

Answer 3

Sen ile yapabilirsiniz

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

CSS: odak sözde sınıfının. Canlı bir örnek için https://fresnobee.relaymedia.com/amp/news/local/education/article61889207.html'a bir göz atın (www.washingtonpost.com da bu şekilde yapıyor). Ya da <amp-sidebar> etiketinin yayınlanmasını bekleyebilirsiniz.

kod

gibi

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

ve css görünüyor

#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 şimdi amp-sidebar bileşenini kullanarak menü için desteği vardır.