html侧边栏如何shubie,div+css侧边栏怎么写

div+css侧边栏怎么写

网页中侧边栏是很常用的功能，尤其是移动端的使用，更是很频繁，今天就来介绍一下如何使用纯div+css实现侧边栏效果。

实现思路如下：

1、使用input和label标签，将input隐藏，用css美化label标签实现打开关闭侧边栏按钮。

2、当input选中时使用伪类选择器:checked选择它的兄弟元素aside将它显示出来即可。

(相关课程推荐：css视频教程)

/*隐藏checked复选框*/

#sidemenu{

display: none;

}

#sidemenu:checked + aside {

/*为被选中的sidemenu后的aside设置属性(紧邻)*/

left: 0;

/*点击按钮即选中checked后,侧边栏位置变为贴着左边,

配合ease-out使用,有渐变滑出的效果*/

}

#sidemenu:checked ~ #wrap {

/*为被选中的sidemenu后的wrap设置属性(非紧邻)*/

padding-left: 220px;

}

aside {

/*侧边栏,初始位置为-200px，即隐藏效果*/

position: absolute;

top: 0;

bottom: 0;

left: -200px;

width: 200px;

background: black;

transition: 0.2s ease-out;

/*动画效果的执行方式是ease-out，即侧边栏滑动效果为渐变式，

而不是生硬的突然变化*/

}

h2 {

color: white;

text-align: center;

font-size: 2em;

}

/*控制侧边栏进出的按钮(外部包裹)*/

#wrap {

margin-left: 20px;

padding: 10px;

transition: 0.2s ease-out;

}

/*控制侧边栏进出的按钮(内部文字样式)*/

label {

/*控制侧边栏进出的按钮*/

background: white;

border-radius: 70px;

color: orange;

cursor: pointer;

display: block;

font-family: Courier New;

font-size: 2em;

width: 1.5em;

height: 1.5em;

line-height: 1.5em;

text-align: center;

display: inline-block;

}

label:hover {

background: #000;

}

#sideul li {

list-style: none;

color: white;

width: 100%;

height: 1.8em;

font-size: 1.5em;

text-align: center;

}

a {

text-decoration: none;

}

#sideul li:hover {

color: orange;

}

主菜单

首页

导航1

导航2

导航3

导航4

导航5

导航6ʳ

≡

效果：

本文来自css答疑栏目，欢迎学习！