jquery css3 手机菜单动画综合版
html
1 <header> 2 <a id="go-back" href="javascript:window.location.back(-1)" title="返回"></a> 3 <a href="/wap/" id="header-title">邮币财富网</a> 4 <a href="javascript:;" id="menu" title="menu"> 5 <button> 6 <span></span> 7 </button> 8 </a> 9 <div class="menu-list"> 10 <a href="/index.php?r=wap/news/index/catid/1">市场资讯</a> 11 <a href="/index.php?r=wap/news/index/catid/8">交易指南</a> 12 <a href="/index.php?r=wap/news/index/catid/5">通知公告</a> 13 <a href="/index.php?r=wap/single/about">关于我们</a> 14 <a href="">市场点评</a> 15 <a href="">软件下载</a> 16 <a href="http://122.144.180.26:15926/SelfOpenAccount/index.jsp?brokerId=0100">我要开户</a> 17 </div> 18 </header>
css
1 header { 2 background: #e33543; 3 height: 1.8rem; 4 text-align: center; 5 position: relative; 6 } 7 header .menu-list{ 8 width:4rem; 9 position: absolute; 10 right:0rem; 11 visibility: hidden; 12 display:block; 13 14 z-index: 100; 15 top:3rem; 16 opacity: 0; 17 18 text-align: center; 19 -webkit-transition:all .5s ease-in-out; 20 -o-transition:all .5s ease-in-out; 21 -moz-transition:all .5s ease-in-out; 22 } 23 header .menu-list.hover{ 24 top:0rem; 25 opacity: 1; 26 visibility: visible; 27 } 28 header .menu-list a{ 29 display: block; 30 width:4rem; 31 background: rgba(227, 53, 67, 1); 32 height:1.8rem; 33 line-height: 1.8rem; 34 text-align: center; 35 color:#fff; 36 font-size:0.6rem; 37 position: relative; 38 right:-4rem; 39 40 } 41 header #go-back { 42 background: url(../images/back.png) no-repeat center; 43 width: 1.8rem; 44 height: 1.5rem; 45 margin-top:0.15rem; 46 display: inline-block; 47 float: left; 48 display: block; 49 background-size: 0.55rem; 50 } 51 header #header-title { 52 color: #fff; 53 font-size: 0.8rem; 54 width: 5rem; 55 display: inline-block; 56 margin: 0 auto; 57 line-height: 1.8rem; 58 height: 1.8rem; 59 vertical-align: top; 60 } 61 header #menu { 62 display: inline-block; 63 float: right; 64 height: 1.5rem; 65 top: 0.15rem; 66 text-align: center; 67 position: relative; 68 right:0rem; 69 width: 2rem; 70 } 71 header #menu.on{ 72 top:0; 73 opacity: 1; 74 display: block; 75 } 76 header #menu button { 77 height: 1.5rem; 78 width: 100%; 79 margin: 0 auto; 80 background: none; 81 outline: none; 82 cursor: pointer; 83 padding:0px; 84 left: 0; 85 transition: top 0.3s 0.2s ease, transform 0.3s ease; 86 -webkit-transition: top 0.3s 0.2s ease, -webkit-transform 0.3s ease; 87 -o-transition: top 0.3s 0.2s ease, -o-transform 0.3s ease; 88 -ms-transition: top 0.3s 0.2s ease, -ms-transform 0.3s ease; 89 -moz-transition: top 0.3s 0.2s ease, -moz-transform 0.3s ease; 90 -moz-transition: background 0.2s 0.1s ease; 91 -ms-transition: background 0.2s 0.1s ease; 92 -webkit-transition: background 0.2s 0.1s ease; 93 -o-transition: background 0.2s 0.1s ease; 94 transition: background 0.2s 0.1s ease; 95 border: none; 96 } 97 header #menu span { 98 width: 1.25rem; 99 height: 0.125rem; 100 background: #fff; 101 position: relative; 102 margin:0 auto; 103 display: block; 104 border-radius: 0.125rem; 105 -o-transition: background 0.3s 0.2s; 106 -moz-transition: background 0.3s 0.2s; 107 transition: background 0.3s 0.2s; 108 -ms-transition: background 0.3s 0.2s; 109 -webkit-transition: background 0.3s 0.2s; /*激活之后 ，前面的秒数是动画消耗的时间，后面的秒数是推迟开始的时间*/ 110 } 111 header #menu span:before { 112 content: ""; 113 display: block; 114 top: -0.35rem; 115 left: 0; 116 width: 1.25rem; 117 height: 0.125rem; 118 background: #fff; 119 position: absolute; 120 border-radius: 0.15rem; 121 transition: top 0.3s 0.2s ease, transform 0.3s ease; 122 -o-transition: top 0.3s 0.2s ease, -o-transform 0.3s ease; 123 -moz-transition: top 0.3s 0.2s ease, -moz-transform 0.3s ease; 124 -ms-transition: top 0.3s 0.2s ease, -ms-transform 0.3s ease; 125 -webkit-transition: top 0.3s 0.2s ease, -webkit-transform 0.3s ease; 126 } 127 header #menu span:after { 128 content: ""; 129 background: #fff; 130 display: block; 131 width: 1.25rem; 132 height: 0.125rem; 133 top: 0.35rem; 134 position: absolute; 135 left: 0; 136 border-radius: 0.15rem; 137 transition: top 0.3s 0.2s ease, transform 0.3s ease; 138 -webkit-transition: top 0.3s 0.2s ease, -webkit-transform 0.3s ease; 139 -o-transition: top 0.3s 0.2s ease, -o-transform 0.3s ease; 140 -ms-transition: top 0.3s 0.2s ease, -ms-transform 0.3s ease; 141 -moz-transition: top 0.3s 0.2s ease, -moz-transform 0.3s ease; 142 } 143 header #menu button.active{ 144 transition: top 0.3s 0.2s ease, transform 0.3s ease; 145 -webkit-transition: top 0.3s 0.2s ease, -webkit-transform 0.3s ease; 146 -o-transition: top 0.3s 0.2s ease, -o-transform 0.3s ease; 147 -ms-transition: top 0.3s 0.2s ease, -ms-transform 0.3s ease; 148 -moz-transition: top 0.3s 0.2s ease, -moz-transform 0.3s ease; 149 -moz-transition: background 0.2s 0.1s ease; 150 -ms-transition: background 0.2s 0.1s ease; 151 -webkit-transition: background 0.2s 0.1s ease; 152 -o-transition: background 0.2s 0.1s ease; 153 transition: background 0.2s 0.1s ease; 154 } 155 header #menu button.active span { 156 background: transparent; 157 border-radius: 3px; 158 -webkit-transform-origin: 50% 50%; 159 -moz-transform-origin: 50% 50%; 160 -ms-transform-origin: 50% 50%; 161 -o-transform-origin: 50% 50%; 162 transform-origin: 50% 50%; 163 -moz-transition: background 0.2s 0.1s ease; 164 -ms-transition: background 0.2s 0.1s ease; 165 -webkit-transition: background 0.2s 0.1s ease; 166 -o-transition: background 0.2s 0.1s ease; 167 transition: background 0.2s 0.1s ease; /*激活之前 ，前面的秒数是动画消耗的时间，后面的秒数是推迟开始的时间*/ 168 } 169 header #menu button.active span:before { 170 -webkit-transform: rotate(45deg); 171 -moz-transform: rotate(45deg); 172 -o-transform: rotate(45deg); 173 -ms-transform: rotate(45deg); 174 transform: rotate(45deg); 175 top: 0; 176 -webkit-transition: top 0.3s ease, -webkit-transform 0.3s 0.2s ease; 177 transition: top .3s ease, -webkit-transform 0.3s 0.2s ease; 178 -ms-transition: top 0.3s ease, -webkit-transform 0.3s 0.2s ease; 179 -o-transition: top 0.3s ease, -webkit-transform 0.3s 0.2s ease; 180 -moz-transition: top 0.3s ease, -webkit-transform 0.3s 0.2s ease; 181 } 182 header #menu button.active span:after { 183 -moz-transform: rotate(-45deg); 184 -o-transform: rotate(-45deg); 185 -ms-transform: rotate(-45deg); 186 -webkit-transform: rotate(-45deg); 187 transform: rotate(-45deg); 188 top: 0; 189 -webkit-transition: top 0.3s ease, -webkit-transform 0.3s 0.2s ease; 190 -ms-transition: top 0.3s ease, -ms-transform 0.3s 0.2s ease; 191 -o-transition: top 0.3s ease, -o-transform 0.3s 0.2s ease; 192 -moz-transition: top 0.3s ease, -moz-transform 0.3s 0.2s ease; 193 }
jquery
<script type="text/javascript">
//menu动画，自定义开关
var _a = true;
var t;
var _menu = $('#menu');
var _menu_list = $('header .menu-list');
$("button").click(function(){
if(_a){
$(this).addClass("active");
_menu_list.addClass('hover');
_menu.animate({right:'4rem'},500);
//a标签延迟动画效果
t = setTimeout(function(){
_menu_list.find('a').each(function(i){
var $a = $(this);
setTimeout(function(){
$a.animate({right:'0rem'},200);
},50*i)
})
},200);
_a= false;
}else{
$(this).removeClass("active");
_menu_list.removeClass('hover');
_menu.animate({right:'0rem'},500);
if(t){
clearTimeout(t);
t = setTimeout(function(){
_menu_list.find('a').each(function(i){
var $a = $(this);
setTimeout(function(){
$a.animate({right:'-4rem'},200);
},50*i)
})
},200);
}
_a= true;
}
});
</script>
