最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
纯CSS3模拟侧滑菜单效果代码
时间:2015-05-05 编辑:简简单单 来源:一聚教程网
在APP应用上,常见的一种导航方式是侧滑导航,效果类似于这样:
用CSS3可以对其进行模拟,代码如下:
HTML:
CSS代码如下:
nav{
width: 100%;
background-color: rgba(26,188, 156, 0.75);
position: relative;
}
div{
position: absolute;
height: 100%;
left: 20px;
cursor: pointer;
-webkit-transition: transform 1s;
-moz-transition: transform 1s;
-ms-transition: transform 1s;
-o-transition: transform 1s;
transition: transform 1s;
}
#hide,#show{
display: block;
background-color: #FFF;
position: absolute;
top: 50%;
-webkit-transition: opacity .5s;
-moz-transition: opacity .5s;
-ms-transition: opacity .5s;
-o-transition: opacity .5s;
transition: opacity .5s;
}
#show{
left: 15px;
opacity: 0;
}
#hide{
left: 10px;
margin-top: -1.5px;
}
#hide::before,#hide::after,#show::before,#show::after{
content: "";
display: block;
background-color: #FFF;
position: absolute;
}
#hide::before,#hide::after{
}
#show::before,#show::after{
}
#hide::before,#show::before{
top: -10px;
}
#hide::after,#show::after{
top: 10px;
}
#show::before{
-webkit-transform: rotate(35deg) translateX(5px);
-moz-transform: rotate(35deg) translateX(5px);
-ms-transform: rotate(35deg) translateX(5px);
-o-transform: rotate(35deg) translateX(5px);
transform: rotate(35deg) translateX(5px);
}
#show::after{
-webkit-transform: rotate(-35deg) translateX(5px);
-moz-transform: rotate(-35deg) translateX(5px);
-ms-transform: rotate(-35deg) translateX(5px);
-o-transform: rotate(-35deg) translateX(5px);
transform: rotate(-35deg) translateX(5px);
}
ul{
list-style: none;
background-color: #455552;
position: absolute;
top: 34px;
left: -200px;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
li{
margin: 0;
padding: 0;
position: relative;
left: -40px;
text-align: center;
}
a{
text-decoration: none;
color:#FFF;
display: inline-block;
line-
}
li:hover{
background-color: rgba(26,188, 156, 0.75);
}
JavaScript控制一下事件:
var toggle = document.getElementById("toggleMenu");
var list = document.getElementById("list");
var hide = document.getElementById("hide");
var show = document.getElementById("show");
var isHidden = true;
window.onload = function() {
toggle.onclick=function(){
if(isHidden){
list.style.left="0px";
isHidden = false;
hide.style.opacity=0;
this.style.mozTransform = "rotate(180deg)";
this.style.msTransform = "rotate(180deg)";
this.style.oTransform = "rotate(180deg)";
this.style.webkitTransform = "rotate(180deg)";
this.style.transform = "rotate(180deg)";
show.style.opacity=1;
}else{
list.style.left="-200px";
isHidden = true;
hide.style.opacity=1;
this.style.mozTransform = "rotate(0deg)";
this.style.msTransform = "rotate(0deg)";
this.style.oTransform = "rotate(0deg)";
this.style.webkitTransform = "rotate(0deg)";
this.style.transform = "rotate(0deg)";
show.style.opacity=0;
}
}
}
-
上一个: CSS实现iframe高度自适应示例
相关文章
- CSS3实现滑出滑入左侧菜单 11-18
- CSS 鼠标点击拖拽效果代码展示 10-31
- CSS使用SVG实现动态分布的圆环发散路径动画教程 10-31
- css3中仿放大镜效果的几种方式原理介绍 10-26
- CSS3切割轮播图的代码展示 10-26
- CSS组合选择器解析 10-26