jquery css3 手机菜单动画综合版

html

 <header>
     <a id="go-back" href="javascript:window.location.back(-1)" title="返回"></a>
     <a href="/wap/" id="header-title">邮币财富网</a>
     <a href="javascript:;" id="menu" title="menu">
         <button>
         <span></span>
         </button>
     </a>
     <div class="menu-list">
         <a href="/index.php?r=wap/news/index/catid/1">市场资讯</a>
         <a href="/index.php?r=wap/news/index/catid/8">交易指南</a>
         <a href="/index.php?r=wap/news/index/catid/5">通知公告</a>
         <a href="/index.php?r=wap/single/about">关于我们</a>
         <a href="">市场点评</a>
         <a href="">软件下载</a>
         <a href="http://122.144.180.26:15926/SelfOpenAccount/index.jsp?brokerId=0100">我要开户</a>
     </div>
 </header>

css

 header {
     background: #e33543;
     height: 1.8rem;
     text-align: center;
     position: relative;
 }
 header .menu-list{
     width:4rem;
     position: absolute;
     right:0rem;
     visibility: hidden;
     display:block;

     z-index:;
     top:3rem;
     opacity:;

     text-align: center;
     -webkit-transition:all .5s ease-in-out;
     -o-transition:all .5s ease-in-out;
     -moz-transition:all .5s ease-in-out;
 }
 header .menu-list.hover{
     top:0rem;
     opacity:;
     visibility: visible;
 }
 header .menu-list a{
     display: block;
     width:4rem;
     background:  rgba(227, 53, 67, 1);
     height:1.8rem;
     line-height: 1.8rem;
     text-align: center;
     color:#fff;
     font-size:0.6rem;
     position: relative;
     right:-4rem;

 }
 header #go-back {
     background: url(../images/back.png) no-repeat  center;
     width: 1.8rem;
     height: 1.5rem;
     margin-top:0.15rem;
     display: inline-block;
     float: left;
     display: block;
     background-size: 0.55rem;
 }
 header #header-title {
     color: #fff;
     font-size: 0.8rem;
     width: 5rem;
     display: inline-block;
     margin: 0 auto;
     line-height: 1.8rem;
     height: 1.8rem;
     vertical-align: top;
 }
 header #menu {
     display: inline-block;
     float: right;
     height: 1.5rem;
     top: 0.15rem;
     text-align: center;
     position: relative;
     right:0rem;
     width: 2rem;
 }
 header #menu.on{
     top:;
     opacity:;
     display: block;
 }
 header #menu button {
     height: 1.5rem;
     width: 100%;
     margin: 0 auto;
     background: none;
     outline: none;
     cursor: pointer;
     padding:0px;
     left:;
     transition: top 0.3s 0.2s ease, transform 0.3s ease;
     -webkit-transition: top 0.3s 0.2s ease, -webkit-transform 0.3s ease;
     -o-transition: top 0.3s 0.2s ease, -o-transform 0.3s ease;
     -ms-transition: top 0.3s 0.2s ease, -ms-transform 0.3s ease;
     -moz-transition: top 0.3s 0.2s ease, -moz-transform 0.3s ease;
     -moz-transition: background 0.2s 0.1s ease;
     -ms-transition: background 0.2s 0.1s ease;
     -webkit-transition: background 0.2s 0.1s ease;
     -o-transition: background 0.2s 0.1s ease;
     transition: background 0.2s 0.1s ease;
     border: none;
 }
 header #menu span {
     width: 1.25rem;
     height: 0.125rem;
     background: #fff;
     position: relative;
     margin:0 auto;
     display: block;
     border-radius: 0.125rem;
     -o-transition: background 0.3s 0.2s;
     -moz-transition: background 0.3s 0.2s;
     transition: background 0.3s 0.2s;
     -ms-transition: background 0.3s 0.2s;
     -webkit-transition: background 0.3s 0.2s;    /*激活之后 ，前面的秒数是动画消耗的时间，后面的秒数是推迟开始的时间*/
 }
 header #menu span:before {
     content: "";
     display: block;
     top: -0.35rem;
     left:;
     width: 1.25rem;
     height: 0.125rem;
     background: #fff;
     position: absolute;
     border-radius: 0.15rem;
     transition: top 0.3s 0.2s ease, transform 0.3s ease;
     -o-transition: top 0.3s 0.2s ease, -o-transform 0.3s ease;
     -moz-transition: top 0.3s 0.2s ease, -moz-transform 0.3s ease;
     -ms-transition: top 0.3s 0.2s ease, -ms-transform 0.3s ease;
     -webkit-transition: top 0.3s 0.2s ease, -webkit-transform 0.3s ease;
 }
 header #menu span:after {
     content: "";
     background: #fff;
     display: block;
     width: 1.25rem;
     height: 0.125rem;
     top: 0.35rem;
     position: absolute;
     left:;
     border-radius: 0.15rem;
     transition: top 0.3s 0.2s ease, transform 0.3s ease;
     -webkit-transition: top 0.3s 0.2s ease, -webkit-transform 0.3s ease;
     -o-transition: top 0.3s 0.2s ease, -o-transform 0.3s ease;
     -ms-transition: top 0.3s 0.2s ease, -ms-transform 0.3s ease;
     -moz-transition: top 0.3s 0.2s ease, -moz-transform 0.3s ease;
 }
 header #menu button.active{
     transition: top 0.3s 0.2s ease, transform 0.3s ease;
     -webkit-transition: top 0.3s 0.2s ease, -webkit-transform 0.3s ease;
     -o-transition: top 0.3s 0.2s ease, -o-transform 0.3s ease;
     -ms-transition: top 0.3s 0.2s ease, -ms-transform 0.3s ease;
     -moz-transition: top 0.3s 0.2s ease, -moz-transform 0.3s ease;
     -moz-transition: background 0.2s 0.1s ease;
     -ms-transition: background 0.2s 0.1s ease;
     -webkit-transition: background 0.2s 0.1s ease;
     -o-transition: background 0.2s 0.1s ease;
     transition: background 0.2s 0.1s ease;
 }
 header #menu button.active span {
     background: transparent;
     border-radius: 3px;
     -webkit-transform-origin: 50% 50%;
     -moz-transform-origin: 50% 50%;
     -ms-transform-origin: 50% 50%;
     -o-transform-origin: 50% 50%;
     transform-origin: 50% 50%;
     -moz-transition: background 0.2s 0.1s ease;
     -ms-transition: background 0.2s 0.1s ease;
     -webkit-transition: background 0.2s 0.1s ease;
     -o-transition: background 0.2s 0.1s ease;
     transition: background 0.2s 0.1s ease;    /*激活之前 ，前面的秒数是动画消耗的时间，后面的秒数是推迟开始的时间*/
 }
 header #menu button.active span:before {
     -webkit-transform: rotate(45deg);
     -moz-transform: rotate(45deg);
     -o-transform: rotate(45deg);
     -ms-transform: rotate(45deg);
     transform: rotate(45deg);
     top:;
     -webkit-transition: top 0.3s ease, -webkit-transform 0.3s 0.2s ease;
     transition: top .3s ease, -webkit-transform 0.3s 0.2s ease;
     -ms-transition: top 0.3s ease, -webkit-transform 0.3s 0.2s ease;
     -o-transition: top 0.3s ease, -webkit-transform 0.3s 0.2s ease;
     -moz-transition: top 0.3s ease, -webkit-transform 0.3s 0.2s ease;
 }
 header #menu button.active span:after {
     -moz-transform: rotate(-45deg);
     -o-transform: rotate(-45deg);
     -ms-transform: rotate(-45deg);
     -webkit-transform: rotate(-45deg);
     transform: rotate(-45deg);
     top:;
     -webkit-transition: top 0.3s ease, -webkit-transform 0.3s 0.2s ease;
     -ms-transition: top 0.3s ease, -ms-transform 0.3s 0.2s ease;
     -o-transition: top 0.3s ease, -o-transform 0.3s 0.2s ease;
     -moz-transition: top 0.3s ease, -moz-transform 0.3s 0.2s ease;
 }

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>