翻译:布兰
作者:Adam Argyle
来源:https://web.dev/building-a-sidenav-component/
在这篇文章中,我想和大家分享我是如何为 web 原型化一个 Sidenav 组件的,这个组件是响应式的,有状态的,支持键盘导航,可以使用和不使用 Javascript,并且可以跨浏览器工作。
构建一个响应式导航系统是很困难的。有些用户使用键盘,有些用户使用强大的台式机,还有一些用户使用小型移动设备访问。每个访问者都应该能够打开和关闭菜单。
用了哪些技术
在这次组件探索中,我很高兴地结合了一些关键的网络平台特性:
- 伪类
- CSS Grid
transforms
- 媒体查询和用户偏好 CSS
- 用户增强体验
我的解决方案只有一个侧边栏,只有在“移动”视口为540px 或更小时才能切换。540px 将是我们在移动交互式布局和静态桌面布局之间切换的断点。
伪类
一个 链接将 url 散列设置为
#sidenav-open
,另一个设置为 empty('')
。最后,一个元素具有匹配散列的 id:
<a href="#sidenav-open" id="sidenav-button" title="Open Menu" aria-label="Open Menu">
<a href="#" id="sidenav-close" title="Close Menu" aria-label="Close Menu">a>