给我一个侧边栏代码可隐藏默认不隐藏加css
时间: 2024-01-22 16:02:07 浏览: 33
以下是一个默认不隐藏但可隐藏的侧边栏代码和 CSS 样式:
HTML 代码:
```
<div class="sidebar">
<a href="#" class="toggle-btn">☰</a>
<ul>
<li><a href="#">链接1</a></li>
<li><a href="#">链接2</a></li>
<li><a href="#">链接3</a></li>
<li><a href="#">链接4</a></li>
</ul>
</div>
```
CSS 样式:
```
.sidebar {
position: fixed;
top: 0;
left: 0;
width: 200px;
height: 100%;
background: #f2f2f2;
padding: 20px;
box-sizing: border-box;
transition: all 0.3s ease-in-out;
}
.sidebar .toggle-btn {
display: block;
font-size: 24px;
text-decoration: none;
color: #333;
margin-bottom: 10px;
}
.sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
.sidebar li {
margin-bottom: 10px;
}
.sidebar a {
display: block;
padding: 10px;
background: #fff;
color: #333;
text-decoration: none;
border-radius: 5px;
}
@media (max-width: 768px) {
.sidebar {
transform: translateX(-200px);
}
.sidebar.open {
transform: translateX(0);
}
}
```
CSS 样式中,我们使用了 `@media` 查询来针对不同的屏幕尺寸设置侧边栏的样式。当屏幕宽度小于等于 768px 时,侧边栏会默认隐藏,否则会显示出来。
`.sidebar` 的默认样式中去掉了 `transform` 属性,因为我们默认不需要隐藏侧边栏。在 `@media` 查询中,我们添加了 `transform` 属性来实现侧边栏的隐藏和显示效果,同时使用了 `transition` 属性来添加动画效果。`.sidebar.open` 是用来控制侧边栏开关状态的 CSS 类,当侧边栏被打开时添加该类即可。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://img-home.csdnimg.cn/images/20210720083646.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)