【CSS动效实战(纯CSS与JS动效)】03 精美手风琴侧边栏完整示例教程 示例1

举报
1_bit 发表于 2022/09/25 01:52:33 2022/09/25
【摘要】 本节示例演示: 一、基本布局 一般来说,侧边栏的位置是在左侧,咱们为了更好的展现侧边栏的效果,并且在本节中不涉及过多的内容,我们只需要直接给一个 div 宽度为 15即可,接着再到这个 div 中编...

本节示例演示:
请添加图片描述

一、基本布局

一般来说,侧边栏的位置是在左侧,咱们为了更好的展现侧边栏的效果,并且在本节中不涉及过多的内容,我们只需要直接给一个 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

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。