/* THIS FILE IS FOR FRONT END, SO YOU MUST GENERATE RESPONSIVE AND RTL VERSION ALSO */
/* common */
.sneeit-compact-menu {
position: relative;
z-index: 9999;
background: white;
}
.sneeit-compact-menu ul {
margin: 0;
padding: 0;
}
.sneeit-compact-menu ul li {
display: block;
padding: 0;
}
.sneeit-compact-menu ul li.menu-item > a {
display: block;
}
/* top level */
.sneeit-compact-menu ul.menu > li {
float: left;
}
.sneeit-compact-menu ul.menu li.menu-item > a {
position: relative;
}
/* sub level */
.sneeit-compact-menu ul.sub-menu {
min-width: 180px;
position: absolute;
top: 100%;
display: none;
}
.sneeit-compact-menu ul.sub-menu li {
position: relative;
}
.sneeit-compact-menu ul.sub-menu ul.sub-menu {
top: 0;
left: 100%;
}
.sneeit-compact-menu ul.sub-menu .icon-after {
float: right;
}
/* hover effect */
.sneeit-compact-menu .menu-item-inner {
visibility: hidden;
opacity: 0;
transition:visibility 0s linear 0.3s,opacity 0.3s linear;
-webkit-transition:visibility 0s linear 0.3s,opacity 0.3s linear;
-moz-transition:visibility 0s linear 0.3s,opacity 0.3s linear;
-o-transition:visibility 0s linear 0.3s,opacity 0.3s linear;
-ms-transition:visibility 0s linear 0.3s,opacity 0.3s linear;
z-index: 9999;
}
.sneeit-compact-menu li:hover > .menu-item-inner {
visibility:visible;
opacity:1;
transition-delay:0s;
-webkit-transition-delay:0s;
-moz-transition-delay:0s;
-o-transition-delay:0s;
-ms-transition-delay:0s;
}
.sneeit-compact-menu li:hover > .menu-item-inner > ul.sub-menu,
.sneeit-compact-menu li.menu-item-mega:hover > .menu-item-inner ul.sub-menu{
display: block;
}
.sneeit-compact-menu > ul.menu > li:hover > .menu-item-inner {
position: relative;
}
.sneeit-compact-menu > ul.menu > li:hover > .menu-item-inner > ul.sub-menu {
top: 0;
}
/* mega */
/* - group - */
.sneeit-compact-menu li.menu-item-mega:hover .menu-item-inner {
visibility:visible;
opacity:1;
}
.sneeit-compact-menu .menu-item-mega ul.sub-menu .menu-item-inner {
position: static;
}
.sneeit-compact-menu > ul.menu > li.menu-item-mega:hover > .menu-item-inner {
position: absolute;
left: 0;
width: 100%;
min-height: 0;
}
.sneeit-compact-menu ul.menu > .menu-item-mega > .menu-item-inner > ul.sub-menu {
width: 100%;
left: 0;
}
.sneeit-compact-menu ul.menu > .menu-item-mega > .menu-item-inner > ul.sub-menu > li {
float: left;
width: 25%;
}
.sneeit-compact-menu .menu-item-mega .sub-menu .sub-menu {
position: relative;
left: 0;
}
/* - mega & megalex */
.sneeit-compact-menu ul.menu > .menu-item-mega.menu-item-mega-category > .menu-item-inner > ul.sub-menu {
float: left;
width: 20%;
position: relative;
}
.sneeit-compact-menu ul.menu > .menu-item-mega.menu-item-mega-category ul.sub-menu ul.sub-menu {
float: none;
width: 100%;
}
.sneeit-compact-menu ul.menu > .menu-item-mega.menu-item-mega-category ul.sub-menu li {
float: none;
width: auto;
}
.sneeit-compact-menu ul.menu .menu-mega-block {
display: none;
}
.sneeit-compact-menu .menu-mega-block-bg {
position: absolute;
width: 80%;
height: 100%;
right: 0;
top: 0;
z-index: -1;
}
.sneeit-compact-menu ul.menu > li.menu-item-mega.menu-item-mega-category:hover > .menu-item-inner .menu-mega-block {
display: block;
}
.sneeit-compact-menu ul.menu > .menu-item-mega.menu-item-mega-category > .menu-item-inner > .menu-mega-block {
float: none;
width: 100%;
position: relative;
min-height: 2em;
}
.sneeit-compact-menu ul.menu > .menu-item-mega.menu-item-mega-category.menu-item-has-children > .menu-item-inner > .menu-mega-block {
float: right;
width: 80%;
}
.sneeit-compact-menu .sneeit-menu-mega-content {
display: none;
}
.sneeit-compact-menu .sneeit-menu-mega-content.active {
display: block;
}
.sneeit-compact-menu .menu-mega-block-loading {
display: block;
padding: 0.5em 0;
text-align: center;
}
.sneeit-compact-menu .menu-item-mega.menu-item-mega-category.menu-item-has-children:hover .menu-mega-block-loading {
padding: 1em 0;
}
.sneeit-compact-menu .menu-mega-block-content.loaded .menu-mega-block-loading {
display: none;
}
.sneeit-compact-menu .menu-mega-block-content .menu-mega-block-content-inner {
display: none;
}
.sneeit-compact-menu .menu-mega-block-content.loaded .menu-mega-block-content-inner {
display: block;
}
.sneeit-compact-menu .menu-item-mega .sub-menu .icon-after {
display: none;
}
/* - sticky menu */
.sneeit-compact-menu-sticky {
position: fixed;
top: 0;
z-index: 9999;
}
.sneeit-compact-menu-sticky-logo {
display: none;
}
.sneeit-compact-menu-sticky .sneeit-compact-menu-sticky-logo {
display: block;
float: left;
}
.sneeit-compact-menu-sticky .sneeit-compact-menu-sticky-logo img {
display: block;
}
/* mobile menu */
.sneeit-mob-menu .sub-menu {
display: none;
}
.sneeit-mob-menu .icon-after .active {
display: none;
}
.sneeit-mob-menu .icon-after .inactive {
display: inline-block;
}
.sneeit-mob-menu .icon-after.active .active {
display: inline-block;
}
.sneeit-mob-menu .icon-after.active .inactive {
display: none;
}
.sneeit-mob-menu .icon-after {
display: block;
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 2em;
text-align: center;
font-size: 20px;
overflow: hidden;
}
.sneeit-mob-menu .icon-after span {
display: block;
position: relative;
top: 50%;
margin-top: -0.6em;
}