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

时间:2015-12-07 14:59:29

标签: amp-html

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

5 个答案:

答案 0 :(得分:11)

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

答案 1 :(得分:6)

我使用: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);
}

答案 2 :(得分:1)

如果没有重大攻击,目前无法实现这一目标。

请参阅功能请求错误:https://github.com/ampproject/amphtml/issues/827

答案 3 :(得分: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;
}

答案 4 :(得分:0)

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>

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