在本文中，我想与您分享我是如何为web制作Sidenav组件原型的。该组件是响应式的、有状态的并且支持键盘导航。使用和不使用Javascript，并跨浏览器工作。构建响应式导航系统很困难。一些用户使用键盘，另一些用户使用功能强大的台式电脑，还有一些用户使用小型移动设备访问。每个访问者都应该能够打开和关闭菜单。桌面到移动响应式布局演示使用了哪些技术在此组件探索中，我很高兴地结合了一些关键的Web平台功能：伪类CSS网格转换媒体查询和用户偏好CSS用户增强体验我的解决方案只有一个侧边栏，只有当“移动”视口为540像素或更小时才能切换。540px将是我们在移动交互布局和静态桌面布局之间切换的断点。伪类一个链接，其中url哈希设置为#sidenav-open，另一个为空（''）。最后，一个id与散列匹配的元素：点击这些链接会改变我们网页URL的哈希状态，然后使用伪类来显示和隐藏Sidenav：@media(max-width:540px){#sidenav-open{visibility:hidden;}#sidenav-open:target{visibility:visible;}}CSSGrid过去，我仅使用绝对或固定位置Sidenav布局和组件。但是，使用网格区域语法，可以将多个元素分配给同一行或列。Stacks主要布局元素#sidenav-container是一个网格，它创建1行和2列，其中1列名为stack。当空间受限时，CSS会将元素的所有子元素分配给相同的网格名称，将所有元素放在同一空间中，创建一个堆栈。#sidenav-container{display:grid;grid:[stack]1fr/min-content[stack]1fr;min-height:100vh;}@media(max-width:540px){#sidenav-container>*{grid-area:stack;}}菜单背景
