Menu Mobi animation

 

**** HTML

<p>

<a class="expand" href="javascript:void(0)" rel="nofollow" action="open">

    Mở rộng

</a>

</p>

<div id="wrapper_mn" style="display: none;">

<ul class="ovh menu_cat"><li>

<a href="http://dautuck.com/Chung-khoan/Thi-truong-37.html">Thị trường</a>

</li><li>

<a href="http://dautuck.com/Chung-khoan/Tai-chinh-tien-te-the-gioi-24.html">Tài chính tiền tệ thế giới</a>

</li><li>

<a href="http://dautuck.com/Chung-khoan/Doanh-nghiep-38.html">Doanh nghiệp</a>

</li><li>

<a href="http://dautuck.com/kien-thuc/Phan-tich-ky-thuat-49.html">Phân tích kỹ thuật</a>

</li><li>

<a href="http://dautuck.com/kien-thuc/Kien-thuc-co-ban-50.html">Kiến thức cơ bản</a>

</li><li>

<a href="http://dautuck.com/kien-thuc/Phan-tich-co-ban-39.html">Phân tích cơ bản</a>

</li><li>

<a href="http://dautuck.com/kien-thuc/Phan-tich-dong-tien-40.html">Phân tích dòng tiền</a>

</li><li>

<a href="http://dautuck.com/kien-thuc/Thuc-chien-41.html">Thực chiến</a>

</li></ul>

</div>

**** JS

function OpenMenu() {

    window.scrollTo(0, 0);

    $("#wrapper_mn").show();

    $("#wrapper").hide();

    $("#header_wrapper .head").show();

    $("#header_menu .expand").attr("action", "close")

}

function CloseMenu() {

    $("#wrapper_mn").hide();

    $("#wrapper").show();

    $("#header_menu .expand").attr("action", "open")

}

$("#wrapper_mn").addClass("animatedExpand fadeInDownExpand");

$("#header_menu .expand").click(function() {

    $("#header_wrapper a").removeClass("active");

    var n = $(this).attr("action");

    n == undefined || n == "open" ? (OpenMenu(), $("#header_menu a.expand").addClass("active")) : n == "close" && (CloseMenu(), $("#header_menu a.expand").removeClass("active"))

});

**** CSS

.animated{

    -webkit-animation-duration:.5s;

    -moz-animation-duration:.5s;

    -o-animation-duration:.5s;

    animation-duration:.5s;

    -webkit-animation-fill-mode:both;

    -moz-animation-fill-mode:both;

    -o-animation-fill-mode:both;

    animation-fill-mode:both

}

.animatedExpand{

    -webkit-animation-duration:.7s;

    -moz-animation-duration:.7s;

    -o-animation-duration:.7s;

    animation-duration:.7s;

    -webkit-animation-fill-mode:both;

    -moz-animation-fill-mode:both;

    -o-animation-fill-mode:both;

    animation-fill-mode:both

}

@-webkit-keyframes fadeInDownMenu{

    0%{

        -webkit-transform:translateY(-50px)

    }

    100%{

        -webkit-transform:translateY(0)

    }

}

@-moz-keyframes fadeInDownMenu{

    0%{

        -moz-transform:translateY(-50px)

    }

    100%{

        -moz-transform:translateY(0)

    }

}

@-o-keyframes fadeInDownMenu{

    0%{

        -o-transform:translateY(-50px);

    }

    100%{

        -o-transform:translateY(0);

    }

}

@keyframes fadeInDownMenu{

    0%{

        transform:translateY(-50px)

    }

    100%{

        transform:translateY(0)

    }

}

.fadeInDownMenu{

    -webkit-animation-name:fadeInDownMenu;

    -moz-animation-name:fadeInDownMenu;

    -o-animation-name:fadeInDownMenu;

    animation-name:fadeInDownMenu

}

@-webkit-keyframes fadeInDownExpand{

    0%{

        -webkit-transform:translateY(-1000px)

    }

    100%{

        -webkit-transform:translateY(0)

    }

}

@-moz-keyframes fadeInDownExpand{

    0%{

        -moz-transform:translateY(-1000px)

    }

    100%{

        -moz-transform:translateY(0)

    }

}

@-o-keyframes fadeInDownExpand{

    0%{

        -o-transform:translateY(-1000px);

    }

    100%{

        -o-transform:translateY(0);

    }

}

@keyframes fadeInDownExpand{

    0%{

        transform:translateY(-1000px)

    }

    100%{

        transform:translateY(0)

    }

}

.fadeInDownExpand{

    -webkit-animation-name:fadeInDownExpand;

    -moz-animation-name:fadeInDownExpand;

    -o-animation-name:fadeInDownExpand;

    animation-name:fadeInDownExpand

}

.menu_cat{

    padding:0 10px;

    margin-bottom:10px

}

.menu_cat li{

    width:48%

}

.menu_cat li:nth-child(2n+1){

    float:left

}

.menu_cat li:nth-child(2n){

    float:right

}

.menu_cat a{

    display:block;

    background-color:#f5f7f7;

    border:solid 1px #dfe3e6;

    padding:10px 0;

    text-align:center;

    font:bold 12px/1.3 arial;

    color:#666;

    border-radius:4px;

    margin-top:10px;

    text-transform:uppercase

}