如何在 AMP HTML 中创建响应式汉堡菜单答案

【问题标题】：How to create a responsive hamburger menu in AMP HTML如何在 AMP HTML 中创建响应式汉堡菜单
【发布时间】：2015-12-07 14:59:29
【问题描述】：

我正在尝试创建一个 AMP HTML 网站（请参阅 https://www.ampproject.org）但是我在任何地方都找不到您应该如何创建响应式汉堡菜单？不允许使用 Javascript，并且没有可用的 AMP 组件？

【问题讨论】：

您是否尝试使用 AMP 构建多页网站？这不是我认为 AMP 设计的用例。我看到/构建的示例是“页面”而不是“网站”——它们是来自非 AMP 网站的单个文章的简化视图。
@MatCarey 那么我们怎样才能让 amp 页面变得多余呢？我们是否必须为所有产品制作单独的页面才能制作放大器详细信息页面？

标签： amp-html

【解决方案1】：

AMP 现在支持使用 amp-sidebar 组件的菜单。

【讨论】：

【解决方案2】：

我已经通过使用: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);
}

【讨论】：

这也是我应该做的，特别是因为 :focus 伪类在某些桌面浏览器上并不能真正工作，因为似乎发生了一种因果悖论（在至少在 Chrome 中）。 :target 更有效，它也适用于轮播，as I've explored here.

【解决方案3】：

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

在功能请求错误中关注：https://github.com/ampproject/amphtml/issues/827

【讨论】：

【解决方案4】：

您可以使用 :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;
}

【讨论】：

现场示例不起作用，当您单击菜单项时，菜单会关闭并且不会转到 url，示例中的代码执行相同的操作。你有没有让这段代码正常工作？

【解决方案5】：

Ivey 已经提到了amp-sidebar，对于大多数网页设计师来说，一切可能都很简单，但值得一提的是，AMP 项目也has a tutorial 提到了实际的“汉堡包”部分。

请注意，它使用的bagua symbol 并非在所有字体中都存在。最好使用图片：

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

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

【讨论】：