网站建设中添加图片链接,麻烦各位童鞋,大企业网站建设公司排名,网站做关键词本节示例演示#xff1a;
一、基本布局
一般来说#xff0c;侧边栏的位置是在左侧#xff0c;咱们为了更好的展现侧边栏的效果#xff0c;并且在本节中不涉及过多的内容#xff0c;我们只需要直接给一个 div 宽度为 15即可#xff0c;接着再到这个 div 中编写对应的侧…本节示例演示
一、基本布局
一般来说侧边栏的位置是在左侧咱们为了更好的展现侧边栏的效果并且在本节中不涉及过多的内容我们只需要直接给一个 div 宽度为 15即可接着再到这个 div 中编写对应的侧边栏。
给予一个 nav 样式设置宽度为 15%并且给予一些基础样式使其呈现有一定的对比度
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleaccordion nav demo 1_bit CSS 动效课 /titlestyle.nav {width: 20vw;background-color: white;margin: 4px;height: 100vh;}body {margin: 0;background-color: rgb(223, 224, 225);}/style
/headbodydiv classnav/div
/body/html
此时页面效果如下
二、 手风琴侧边栏 LOGO 部分编写
有了基本布局后开始着手编写侧边栏。
从这个侧边栏我们可以明显的知道侧边栏顶部是 logo 区或者你放其他的也行logo 之下就是对应的菜单那么侧边栏的内容就分为两块一个上一个下并且这一上一下的结果所属于一个侧边栏那么此时肯定需要一个 div 包裹其他两个 div此时 侧边栏代码编写如下
bodydiv classnav!--手风琴侧边栏--div!--logo--div/div!--菜单--div/div/div/div
/body此时我们编写一个类样式咩咩咩为 accordion
style
.accordion {width: 100%;border-right: #424243 solid 2px;
}
/style并且包裹手风琴内容的div 要调用这个类样式
!--手风琴侧边栏--
div classaccordion在此我们只是给这个手风琴侧边栏定义了一个基础的边框和宽度接下来创建 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因为要对文字设置一定的大小对文字使用 span 标签可以很好的进行控制在 logo 样式中还设置了当前 div 为 flex 样式这样就可以很好的控制其中的内容是否居中等操作了接着我们设置了 logo 的 span 样式文本为白色设置了padding 这样使其大小可以撑大这样就不用设置该文本对于边缘的空隙了接着设置了字体大小和加粗。此时的html 代码如下
bodydiv classnav!--手风琴侧边栏--div classaccordion!--logo--div classlogospanePageTool/span/div!--菜单--div/div/div/div
/body此时页面效果如下
三、 菜单部分内容编写
接着完成了 logo 后开始编写下面的菜单内容我们可以从之前的演示图看到我们点击对应的菜单栏可以对其进行选中并且展开其内部的选项那么这个功能需要一个 html 元素实现那就是 radio 在其选中一个类型内容后将会展开对应的内部选项这些选项需要一个 div 统一对其进行管理那么在选项的 div 之下应该还需要创建一个 div并且 div 中需要有选项内容
!--菜单--
divdivullia href#使用/a/lilia href#自定义/a/li/ul/div
/div在此使用了 ul 表示对应的选项内容那么外部还需要显示该菜单的文本直接使用一个 label 表现即可
!--菜单--
divlabel 开始/labeldivullia href#使用/a/lilia href#自定义/a/li/ul/div
/div之前说需要使用 radio 表示选中那么此时在外部再加一个 input type 为 radio
!--菜单--
divinput typeradiolabel 开始/labeldivullia href#使用/a/lilia href#自定义/a/li/ul/div
/div此时页面显示如下 这明显就不是我们想要的样子那么此时第一步我们先把 radio 的选中圈圈取消这个时候直接写 accordion 下的 input 直接为 none这样就可以统一去掉所有 radio 的圈圈了
style
.accordion input[typeradio] {display: none;
}
/style以上样式表示 accordion 类下的 input 标签属性 type 值为 radio 的统一设置属性 display: none;那么此时页面如下 由于 radio 是单选项我们需要对其设置一个单选项组直接使用 name 表示即可多个不同的 radio 使用同一个 name 就表示同一个组的 radio
input namemenu typeradio 此时我们还需要做一件事因为我们的 radio 的 display 已经是 none 了 那么我们需要有一个东西代替这个恶radio此时我们直接给予 label 一个 for
label forstart 开始/label这个 for 可以对应所关联的 radio那么 radio 此时需要一个 id 对应这个 label 元素我们只需要给予这个 radio 的 id 为 start 即可
input namemenu typeradio idstart 此时 body 代码如下
bodydiv classnav!--手风琴侧边栏--div classaccordion!--logo--div classlogospanePageTool/span/div!--菜单--divinput namemenu typeradio idstartlabel forstart 开始/labeldivullia href#使用/a/lilia href#自定义/a/li/ul/div/div/div/div
/body接着我们直接给予这个菜单一个 item 样式
!--菜单--
div classitem接着直接写两个 样式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首先 .accordion.item label 表示 accordion 样式下的 item 样式下的 label 标签样式颜色为白给予背景色设置 display 为 block并且给予对应的 padding以及下边框这样每个 item 之间有间隔看得清楚颜色还定义了一个 transition 动画主要是颜色动画和背景色动画随后给予了一个同样 label 的 hover 样式设置背景色会有一定的变化并且设置了 color 字体颜色为白色这样整个 label 就会有颜色的改变此时页面效果如下 接着我们需要对这个菜单下的展开选项设置样式 我们给予这个展开项的div 一个样式 content
div classcontentullia href#使用/a/lilia href#自定义/a/li/ul
/div此时我们发现这个 ul 列有一定的距离 这是因为这时ul 自带了padding 和 margin我们需要消除那么在 content 样式中我们就需要给予 padding 、margin 为 0
style
.content ul {margin: 0;padding: 0;
}
/style此时页面如下 接着给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设置标签 a 宽度为 100%并且转换元素类型给予字体 size、去掉下划线给予 padding随后得到的效果如下
我们此时发现下划线超格了那么需要设置 overflow直接在content 上设置overflow即可
style
.content ul {overflow: hidden;margin: 0;padding: 0;}
/style此时页面将不会超格接下来设置对应 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接着添加 hover 效果这个效果只是其一接下来还有其他效果
style
.content a:hover {display: block;background-color: #1e2546;}/style接下来给 a 标签添加 before在 before 上制作对应的动画效果当然这里添加的是默认情况。当然是无效果状态在这里只是默认的把 before 的透明度 opacity 调为 0 内容是空白添加了一个过渡动画对其进行响应
style
.content a:before {content: ;opacity: 0;transition: all 0.3s;
}
/style接着增加 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在以上效果中增加 before 为 position: absolute; 开始为期编写对应的样式这个样式距离左边 0 个单位距离顶部 0 个单位透明度 opacity 为 1 表示课件最关键的是以下样式
style
border-top: 24px solid transparent;
border-left: 11px solid #ff6f61;
border-bottom: 24px solid transparent;
/style我们之间设置显示的效果给大家看该代码改成
style
border-top: 24px solid #ff6161;
border-left: 24px solid #ffdf61;
border-right: 24px solid #616eff;
border-bottom: 24px solid #71ff61;
/style这 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效果如下 那么此时 其它 颜色为 transparent 为透明。那么代码如下
style
border-top: 24px solid transparent;
border-left: 11px solid #ffdf61;
border-right: 24px solid transparent;
border-bottom: 24px solid transparent;
/style效果如下 很明显我们的右侧代码没有存在必要那么直接不写就可以了也就是删掉这一条border-right: 24px solid transparent;并且其它 border 不同大小可以影响其结果大家自行实验即可接下来我们添加第二个 item
div classiteminput namemenu typeradio idgradientlabel forgradient 渐变/labeldiv classcontentullia href#线性渐变/a/lilia href#径向渐变/a/li/ul/div
/div并且在 content ul 样式中为其设置高度为 0这样内容就不会全部展开了
style
.content ul {max-height: 0;overflow: hidden;margin: 0;padding: 0;
}
/style此时效果如下点击后展开不了内容
那此时如何点击后展开内容呢
我们只需要对 input 的效果监听是否 checked 即可
style
.accordion input:checked~.content ul {max-height: auto;transition: all 0.2s;background-color: #273057;
}
/style此时 .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效果如下
此时完整代码如下
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleaccordion nav demo 1_bit CSS 动效课 /titlestyle.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[typeradio] {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
/headbodydiv classnav!--手风琴侧边栏--div classaccordion!--logo--div classlogospanePageTool/span/div!--菜单--div classiteminput namemenu typeradio idstartlabel forstart 开始/labeldiv classcontentullia href#使用/a/lilia href#自定义/a/li/ul/div/divdiv classiteminput namemenu typeradio idgradientlabel forgradient 渐变/labeldiv classcontentullia href#线性渐变/a/lilia href#径向渐变/a/li/ul/div/div/div/div
/body/html
