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

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

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

1 2	<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;}