**** 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
}
