Amp html 如何在AMP HTML中创建响应性强的汉堡包菜单

我正在尝试创建一个AMP HTML网站（请参阅） 但是我在任何地方都找不到你应该如何创造一个反应灵敏的汉堡包菜单？

---

Javascript是不允许的，并且没有AMP组件可供使用？

如果没有重大的黑客攻击，目前这是不可能的

---

在FeatureRequestBug中进行后续操作：

我使用了一个

：target

伪类来完成这项工作

HTML

---

您可以使用：focus伪类来实现这一点。请看一个实例（www.washingtonpost.com也这样做）。或者您可以等待

标签上线

代码看起来像

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

---

AMP现在支持使用该组件的菜单。

Ivey已经提到了

AMP侧边栏

，对于大多数网站设计师来说，这一切都很简单，但值得一提的是，AMP项目还涉及实际的“汉堡包”部分

请注意，它使用的字体不是每种字体都存在的。最好使用图片：

<div role="button" on="tap:sidebar.toggle" tabindex="0" class="hamburger">
  <amp-img src="/images/logo_menu.svg" height="50" width="50">
</div>

---

此外，在实施之前，可能需要检查汉堡包菜单是否适合每个特定情况，因为它有一些缺点。网上有很多关于它的优缺点以及什么时候避免它的文章。

你想用AMP建立一个多页面的网站吗？这不是我认为AMP设计的用途。我看到/构建的示例是“页面”而不是“网站”-它们是非AMP网站中单个文章的简化视图。@MatCarey那么我们如何使AMP页面多余？我们是否必须为所有产品制作单独的页面来制作amp详细信息页面？我也会这样做，特别是因为

：focus

伪类在某些桌面浏览器上无法真正工作，因为似乎出现了某种因果悖论（至少在Chrome中）<代码>：target更有效，它也适用于旋转木马，live示例不起作用，当您单击菜单项时，菜单将关闭，而不转到url，示例中的代码也会执行相同的操作。你曾经让这个代码正常工作过吗？

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

<div role="button" on="tap:sidebar.toggle" tabindex="0" class="hamburger">
  <amp-img src="/images/logo_menu.svg" height="50" width="50">
</div>