【如何只使用CSS来写一个侧边导航栏 _侧边栏】

如何只使用CSS来写一个侧边导航栏

我也踩过这个坑( 1 )

已统计您的踩坑,无需重复点击

回答(1)

侧边栏

详细描述

截图

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=no" />
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="task7-2.css">
</head>
<body>
<header>
    
</header>
</body>
</html>

编辑于2024-11-24

时间排序

热门排序

[北京|结业弟子]JS-张新

aside{
  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

去第页