我正在尝试创建一个AMP HTML网站(请参阅https://www.ampproject.org)但我无法找到您应该如何创建响应式汉堡包菜单?不允许使用Javascript,并且没有可用的AMP组件?
AMP现在支持使用amp-sidebar组件的菜单。
我通过使用qazxsw poi伪类完成了这个。
HTML
:target
CSS
<nav id="slide-in-menu">
...nav menu content...
</nav>
<section class="content-section">
<a href="#slide-in-menu">Hamburger Icon</a>
</section>
如果没有重大黑客攻击,目前这是不可能的。
跟随功能请求错误:#slide-in-menu {
transform: translateX(-100%);
transition: transform .2s ease-in-out;
... additional required styles ...
}
#slide-in-menu:target {
transform: translateX(0);
}
您可以使用:focus伪类来完成此操作。看看https://github.com/ampproject/amphtml/issues/827的实例(www.washingtonpost.com也是这样做的)。或者您可以等待https://fresnobee.relaymedia.com/amp/news/local/education/article61889207.html标签上线。
代码看起来像
<amp-sidebar>
和css
<a id="burger" tabindex="0">☰</a>
<div id="burgerCancel" tabindex="0">☰</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>
Ivey已经提到过#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;
}
,对于大多数网页设计师而言,一切都可能是直截了当的,但值得一提的是AMP项目也是amp-sidebar
关于实际的“汉堡包”部分。
请注意它使用的是每种字体都不存在的has a tutorial。更好地使用图片:
bagua symbol
此外,在实施之前,可能需要检查汉堡包菜单是否适合每种特定情况,因为它有一些缺点。网上有很多文章关于它的优缺点以及何时避免它。