AMP HTML Webサイトを作成しようとしています( https://www.ampproject.org を参照してください)。 JavaScriptは許可されておらず、使用可能なAMPコンポーネントはありませんか?
AMPで amp-sidebar コンポーネントを使用したメニューがサポートされるようになりました。
:target
疑似クラスを使用してこれを実現しました。
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);
}
これは現在、大規模なハックなしでは不可能です。
機能リクエストのバグをフォローしてください: https://github.com/ampproject/amphtml/issues/827
:focus疑似クラスでこれを行うことができます。実際の例については https://fresnobee.relaymedia.com/amp/news/local/education/article61889207.html をご覧ください(www.washingtonpost.comもこのようにしています)。または、<amp-sidebar>
タグを有効にします。
コードは次のようになります
<a id="burger" tabindex="0">☰</a>
<div id="burgerCancel" tabindex="0">☰</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;
}
Iveyはすでにamp-sidebar
、ほとんどすべてのWebデザイナーにとっておそらくすべてが簡単ですが、AMPプロジェクトも実際の「ハンバーガー」の部分について チュートリアルがあります であることを言及する価値があります。
すべてのフォントに存在しない バグア記号 を使用することに注意してください。画像を使用する:
<div role="button" on="tap:sidebar.toggle" tabindex="0" class="hamburger">
<amp-img src="/images/logo_menu.svg" height="50" width="50">
</div>
さらに、実装する前に、ハンバーガーメニューにいくつかの欠点があるため、ハンバーガーメニューが特定の各ケースに適切なソリューションであることを確認することをお勧めします。その長所と短所について、そしていつそれを避けるべきかについて、オンラインで多くの記事があります。