HTML+CSS：滑动手风琴

今天学习做一个简单的前端demo滑动手风琴，效果如下，在鼠标移入的时候图标变大且背景颜色改变，右侧出现介绍的文字，同时做出响应式的页面

手风琴.png

手风琴hover.png

首先是HTML部分

    
        
        
        
        
    
    
        

            

                
HTML+CSS:滑动手风琴
            
            

                
                
                

                    

                        youtube
                            
                    
                    

                        
YouTuBe
                        
hello,i want to recommend this application to you.hello,i want to recommend this application to you.
                    
                            
                
                
                

                    

                        twitter
                    
                    

                        
Twitter
                        
hello,i want to recommend this application to you.
                    
                
                
                

                    

                        facebook
                    
                    

                        
Facebook
                        
hello,i want to recommend this application to you.
                    
                  
                
                
                

                    

                        linkedin
                    
                    

                        
Linkedin
                        
hello,i want to recommend this application to you.
                    
                
                
                

                    

                        Instagram
                    
                    

                        
Instagram
                        
hello,i want to recommend this application to you.
                    
                
                
                

                    

                        github
                    
                    

                        
Github
                        
hello,i want to recommend this application to you.
                    
                    
                
            
        
    

图标可以在iconfont官网下载使用，也可以在BootCDN上搜索genericons 用link链接引入直接使用。

下面是 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就完成了。