今天学习做一个简单的前端demo滑动手风琴，效果如下，在鼠标移入的时候图标变大且背景颜色改变，右侧出现介绍的文字，同时做出响应式的页面
手风琴.png
手风琴hover.png
首先是HTML部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<link href="https://cdn.bootcdn.net/ajax/libs/genericons/3.1/genericons.css" rel="stylesheet">
</head>
<body>
<div class="container">
<header>
<h1>HTML+CSS:滑动手风琴</h1>
</header>
<ul class="contentall">
<!-- 设置一个无序列表包含六个li标签存放六个板块 -->
<!-- 第一个板块开始 -->
<li class="menu">
<div class="social youtube">
<a href="">youtube</a>
<!-- 设置超链接后续插入图片可点入转跳 -->
</div>
<div class="content">
<h1>YouTuBe</h1>
<p>hello,i want to recommend this application to you.hello,i want to recommend this application to you.</p>
</div>
<!-- 设置一个盒子存放标题和内容 -->
</li>
<!-- 第二个板块开始 -->
<li class="menu">
<div class="social Twitter">
<a href="">twitter</a>
</div>
<div class="content">
<h1>Twitter</h1>
<p>hello,i want to recommend this application to you.</p>
</div>
</li>
<!-- 第三个板块开始 -->
<li class="menu">
<div class="social FaceBook">
<a href="">facebook</a>
</div>
<div class="content">
<h1>Facebook</h1>
<p>hello,i want to recommend this application to you.</p>
</div>
</li>
<!-- 第四个板块开始 -->
<li class="menu">
<div class="social LinKedin">
<a href="">linkedin</a>
</div>
<div class="content">
<h1>Linkedin</h1>
<p>hello,i want to recommend this application to you.</p>
</div>
</li>
<!-- 第五个板块开始 -->
<li class="menu">
<div class="social Instagram">
<a href="">Instagram</a>
</div>
<div class="content">
<h1>Instagram</h1>
<p>hello,i want to recommend this application to you.</p>
</div>
</li>
<!-- 第六个板块开始 -->
<li class="menu">
<div class="social github">
<a href="">github</a>
</div>
<div class="content">
<h1>Github</h1>
<p>hello,i want to recommend this application to you.</p>
</div>
</li>
</ul>
</div>
</body>
</html>
图标可以在iconfont官网下载使用，也可以在BootCDN上搜索genericons 用link链接引入直接使用。
<link href="https://cdn.bootcdn.net/ajax/libs/genericons/3.1/genericons.css" rel="stylesheet">
下面是 CSS部分
首先先reset网页基本样式，设置容器大小背景颜色字体，再设置标题样式
*{
margin: 0;
padding: 0;
border: 0;
}
body{
background-color: #222;
font-family: Arial, Helvetica, sans-serif;
}
.container{
width: 90%;
margin: 50px auto;
/*水平居中*/
}
header h1{
color: white;
margin-bottom: 10px;
text-align: center;
}
下面设置列表的CSS样式
.contentall{
background-color: #333;
width: 100%;
height: 200px;
min-width: 800px;
font-size: 0;/*先设置字体隐藏后续显示*/
overflow: hidden;/*隐藏超出部分，不出现滚轮*/
display: block;/*属性为块元素独占一行*/
list-style: none;
}
.menu{
background-color: #444;
border-right: #333 1px solid;
overflow: hidden;/*隐藏超出部分，不出现滚轮*/
width: 80px;
height: 200px;
display: inline-block;/*属性为行内块元素，可以在同一行排列*/
position: relative;
margin: 0;
transition: all 0.5s ease-in-out 0.1s;/*设置过渡属性，使下面的伪类变换更加流畅顺滑*/
}
设置li的hover属性，使宽度增加，内容区域显示。即鼠标移入时右侧伸长显示内容区域
.menu:hover{
width: 450px;
}
下面设置内容区域的样式
.menu .content{
background-color: #FFFFFF;
width: 360px;
height: 200px;
margin-left: 80px;/*改变左外边距使内容区域和图片区域位置更换*/
position: relative;
padding: 50px 0 0 15px;
}
.menu .content h1{
font-size: 2.5rem;/*设置字体大小使字体显示*/
margin-bottom: 10px;
}
.menu .content p{
font-size: 0.85rem;
line-height: 1.4rem;
padding-right: 30px;
}
要达到图片区域鼠标移入切换的效果，需要在a标签前后增加::before和::after伪类
.social a::before,.social a::after{
width: 80px;
height: 200px;
position: absolute;
text-indent: 0;
padding-top: 90px;
padding-left: 25px;
display: block;
font: normal 30px Genericons;
color: #fff;
transition: all 0.4s ease-in-out 0.1s;
/*添加过渡属性使鼠标移入时变化流畅顺滑，达到手风琴的效果*/
}
.social a::after{
font-size: 48px;/*设置移入后显示的图标变大*/
padding-left: 20px;
padding-top: 80px;
margin-left: 85px;/*鼠标未移入时该部分隐藏*/
下面引入genericons图标，设置::after内容颜色不单一（\f213为特定图标的unicode编码，可去官网查看）
.youtube a::before,.youtube a::after{
content:"\f213";
}
.youtube a::after{
background-color: #f00;
}
.FaceBook a::before,.FaceBook a::after{
content:"\f204";
}
.FaceBook a::after{
background-color: #3b5998;
}
.Instagram a::before,.Instagram a::after{
content:"\f215";
}
.Instagram a::after{
background-color: #6dc993;
}
.LinKedin a::before,.LinKedin a::after{
content:"\f208";
}
.LinKedin a::after{
background-color: #00a9cd;
}
.Twitter a::before,.Twitter a::after{
content:"\f202";
}
.Twitter a::after{
background-color: #6dc5dd;
}
.github a::before,.github a::after{
content:"\f200";
}
.github a::after{
background-color: #6e5494;
}
最后设置hover伪类，鼠标移入时原先before板块向左隐藏，after板块向左移动出现，实现手风琴效果，且通过过渡效果变得流畅舒适。
.menu:hover .social a::before{
margin-left: -100px;
}
.menu:hover .social a::after{
margin-left: -5px;
简单的滑动手风琴效果已经实现，下面我们来设置网页的响应式布局。使我们的滑动手风琴可以适应不同显示器的大小。我们使用媒体查询@media来设置我们不同分辨率的样式。
@media (max-width:950px){/*当最大宽度达到950px时切换到以下样式*/
.container{
width: 70%;
}
.menu{
display: block;
width: 100%;
border-bottom: 3px #333 solid;/*分辨率减小，列表竖向排列方便阅读*/
}
.contentall{
display: block;
height: auto;
min-width: 450px;
}
.menu .content{
width: 85%;
}
.menu:hover{
width: 100%;/*防止移入时右侧内容部分左移*/
}
}
效果如下图
自适应手风琴.png
而当分辨率更小达到手机类时，再设置一个媒体查询来自适应。
@media (max-width:680px) {
.container{
width: 95%;
}
.contentall{
width: 100%;
min-width: 350px;
}
}
自适应手风琴2.png
自适应的界面使不同分辨率的用户都能有更好的体验。
到此，一个滑动手风琴的Demo就完成了。
网友评论