一、手风琴菜单效果图及代码如下：
手风琴效果制作
.con{
width:908px;
height:300px;
margin:50px auto;
overflow: hidden;
position:relative;
}
.con .list_ul{
}
.con .list_ul li{
width:805px;
height:300px;
position:absolute;
background:#fff;
}
.con .list_ul li span{
width:26px;
height:296px;
text-align: center;
color:#fff;
padding-top:4px;
float:left;
cursor: pointer;
}
.con .list_ul li img{
width:777px;
height:300px;
float:right;
}
.con .list_ul li:after{
display: table;
clear:both;
zoom:1;
content: '';
}
.con .list_ul li:nth-child(1){
left:0;
}
.con .list_ul li:nth-child(2){
left:801px;
}
.con .list_ul li:nth-child(3){
left:828px;
}
.con .list_ul li:nth-child(4){
left:855px;
}
.con .list_ul li:nth-child(5){
left:882px;
}
.con .list_ul li:nth-child(1) span{
background: rgba(8,201,160,0.49);
}
.con .list_ul li:nth-child(2) span{
background: rgba(120,66,0.97);
}
.con .list_ul li:nth-child(3) span{
background: rgb(77,114,201);
}
.con .list_ul li:nth-child(4) span{
background: rgb(255,179,18);
}
.con .list_ul li:nth-child(5) span{
background: rgb(201,5,166);
}
风景图01
风景图02
风景图03
风景图04
风景图05
