400 lines
11 KiB
CSS
400 lines
11 KiB
CSS
|
|
/* MEGAMENU STYLE
|
|
=================================*/
|
|
nav.main-menu .mega-menu-item.megamenu-fw {
|
|
position: static;
|
|
}
|
|
nav.main-menu .megamenu-fw .mega-submenu, nav.main-menu .megamenu-content {
|
|
width: auto !important;
|
|
}
|
|
nav.main-menu .megamenu-fw .mega-submenu .row{
|
|
margin: 0;
|
|
}
|
|
nav.main-menu .megamenu-content {
|
|
width: 100%;
|
|
}
|
|
nav.main-menu .megamenu-content .title{
|
|
margin: 0;
|
|
display: block;
|
|
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
|
|
font-weight: 500;
|
|
font-size: 14px;
|
|
text-transform: capitalize;
|
|
padding: 6px 20px;
|
|
color: inherit;
|
|
border-right: 1px solid transparent;
|
|
}
|
|
nav.main-menu .mega-menu-item.megamenu-fw .mega-submenu {
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
nav.main-menu ul {
|
|
padding: 0px;
|
|
margin: 0px;
|
|
list-style: none;
|
|
}
|
|
nav.main-menu ul li {
|
|
position: relative;
|
|
}
|
|
nav.main-menu{
|
|
margin-bottom: 0;
|
|
-moz-border-radius: 0px;
|
|
-webkit-border-radius: 0px;
|
|
-o-border-radius: 0px;
|
|
border-radius: 0px;
|
|
border: none;
|
|
z-index: 2;
|
|
}
|
|
nav.main-menu li ul.mega-submenu {
|
|
position: absolute;
|
|
display: block;
|
|
width: 250px;
|
|
opacity: 0.5;
|
|
z-index: 2;
|
|
border: 0;
|
|
top: 50px;
|
|
-webkit-transform-origin: top;
|
|
transform-origin: top;
|
|
-webkit-animation-fill-mode: forwards;
|
|
animation-fill-mode: forwards;
|
|
transition: all .5s ease;
|
|
-webkit-transition: all .5s ease;
|
|
-moz-transition: all 500ms ease;
|
|
-o-transition: all 500ms ease;
|
|
-ms-transition: all 500ms ease;
|
|
background: #fff;
|
|
border-radius: 0;
|
|
box-shadow: 0 3px 25px 0px rgb(43 52 59 / 10%), 0 0 0 rgb(43 52 59 / 10%) inset;
|
|
-webkit-box-shadow: 0 3px 25px 0px rgb(43 52 59 / 10%), 0 0 0 rgb(43 52 59 / 10%) inset;
|
|
background-clip: padding-box;
|
|
border-top: 3px solid #006836;
|
|
-webkit-transition: all 0.2s ease-out;
|
|
transition: all 0.5s ease-out;
|
|
-moz-transition: all 0.5s ease-out;
|
|
-ms-transition: all 0.5s ease-out;
|
|
-webkit-box-shadow: 0px 4px 4px 1px rgb(0 0 0 / 20%);
|
|
box-shadow: 0px 4px 4px 1px rgb(0 0 0 / 20%);
|
|
-webkit-transform: rotateX(-90deg);
|
|
transform: rotateX(-90deg);
|
|
-webkit-transform-origin: 0 0;
|
|
transform-origin: 0 0;
|
|
}
|
|
nav.main-menu ul.menu > li{
|
|
z-index: 11;
|
|
display: inline-block;
|
|
}
|
|
nav.main-menu ul.menu li ul > li:not(:first-child) {
|
|
border-top: 1px solid;
|
|
border-color: var(--base-grey);
|
|
}
|
|
nav.main-menu ul.menu li ul.mega-submenu li a {
|
|
font-size: 14px;
|
|
line-height: 24px;
|
|
font-weight: 400;
|
|
display: block;
|
|
padding: 10px 10px 10px 20px;
|
|
text-align: left;
|
|
color: var(--base-bodyfont-color);
|
|
background-color: var(--base-white);
|
|
font-family: var(--base-bodyfont);
|
|
border-radius: 0;
|
|
-webkit-transition: all .3s linear;
|
|
transition: all .3s linear;
|
|
}
|
|
nav.main-menu ul.menu li ul.mega-submenu li a span {
|
|
display: inline!important;
|
|
padding: 4px 8px;
|
|
background: #ff6f00;
|
|
color: var(--base-white) !important;
|
|
text-shadow: none;
|
|
border-radius: 0;
|
|
margin-left: 14px;
|
|
position: relative;
|
|
text-transform: uppercase;
|
|
font-size: 11px!important;
|
|
font-weight: 500!important;
|
|
}
|
|
nav.main-menu ul.menu li ul.mega-submenu li a span:before {
|
|
right: 100%;
|
|
top: 50%;
|
|
border: solid transparent;
|
|
content: " ";
|
|
height: 0;
|
|
width: 0;
|
|
position: absolute;
|
|
pointer-events: none;
|
|
border-color: var(--base-white);
|
|
border-right-color: #ff6f00;
|
|
border-width: 5px;
|
|
margin-top: -5px;
|
|
}
|
|
ul.menu-col li a{
|
|
color: #6f6f6f;
|
|
}
|
|
ul.menu-col li a:hover,
|
|
ul.menu-col li a:focus{
|
|
text-decoration: none;
|
|
}
|
|
|
|
|
|
/* Responsive
|
|
=================================*/
|
|
|
|
@media (min-width: 1200px) {
|
|
|
|
nav.main-menu li.mega-menu-item ul.mega-submenu li ul {
|
|
left: 100%;
|
|
top: 0;
|
|
border-top: 0;
|
|
}
|
|
nav.main-menu li.mega-menu-item:last-child > ul {
|
|
right: 0;
|
|
left: auto;
|
|
}
|
|
nav.main-menu ul.menu > li > a{
|
|
display: block;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
font-size: 14px;
|
|
line-height: 26px;
|
|
font-family: var(--base-headingfont);
|
|
}
|
|
nav.main-menu li.mega-menu-item ul.mega-submenu li.mega-menu-item > a.mega-menu-link:before {
|
|
font-family: 'FontAwesome';
|
|
float: right;
|
|
content: "\f105";
|
|
margin-top: 0;
|
|
}
|
|
nav.main-menu ul.mega-submenu.megamenu-content .col-menu{
|
|
padding: 0;
|
|
width: 240px;
|
|
border-right: solid 1px #f0f0f0;
|
|
}
|
|
nav.main-menu ul.mega-submenu.megamenu-content .col-menu:first-child{
|
|
border-left: none;
|
|
}
|
|
nav.main-menu ul.mega-submenu.megamenu-content .col-menu:last-child{
|
|
border-right: none;
|
|
}
|
|
nav.main-menu ul.mega-submenu.megamenu-content .content ul.menu-col li:last-child a{
|
|
border-bottom: unset;
|
|
}
|
|
nav.main-menu li.mega-menu-item.on ul.mega-submenu.megamenu-content .content{
|
|
display: block !important;
|
|
height: auto !important;
|
|
}
|
|
nav.main-menu li.mega-menu-item:hover > ul.mega-submenu {
|
|
opacity: 1;
|
|
display: block;
|
|
visibility: visible;
|
|
height: auto;
|
|
filter: alpha(opacity=100);
|
|
-webkit-transform: rotateX(0);
|
|
transform: rotateX(0);
|
|
}
|
|
|
|
header.ttm-header-style-01 .site-navigation nav.main-menu li ul.mega-submenu { top: 82px; }
|
|
header.ttm-header-style-02 .site-navigation nav.main-menu li ul.mega-submenu { top: 82px; }
|
|
header.ttm-header-style-03 .site-navigation nav.main-menu li ul.mega-submenu { top: 100px; }
|
|
}
|
|
|
|
|
|
@media (max-width: 1199px) {
|
|
|
|
.menubar{
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
z-index: 9;
|
|
}
|
|
.menubar-box {
|
|
display: block;
|
|
width: 30px;
|
|
height: 24px;
|
|
}
|
|
.menubar-inner, .menubar-inner:after, .menubar-inner:before {
|
|
position: absolute;
|
|
width: 30px;
|
|
height: 3px;
|
|
transition-timing-function: ease;
|
|
transition-duration: .15s;
|
|
transition-property: transform;
|
|
border-radius: 4px;
|
|
background-color: #2f2f2f;
|
|
}
|
|
.menubar--squeeze .menubar-inner {
|
|
top: 50%;
|
|
display: block;
|
|
margin-top: -2px;
|
|
transition-timing-function: cubic-bezier(.55,.055,.675,.19);
|
|
transition-duration: .1s;
|
|
}
|
|
.menubar-inner:after, .menubar-inner:before {
|
|
display: block;
|
|
content: '';
|
|
}
|
|
.menubar-inner:after {
|
|
bottom: -8px;
|
|
}
|
|
.menubar-inner:before {
|
|
top: -8px;
|
|
}
|
|
.menubar--squeeze.is-active .menubar-inner {
|
|
transition-delay: .14s;
|
|
transition-timing-function: cubic-bezier(.215,.61,.355,1);
|
|
transform: rotate(45deg);
|
|
}
|
|
.menubar--squeeze.is-active .menubar-inner:before {
|
|
top: 0;
|
|
transition: top .1s ease,opacity .1s ease .14s;
|
|
opacity: 0;
|
|
}
|
|
.menubar--squeeze.is-active .menubar-inner:after {
|
|
bottom: 0;
|
|
transition: bottom .1s ease,transform .1s cubic-bezier(.215,.61,.355,1) .14s;
|
|
transform: rotate(-90deg);
|
|
}
|
|
nav.main-menu{
|
|
display: none ;
|
|
max-height: 10000px;
|
|
position: absolute;
|
|
box-shadow: 0 0 10px 0 rgba(0, 43, 92, 0.08);
|
|
z-index: 100;
|
|
top: 100%;
|
|
left: 0;
|
|
right: 0;
|
|
background-color: var(--base-white);
|
|
border-top: 3px solid;
|
|
overflow: visible;
|
|
}
|
|
nav.main-menu.show{
|
|
display: block;
|
|
max-height: 10000px;
|
|
}
|
|
nav.main-menu ul.menu, nav.main-menu ul.menu > li{
|
|
display: block;
|
|
position: relative;
|
|
}
|
|
nav.main-menu ul.menu > li > a{
|
|
display: block;
|
|
font-weight: 600;
|
|
font-size: 16px;
|
|
padding: 15px 15px;
|
|
line-height: 20px;
|
|
text-align: left;
|
|
background-color: var(--base-white);
|
|
}
|
|
nav.main-menu ul.menu > li {
|
|
border-top: solid 1px;
|
|
border-color: var(--base-grey);
|
|
}
|
|
nav.main-menu ul.menu > li:first-child{
|
|
border-top: none;
|
|
}
|
|
nav.main-menu ul.menu li > ul.mega-submenu li a:hover{
|
|
background-color: var(--base-white);
|
|
}
|
|
nav.main-menu li.mega-menu-item a.mega-menu-link:after{
|
|
font-family: 'FontAwesome';
|
|
content: "\f105";
|
|
float: right;
|
|
font-size: 16px;
|
|
}
|
|
nav.main-menu li.mega-menu-item.on > a.mega-menu-link:after{
|
|
content: "\f107";
|
|
}
|
|
nav.main-menu ul.menu-left > li:last-child > ul.mega-submenu{
|
|
border-bottom: solid 1px #e0e0e0;
|
|
}
|
|
nav.main-menu ul.menu li.mega-menu-item ul.mega-submenu{
|
|
width: 100%;
|
|
background-color: var(--base-white);
|
|
float: none;
|
|
border: none;
|
|
padding: 0 0 0 15px;
|
|
-moz-box-shadow: 0px 0px 0px;
|
|
-webkit-box-shadow: 0px 0px 0px;
|
|
-o-box-shadow: 0px 0px 0px;
|
|
box-shadow: 0px 0px 0px;
|
|
-moz-border-radius: 0px 0px 0px;
|
|
-webkit-border-radius: 0px 0px 0px;
|
|
-o-border-radius: 0px 0px 0px;
|
|
border-radius: 0px 0px 0px;
|
|
}
|
|
nav.main-menu ul.menu li ul.mega-submenu li a { padding: 10px 25px; }
|
|
nav.main-menu ul.menu li ul.mega-submenu li.active > a { background-color: var(--base-white); }
|
|
nav.main-menu ul.menu li.mega-menu-item ul.mega-submenu.active {
|
|
position: relative;
|
|
visibility: visible;
|
|
top: 0;
|
|
width: 100%;
|
|
opacity: 1;
|
|
z-index: 1;
|
|
display: contents;
|
|
background-color: inherit;
|
|
box-shadow: unset;
|
|
}
|
|
nav.main-menu ul.menu ul.mega-submenu li.mega-menu-item.on > ul.mega-submenu{
|
|
display: inline-block;
|
|
margin-top: -10px;
|
|
}
|
|
nav.main-menu .mega-menu-item .megamenu-content .col-menu .title{
|
|
padding: 10px 15px 10px 0;
|
|
line-height: 24px;
|
|
font-size: 14px;
|
|
text-transform: none;
|
|
font-weight: 500;
|
|
letter-spacing: 0px;
|
|
margin-bottom: 0;
|
|
cursor: pointer;
|
|
background-color: transparent;
|
|
border-right: 0;
|
|
border-bottom: solid 1px #e0e0e0;
|
|
}
|
|
nav.main-menu .mega-menu-item .megamenu-content .col-menu .title:before{
|
|
font-family: 'FontAwesome';
|
|
content: "\f105";
|
|
float: right;
|
|
font-size: 16px;
|
|
margin-left: 10px;
|
|
position: relative;
|
|
right: 0;
|
|
}
|
|
nav.main-menu .mega-menu-item .megamenu-content .col-menu:last-child .title{
|
|
border-bottom: none;
|
|
}
|
|
nav.main-menu .mega-menu-item .megamenu-content .col-menu.on:last-child .title{
|
|
border-bottom: solid 1px #e0e0e0;
|
|
}
|
|
nav.main-menu .mega-menu-item .megamenu-content .col-menu:last-child ul.menu-col li:last-child a{
|
|
border-bottom: none;
|
|
}
|
|
nav.main-menu .mega-menu-item .megamenu-content .col-menu.on .title:before{
|
|
content: "\f107";
|
|
}
|
|
nav.main-menu .megamenu-content{
|
|
padding: 0;
|
|
}
|
|
nav.main-menu .megamenu-content .col-menu{
|
|
padding-bottom: 0;
|
|
max-width: 100%;
|
|
flex: 100%;
|
|
}
|
|
nav.main-menu .megamenu-content .title{
|
|
cursor: pointer;
|
|
display: block;
|
|
padding: 10px 15px;
|
|
margin-bottom: 0;
|
|
font-weight: normal;
|
|
}
|
|
nav.main-menu .megamenu-content .content{
|
|
display: none;
|
|
}
|
|
nav.main-menu .megamenu-content .content.active{
|
|
display: block;
|
|
}
|
|
|
|
|
|
}
|