模拟elment响应式菜单交互

先看结果

开始模拟导航栏菜单

代码如下

<span>
  菜单
</span>

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>  

ul{
  display:block;
}

@media (max-width: 800px) { 
  ul{
    display:none;
  }
}

使用span模拟导航栏菜单按钮，使用ul来模拟菜单列表

css使用媒体查询来实现动画交互，默认显示，窗口小于800px时消失

接着下一个功能：

点击交互菜单，先使用chckbox来模拟菜单

代码：

input:checked+ul{
	display:block
}

使用兄弟选择器将ul关联起来，再使用伪类来实现交互。

这时候觉得input很丑，应该使用文字或者图标来替代。

这时候用到label来交互了

mdn上的描述

你可以点击关联的标签来聚焦或者激活这个输入元素，就像直接点击输入元素一样

for即和 <label> 元素在同一文档中的 可关联标签的元素 的 id。

最后将checkbox隐藏起来

这里面有个小坑，不能用label包裹input

最终效果

参考

mdn 媒体查询

mdn label