AMPで応答性の高いハンバーガーメニューを作成する方法

AMP HTML Webサイトを作成しようとしています（https://www.ampproject.orgを参照）しかし、どのように応答性のハンバーガーメニューを作成するはずですか？ JavaScriptは許可されておらず、利用できるAMPコンポーネントはありませんか？AMPで応答性の高いハンバーガーメニューを作成する方法

出典

2015-12-07 Erwin Beckers

AMPを使用して複数ページのウェブサイトを構築しようとしていますか？ AMPが設計されているとは思えないユースケースではありません。私が見ている/見ている例は、「ウェブサイト」ではなく「ページ」です。非AMPウェブサイトからの個々の記事を単純化したものです。 – MatCarey

@MatCareyどうすればアンプページを冗長化できますか？アンプの詳細ページを作成するには、すべての製品に個別のページを作成する必要がありますか？ –

これは、大規模なハッキングなしでは現在可能ではありません。私は:target疑似クラスを使用してこれを達成したhttps://github.com/ampproject/amphtml/issues/827

出典

2015-12-21 20:24:51

：

は、機能要求のバグに沿って従ってください。

HTML

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

出典

2016-03-28 13:35:46 somecallmejosh

私はこれもやっています。特に、 '：focus'擬似クラスは（少なくともChromeでは）発生すると思われる一種の因果関係のため、いくつかのデスクトップブラウザで実際には動作しません。 '：target'ははるかに効果的で、カルーセルでもうまくいきます（ここで私が調べたように）。（https://dev.amdouglas.com/amphtml-examples/nojs-carousel/#div1） – amdouglas

あなたはでこれを行うことができ

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

CSS：focus疑似クラス。実際の例については、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>

のように見えると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; 
}

出典

2016-04-22 16:55:08

ライブ例は機能していません。メニュー項目をクリックすると、メニューが閉じてURLには移動しません。例のコードは同じことを行います。このコードが正しく動作するようになったことはありますか？ –

AMPは今amp-sidebarコンポーネントを使用してメニューをサポートしています。

出典

2016-06-23 05:10:51 Ivey

AMPで応答性の高いハンバーガーメニューを作成する方法

答えて

関連する問題