![问题已收录](/r/img/web-kenghu/adopt.png)
![分享问题](/r/img/web-kenghu/share.png)
我也踩过这个坑( 1 )
侧边栏
详细描述
截图
![](http://jns.img.bucket.ks3-cn-beijing.ksyun.com/skill/3/c03aea8f-335b-4a6a-ae2e-510f3dd519c1.png)
代码
编辑于2024-07-26
-
[北京|结业弟子]JS-张新
0aside{
position: absolute;
top: 0;
bottom: 0;
left: -200px;
width: 200px;
height: 100%;
background: #fff;
transition: 0.2s ease-out;
z-index: 100;
}
#sidemenu{
display:none;
}
#sidemenu:checked+aside{
left:0;
}
#sidemenu:checked~main{
margin-right:-200px;
padding-left:200px;
}<input type="checkbox" id="sidemenu">
<aside>
<ul>
<a href="#">首页</a>
<a href="#">首页</a>
<a href="#">首页</a>
<a href="#">首页</a>
</ul>
</aside>
<main>
<header>
<label for="sidemenu">
<img class="three" src="three.png" alt="">
</label>
</header>编辑于2018-10-06
- 去第 页