13

AMP HTML Web サイト ( https://www.ampproject.orgを参照) を作成しようとしていますが、レスポンシブ ハンバーガー メニューを作成する方法がどこにも見つかりません。Javascript は許可されておらず、使用できる AMP コンポーネントはありませんか?

4

5 に答える 5

11

AMP は、 amp-sidebarコンポーネントを使用したメニューをサポートするようになりました。

于 2016-06-23T05:10:51.247 に答える
1

: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-22T16:55:08.410 に答える