एएमपी एचटीएमएल

Question

में एक उत्तरदायी हैमबर्गर मेनू कैसे बनाएं I am एएमपी एचटीएमएल वेबसाइट बनाने की कोशिश कर रहा हूं (https://www.ampproject.org देखें) लेकिन मुझे कहीं भी नहीं मिल रहा है कि आपको एक उत्तरदायी हैमबर्गर मेनू कैसे बनाना है? जावास्क्रिप्ट की अनुमति नहीं है और इसके लिए कोई एएमपी घटक उपलब्ध नहीं हैं?

Answer 1

यह वर्तमान में प्रमुख हैक्स के बिना संभव नहीं है।

सुविधा का अनुरोध बग में साथ पालन करें: https://github.com/ampproject/amphtml/issues/827

Answer 2

मैं एक :target pseudoclass के उपयोग के साथ इस पूरा किया है।

एचटीएमएल

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

सीएसएस

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

Answer 3

आप के साथ ऐसा कर सकते हैं: फोकस छद्म वर्ग। लाइव उदाहरण के लिए https://fresnobee.relaymedia.com/amp/news/local/education/article61889207.html पर एक नज़र डालें (www.washingtonpost.com यह भी इस तरह से करता है)। या आप लाइव जाने के लिए <amp-sidebar> टैग के लिए प्रतीक्षा कर सकते हैं।

कोड

तरह

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

और सीएसएस लग रहा है

#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-sidebar घटक का उपयोग मेनू के लिए समर्थन हासिल है।