css收缩菜单 |css 使用其他字体

/*收缩菜单css样式*/
.menu{
display: none; /*将菜单隐藏*/
}
.toggle:checked ~ .menu{
display: block; /*当勾选状态时，显示菜单*/
}

以上是简单的CSS样式代码，下面解释一下具体实现方法。首先，在HTML中创建一个切换按钮和一个菜单容器，代码如下：

<input type="checkbox" id="toggle"/><label for="toggle">菜单</label><ul class="menu"><li><a href="#">菜单项1</a></li>
<li><a href="#">菜单项2</a></li>
<li><a href="#">菜单项3</a></li>
</ul>

切换按钮和菜单都需要使用label标签和input标签结合，将两者绑定在一起。首先将菜单容器的display属性设置为none，即默认情况下菜单是隐藏的。

.menu{
display: none;
}

接着，添加一个切换按钮和一个菜单容器的:checked伪类选择器。当切换按钮被勾选时（即:checked状态），菜单容器的display属性变为block，即展开菜单，代码如下：

.toggle:checked ~ .menu{
display: block;
}

最后，在label标签中添加“菜单”文字即可。当用户点击这段文字时，就会勾选切换按钮，展开菜单。

以上就是CSS收缩菜单的实现方法，使用简单的CSS代码即可将菜单隐蔽，达到更美观、易用的效果。