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