Menu load xuống

 

**** HTML

<div class="mobi-homemenu" id="header_menu">

<ul>

<li>

<a class="expand active" href="javascript:void(0)" rel="nofollow" action="close">Sản phẩm</a>

</li>

</ul>

</div>

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

<ul class="ovh menu_cat">

<li>

<i class="fa fa-angle-down"></i>

<a href="javascript:void(0)">CHILLER</a>

</li>

</ul>

</div>   

<div class="mbi-wpglobal">

        Nội dung ẩn khi click chuột vào sản phẩm

 </div>

**** JS

function OpenMenu() {

    window.scrollTo(0, 0);

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

    // $("#wrapper").hide(); // main-web-old

    $(".mbi-wpglobal").hide();

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

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

}

function CloseMenu() {

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

    // $("#wrapper").show(); // main-web-old

    $(".mbi-wpglobal").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

}

#wrapper_mn > ul{

    padding: 0;

    margin: 0;

    list-style: none;

}

#wrapper_mn > ul > li{

    border-bottom: 1px solid #ccc;

    padding: 10px 0;

    position: relative;

}

#wrapper_mn > ul > li:hover > ul{

    display: block;

}

#wrapper_mn > ul > li > ul{

    display: none;

    list-style: none;

    margin: 10px 0 -10px 0;

    padding: 0;

}

#wrapper_mn > ul > li > a{

    font-size: 16px;

    font-family: lequoc;

    padding-left: 15px;

    color: #000;

}

#wrapper_mn > ul > li > i{

    position: absolute;

    right: 10px;

    font-size: 22px;

}

#wrapper_mn > ul > li > ul > li {

    border-top: 1px solid #ccc;

    padding: 10px 0;

}

#wrapper_mn > ul > li > ul > li > a{

    font-size: 16px;

    font-family: lequoc;

    padding-left: 30px;

}