Edit File - File Manager

Edit File: menu-flip-from-top.css

/* MENU FLIP FROM TOP */
.mobile_menu_active.mobile-menu-visible.sidemenu-right.sidemenu-active #headerwrap,
body:not(.header-overlay):not(.header-minbar):not(.header-leftpane):not(.header-rightpane).mobile-menu-visible.mobile_menu_active.sidemenu-active,
body:not(.header-overlay):not(.header-minbar):not(.header-leftpane):not(.header-rightpane).mobile-menu-visible.mobile_menu_active.sidemenu-active #headerwrap.fixed-header {
	left: 0;
	right: 0;
}
.mobile_menu_active #mobile-menu.sidemenu {
	left: 0;
	right: 0;
	width: 100%;
	visibility: hidden; 
	transform-origin: 50% 20%;
	transition: all .4s ease;
	transition-property: transform, opacity, visibility;
}
.mobile_menu_active #mobile-menu.sidemenu-on {
	animation: flipFromTopOff 1s alternate;
	 
}
.mobile_menu_active #mobile-menu.sidemenu-off {
	 animation: flipFromTopOff 1s alternate;
}
.mobile_menu_active.mobile-menu-visible #mobile-menu.sidemenu {
	animation: flipFromTopOn 1s alternate;
	visibility: visible;
}
.mobile-menu-visible .body-overlay,
.mobile_menu_active .body-overlay,
.body-overlay.body-overlay-on {
	display: none;
}
body:not(.mobile-menu-visible) #headerwrap #menu-icon-close {
	display: none;
}
@keyframes flipFromTopOn{
	from {transform:perspective(400px) rotateX(360deg) scale(.1);opacity:.1}
	to{transform:perspective(400px) rotateX(0) scale(1);opacity:1}
}
@keyframes flipFromTopOff{
	from{transform:perspective(400px) rotateX(0) scale(1);opacity:1}
	to {transform:perspective(400px) rotateX(360deg) scale(.1);opacity:.1}
}

Back to File Manager