【CSS动效实战(纯CSS与JS动效)】03 精美手风琴侧边栏完整示例教程 示例1
本节示例演示:
一、基本布局
一般来说,侧边栏的位置是在左侧,咱们为了更好的展现侧边栏的效果,并且在本节中不涉及过多的内容,我们只需要直接给一个 div 宽度为 15即可,接着再到这个 div 中编写对应的侧边栏。
给予一个 nav 样式,设置宽度为 15%,并且给予一些基础样式,使其呈现有一定的对比度:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>accordion nav demo 1_bit CSS 动效课 </title>
<style>
.nav {
width: 20vw;
background-color: white;
mar
gin: 4px;
height: 100vh;
}
body {
margin: 0;
background-color: rgb(223, 224, 225);
}
</style>
</head>
<body>
<div class="nav">
</div>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
此时页面效果如下:
二、 手风琴侧边栏 LOGO 部分编写
有了基本布局后,开始着手编写侧边栏。
从这个侧边栏我们可以明显的知道,侧边栏顶部是 logo 区,或者你放其他的也行,logo 之下就是对应的菜单,那么侧边栏的内容就分为两块,一个上一个下,并且这一上一下的结果所属于一个侧边栏,那么此时肯定需要一个 div 包裹其他两个 div,此时 侧边栏代码编写如下:
<body>
<div class="nav">
<!--手风琴侧边栏-->
<div>
<!--logo-->
<div></div>
<!--菜单-->
<div></div>
</div>
</div>
</body>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
此时我们编写一个类样式,咩咩咩为 accordion:
<style>
.accordion {
width: 100%;
border-right: #424243 solid 2px;
}
</style>
- 1
- 2
- 3
- 4
- 5
- 6
并且包裹手风琴内容的div 要调用这个类样式:
<!--手风琴侧边栏-->
<div class="accordion">
- 1
- 2
在此我们只是给这个手风琴侧边栏定义了一个基础的边框和宽度,接下来创建 logo和 logo 下的 span 样式:
<style>
.logo {
border-bottom: #424243 solid 1px;
display: flex;
justify-content: center;
}
.logo span {
color: white;
padding: 2rem 2rem;
font-size: 2rem;
font-weight: bolder;
}
</style>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
因为要对文字设置一定的大小,对文字使用 span 标签可以很好的进行控制;在 logo 样式中,还设置了当前 div 为 flex 样式,这样就可以很好的控制其中的内容是否居中等操作了,接着我们设置了 logo 的 span 样式,文本为白色,设置了padding 这样使其大小可以撑大,这样就不用设置该文本对于边缘的空隙了,接着设置了字体大小和加粗。此时的html 代码如下:
<body>
<div class="nav">
<!--手风琴侧边栏-->
<div class="accordion">
<!--logo-->
<div class="logo">
<span>ePageTool</span>
</div>
<!--菜单-->
<div></div>
</div>
</div>
</body>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
此时页面效果如下:
三、 菜单部分内容编写
接着完成了 logo 后开始编写下面的菜单内容,我们可以从之前的演示图看到,我们点击对应的菜单栏可以对其进行选中并且展开其内部的选项,那么这个功能需要一个 html 元素实现,那就是 radio ;在其选中一个类型内容后,将会展开对应的内部选项,这些选项需要一个 div 统一对其进行管理,那么在选项的 div 之下应该还需要创建一个 div,并且 div 中需要有选项内容:
<!--菜单-->
<div>
<div>
<ul>
<li><a href="#">使用</a></li>
<li><a href="#">自定义</a></li>
</ul>
</div>
</div>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
在此使用了 ul 表示对应的选项内容,那么外部还需要显示该菜单的文本直接使用一个 label 表现即可:
<!--菜单-->
<div>
<label> 开始</label>
<div>
<ul>
<li><a href="#">使用</a></li>
<li><a href="#">自定义</a></li>
</ul>
</div>
</div>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
之前说需要使用 radio 表示选中,那么此时在外部再加一个 input type 为 radio:
<!--菜单-->
<div>
<input type="radio">
<label> 开始</label>
<div>
<ul>
<li><a href="#">使用</a></li>
<li><a href="#">自定义</a></li>
</ul>
</div>
</div>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
此时页面显示如下:
这明显就不是我们想要的样子,那么此时第一步,我们先把 radio 的选中圈圈取消,这个时候直接写 accordion 下的 input 直接为 none,这样就可以统一去掉所有 radio 的圈圈了:
<style>
.accordion input[type='radio'] {
display: none;
}
</style>
- 1
- 2
- 3
- 4
- 5
以上样式表示 accordion 类下的 input 标签属性 type 值为 radio 的统一设置属性 display: none;
,那么此时页面如下:
由于 radio 是单选项,我们需要对其设置一个单选项组,直接使用 name 表示即可,多个不同的 radio 使用同一个 name 就表示同一个组的 radio:
<input name="menu" type="radio" >
- 1
此时我们还需要做一件事,因为我们的 radio 的 display 已经是 none 了, 那么我们需要有一个东西代替这个恶radio,此时我们直接给予 label 一个 for:
<label for="start"> 开始</label>
- 1
这个 for 可以对应所关联的 radio,那么 radio 此时需要一个 id 对应这个 label 元素,我们只需要给予这个 radio 的 id 为 start 即可:
<input name="menu" type="radio" id="start" >
- 1
此时 body 代码如下:
<body>
<div class="nav">
<!--手风琴侧边栏-->
<div class="accordion">
<!--logo-->
<div class="logo">
<span>ePageTool</span>
</div>
<!--菜单-->
<div>
<input name="menu" type="radio" id="start">
<label for="start"> 开始</label>
<div>
<ul>
<li><a href="#">使用</a></li>
<li><a href="#">自定义</a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
接着我们直接给予这个菜单一个 item 样式:
<!--菜单-->
<div class="item">
- 1
- 2
接着直接写两个 样式,item 样式不写都可以:
<style>
.accordion>.item label {
color: white;
background-color: #ff6f61;
display: block;
padding: 1rem 2rem;
border-bottom: #931313 solid 1px;
transition: color 0.3s, background-color 0.3s;
}
.accordion>.item label:hover {
background-color: #c30d0ddb;
color: white;
}
</style>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
首先 .accordion>.item label
表示 accordion 样式下的 item 样式下的 label 标签样式,颜色为白,给予背景色,设置 display 为 block,并且给予对应的 padding,以及下边框(这样每个 item 之间有间隔看得清楚)颜色,还定义了一个 transition 动画,主要是颜色动画和背景色动画,随后给予了一个同样 label 的 hover 样式,设置背景色会有一定的变化,并且设置了 color 字体颜色为白色,这样整个 label 就会有颜色的改变,此时页面效果如下:
接着我们需要对这个菜单下的展开选项设置样式:
我们给予这个展开项的div 一个样式 content:
<div class="content">
<ul>
<li><a href="#">使用</a></li>
<li><a href="#">自定义</a></li>
</ul>
</div>
- 1
- 2
- 3
- 4
- 5
- 6
此时我们发现这个 ul 列有一定的距离:
这是因为这时ul 自带了padding 和 margin,我们需要消除,那么在 content 样式中,我们就需要给予 padding 、margin 为 0:
<style>
.content ul {
margin: 0;
padding: 0;
}
</style>
- 1
- 2
- 3
- 4
- 5
- 6
此时页面如下:
接着给a标签对应的样式:
<style>
.content ul a {
width: 100%;
display: inline-block;
color: white;
font-size: 1rem;
text-decoration: none;
padding: 1rem 3rem;
border-bottom: 1px solid #394c7f;
}
</style>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
设置标签 a 宽度为 100%,并且转换元素类型,给予字体 size、去掉下划线,给予 padding随后得到的效果如下:
我们此时发现下划线超格了,那么需要设置 overflow,直接在content 上设置overflow即可:
<style>
.content ul {
overflow: hidden;
margin: 0;
padding: 0;
}
</style>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
此时页面将不会超格;接下来设置对应 a 标签的 hover 标签,这个标签我们需要有一定的动画效果,那么在 a 标签的样式中添加过渡动画,并且添加 position: relative,因为接下来添加的效果需要脱离文档流制作:
<style>
.content ul a {
width: 100%;
display: inline-block;
color: white;
font-size: 1rem;
text-decoration: none;
padding: 1rem 3rem;
border-bottom: 1px solid #394c7f;
position: relative;
transition: all 0.5s;
}
</style>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
接着添加 hover 效果,这个效果只是其一,接下来还有其他效果:
<style>
.content a:hover {
display: block;
background-color: #1e2546;
}
</style>
- 1
- 2
- 3
- 4
- 5
- 6
接下来给 a 标签添加 before,在 before 上制作对应的动画效果,当然,这里添加的是默认情况。当然是无效果状态,在这里只是默认的把 before 的透明度 opacity 调为 0 ,内容是空白,添加了一个过渡动画对其进行响应:
<style>
.content a:before {
content: '';
opacity: 0;
transition: all 0.3s;
}
</style>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
接着增加 before 的对应效果:
<style>
.content a:hover:before {
position: absolute;
left: 0;
top: 0;
opacity: 1;
border-top: 24px solid transparent;
border-left: 11px solid #ff6f61;
border-bottom: 24px solid transparent;
}
</style>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
在以上效果中,增加 before 为 position: absolute;
开始为期编写对应的样式,这个样式距离左边 0 个单位,距离顶部 0 个单位,透明度 opacity 为 1 表示课件,最关键的是以下样式:
<style>
border-top: 24px solid transparent;
border-left: 11px solid #ff6f61;
border-bottom: 24px solid transparent;
</style>
- 1
- 2
- 3
- 4
- 5
我们之间设置显示的效果给大家看,该代码改成:
<style>
border-top: 24px solid #ff6161;
border-left: 24px solid #ffdf61;
border-right: 24px solid #616eff;
border-bottom: 24px solid #71ff61;
</style>
- 1
- 2
- 3
- 4
- 5
- 6
这 4 个代码分别表示 border-top 为红、橙、蓝、绿:
接着显示时如下效果:
这个时候若我们只想要左侧大小变小,例如 11:
<style>
border-top: 24px solid #ff6161;
border-left: 11px solid #ffdf61;
border-right: 24px solid #616eff;
border-bottom: 24px solid #71ff61;
</style>
- 1
- 2
- 3
- 4
- 5
- 6
效果如下:
那么此时 其它 颜色为 transparent 为透明。那么代码如下:
<style>
border-top: 24px solid transparent;
border-left: 11px solid #ffdf61;
border-right: 24px solid transparent;
border-bottom: 24px solid transparent;
</style>
- 1
- 2
- 3
- 4
- 5
- 6
效果如下:
很明显我们的右侧代码没有存在必要,那么直接不写就可以了,也就是删掉这一条:border-right: 24px solid transparent;
,并且其它 border 不同大小可以影响其结果,大家自行实验即可,接下来我们添加第二个 item:
<div class="item">
<input name="menu" type="radio" id="gradient">
<label for="gradient"> 渐变</label>
<div class="content">
<ul>
<li><a href="#">线性渐变</a></li>
<li><a href="#">径向渐变</a></li>
</ul>
</div>
</div>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
并且在 content ul 样式中为其设置高度为 0,这样内容就不会全部展开了:
<style>
.content ul {
max-height: 0;
overflow: hidden;
margin: 0;
padding: 0;
}
</style>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
此时效果如下,点击后展开不了内容:
那此时如何点击后展开内容呢?
我们只需要对 input 的效果监听是否 checked 即可:
<style>
.accordion input:checked~.content ul {
max-height: auto;
transition: all 0.2s;
background-color: #273057;
}
</style>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
此时 .accordion input:checked~.content ul
的意思是为所有相同父元素中位于.accordion input:checked 之后的所有 content 下的 ul 元素设置CSS,其中 波浪线 之前表示 什么什么之后,content ul 表示设置结果对象,作用范围是当前响应对象的所有相同父元素的对象。那么此时直接设置了 ul 的高度为 auto,那么就可以展开了。
若自己试验后可以看到此时感觉响应效果不好,没有添加动画,那么此时只需要在 content ul 中设置动画即可:
<style>
.content ul {
max-height: 0;
overflow: hidden;
margin: 0;
padding: 0;
transition: all 0.4s;
}
</style>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
效果如下:
此时完整代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>accordion nav demo 1_bit CSS 动效课 </title>
<style>
.nav {
width: 20vw;
background-color: white;
margin: 4px;
height: 100vh;
}
body {
margin: 0;
background-color: rgb(223, 224, 225);
}
.accordion {
width: 100%;
border-right: #424243 solid 2px;
background-color: #ff6f61;
}
.logo {
border-bottom: #424243 solid 1px;
display: flex;
justify-content: center;
}
.logo span {
color: white;
padding: 2rem 2rem;
font-size: 2rem;
font-weight: bolder;
}
.accordion input[type='radio'] {
display: none;
}
.accordion>.item label {
color: white;
background-color: #ff6f61;
display: block;
padding: 1rem 2rem;
border-bottom: #931313 solid 1px;
transition: color 0.3s, background-color 0.3s;
}
.accordion>.item label:hover {
background-color: #c30d0ddb;
color: white;
}
.content ul {
max-height: 0;
overflow: hidden;
margin: 0;
padding: 0;
transition: all 0.4s;
}
.content ul a {
width: 100%;
display: inline-block;
color: white;
font-size: 1rem;
text-decoration: none;
padding: 1rem 3rem;
border-bottom: 1px solid #394c7f;
position: relative;
transition: all 0.5s;
}
.content a:hover {
background-color: #1e2546;
}
.content a:before {
content: '';
opacity: 0;
transition: all 0.3s;
}
.content a:hover:before {
position: absolute;
left: 0;
top: 0;
opacity: 1;
border-top: 1.5rem solid transparent;
border-left: 11px solid #ffdf61;
border-bottom: 1.5rem solid transparent;
}
.accordion input:checked~.content ul {
max-height: 20rem;
transition: all 0.2s;
background-color: #273057;
}
</style>
</head>
<body>
<div class="nav">
<!--手风琴侧边栏-->
<div class="accordion">
<!--logo-->
<div class="logo">
<span>ePageTool</span>
</div>
<!--菜单-->
<div class="item">
<input name="menu" type="radio" id="start">
<label for="start"> 开始</label>
<div class="content">
<ul>
<li><a href="#">使用</a></li>
<li><a href="#">自定义</a></li>
</ul>
</div>
</div>
<div class="item">
<input name="menu" type="radio" id="gradient">
<label for="gradient"> 渐变</label>
<div class="content">
<ul>
<li><a href="#">线性渐变</a></li>
<li><a href="#">径向渐变</a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
文章来源: i1bit.blog.csdn.net,作者:1_bit,版权归原作者所有,如需转载,请联系作者。
原文链接:i1bit.blog.csdn.net/article/details/124770492
- 点赞
- 收藏
- 关注作者
评论(0)