响应式开发 纯CSS实现隐藏菜单栏

Posted 2022-04-29 zhougm

首先，需要在页头引入相应的CSS文件

<link media="(min-width: 800px)" rel="stylesheet" href="css/main.css">
<link media="(max-width: 768px)" rel="stylesheet" href="css/mobile.css">

在 main.css中将要隐藏的菜单设置 display: block;

在 mobile.css中将其设置为 display: none;

然后在菜单上面设置一个点击选项，如“菜单”

<label for="toggle-checkbox" id="toggle-label">菜单</label>
<input type="checkbox" id="toggle-checkbox">

在mobile.css中设置：

#toggle-checkbox:checked ~ div
display: block;

#toggle-checkbox display: none;