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

Question

我正在尝试创建一个AMP HTML网站(请参阅https://www.ampproject.org)但我无法找到您应该如何创建响应式汉堡包菜单？不允许使用Javascript,并且没有可用的AMP组件？

Answer 1

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

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

Answer 3

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

按照功能请求错误进行操作：https://github.com/ampproject/amphtml/issues/827