| Server IP : 14.207.165.8 / Your IP : 216.73.216.108 Web Server : Apache/2.4.18 (Ubuntu) System : Linux 246 4.4.0-210-generic #242-Ubuntu SMP Fri Apr 16 09:57:56 UTC 2021 x86_64 User : root ( 0) PHP Version : 7.0.33-0ubuntu0.16.04.16 Disable Function : exec,passthru,shell_exec,system,proc_open,popen,pcntl_exec MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : ON | Pkexec : ON Directory : /proc/thread-self/root/var/www/html/old/templates/sj_icenter/less/ |
Upload File : |
// --* Menu Style Templates *----------------------
// -----------------------------------------------
/* 1.LTR Language Menu Style
* 1.Moo menu & Css Menu
* 2.Dropline Menu
* 3.Mega Menu
* 4.Responsive Menu
*
* 2.RTL Language Menu Style
* 1.Moo menu & Css Menu
* 2.Dropline Menu
* 3.Mega Menu
* 4.Responsive Menu
*/
// 1. RTL Menu Style
// --------------------------------------------------
.top-fixed #yt_menuposition ul.navi ul.subnavi{margin-top: 22px;}
#yt_menuposition{
// 1.1 Moo menu & Css Menu
// -------------------------
ul.navi {margin: 0;padding: 0;list-style: none;position: relative;z-index: 1;float: right;
.fancy {background:@background1;position: absolute;width: 0;.border-radius(25px);}
> li.level1 {float: left;position: relative;padding: 0;z-index: 1; margin-right: 5px;
> .item-link {margin: 0 ;line-height: 30px; cursor: pointer; padding: 5px 20px ;color:#666;font-size:133.3%;display: block;font-weight: 300;.border-radius(25px);
&.active {color: #fff; background: @background1; }
}
&.active.havechild:after{color: #fff;}
// Child Menu Item
&.havechild{
&:after{content: "\f107";font-size: 14px; font-family: "FontAwesome";position: absolute;top: 25%;right: 10px;z-index: 5;color: #a2aaad;}
.level1 {padding: 5px 25px 5px 15px}
}
// Add description and show icons
.showdesc{
.menu-title{line-height: 100%;padding-bottom: 3px;margin-top: -1px;display: block;}
}
//Hover and Active (:hover of cssmenu, .hover of moomenu)
&.active{}
&:hover{
> .item-link{color: #fff;}
&.havechild:after{color: #fff;}
ul.level2 ,&.hover ul.level2 {left: 0;}
}
&.last-menu{
&:hover{
ul.level2 ,&.hover ul.level2 {left: auto; right: 0;
li{
&:hover ul.level3{left: 99px; right: 0;}
}
}
}
}
}
// Show All Submenu
// Menu level2
ul {left: -999em;position: absolute;z-index: 10;margin: 0;padding: 0;list-style: none;width: 220px;}
ul.subnavi { #translucent .background(#f4f4f4,0.9);padding: 10px 0;margin-top: 32px;
&:before{content: "";width:100%;height: 32px;position: absolute;z-index: 2;left: 0;top:-32px;}
li { position: relative; .transition(0.3s ease-in all);
> .item-link {display: block;cursor: pointer; margin: 0;padding: 5px 0 5px 30px ;color: @paginationBorder;text-transform: none;color: #666; position: relative;
&:before{ content: ""; background: none; width: 6px; height: 6px; border: 1px solid #c8c8c8; .border-radius(999px); position: absolute; top: 13px; left: 15px; display: block; }
}
// Child Menu Item
&.havechild{
> .item-link{
&:after{
font-family: 'FontAwesome';content: "\f105";font-size: 14px;position: absolute;right: 15px;z-index: 1;
}
}
}
// Add description and show icons
.showdesc{text-align: left;
span.menu-title{line-height: 100%;}
span.menu-desc{color: #999;font-size: 11px;}
}
// Hover and Active menu
&:hover,&.hover,&.active{
> .item-link{color: @linkColor;
&:before{border-color: @background1;}
}
}
&:hover ul.level3, &.hover ul.level3,
li.level3:hover ul.level4,li.level3.hover ul.level4{
right: auto; left: 100%;top:0px;
&:before{
background: transparent;
content: " ";
height: 100%;
left: -20px;
position: absolute;
top: 0;
width: 20px;
}
}
li.level4:hover ul.level5,li.level4.hover ul.level5,
li.level5:hover ul.level6,li.level5.hover ul.level6{left: auto; right: 100%;top:0px;
&:after{
background: transparent;
content: " ";
height: 100%;
right: -20px;
position: absolute;
top: 0;
width: 20px;
}
}
}
// Menu level3, level4 & level5
ul{box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.2), 1px 1px 0 rgba(0, 0, 0, 0.1) inset;margin: 0;
&:before{height: 0;top: 0;}
}
ul.subnavi li {
> .item-link{background:transparent;}
// Hover and Active menu
&:hover,&.hover,&.active{
> .item-link{color: @linkColor;}
}
}
}
}
// 1.2 Dropline Menu
// ----------------------------------
#droplinenavigator{position: relative;
li.level1{position: static;
&.havechild:after{display: none;}
>.item-link{padding: 12px 35px ;}
}
ul.level2{margin: 0;width: 100%;padding: 5px;
li.level2{float: left;border: none;
a.level2 {
&.havechild:after{content: "";display: none;}
}
&:hover{position: relative;
ul.level3{left: 0;top: 100%;}
}
}
}
}
// 1.3 Mega Menu
// ----------------------------------
#meganavigator ul.subnavi {
background: none ;border: medium none;box-shadow: none;
left: auto; margin: 0;position: static; right: auto;
}
#meganavigator{float: right;
.mega-content{position: absolute;left: -999em;z-index: 10; background-color: rgba(255, 255, 255, 0.9);border-bottom: solid 3px @linkColor;margin-top: 32px;box-shadow: -1px 1px 2px rgba(0, 0, 0, 0.4);
&:after{content: "";width:100%;height: 28px;display: block;margin-top: -28px;}
.mega-content{margin: 0;
&:after{display: none;}
}
//Mega colums
.mega-content-inner{display: block;}
.mega-col {float: left;
&.one div.mega-module{padding: 10px;}
&.more{padding: 10px;.box-sizing(border-box);}
.mega-group-content {
> ul.subnavi{position: static;width: auto;padding: 0;margin: 0; background: transparent;box-shadow: none;}
.mega-module-content {
.content {margin-bottom: 20px;
.content-image {overflow: hidden;display: block;width: 88px;height: 58px;border: solid 3px #fff;float: left;margin-right: 10px;
img {width: 100%;height: 100%;transition :all 0.2s ease-out 0s;}
&:hover img {transform:scale(1.15);}
}
.content-title h2 {font-weight: 300;line-height: 10px;
a {font-weight: 300;font-size: 16px;color: #666;
&:hover {color: @linkColor;}
}
}
.date-created {color: #a8a8a8;font-size: 11px;margin-top: -5px;}
.content-text p {color: #666;;line-height: 1.7em;}
}
}
}
//Mega Item
.mega-group {display: block;
div.mega-group-title{
.item-link{padding: 0 14px 10px; text-transform: uppercase; font-size: 129%;color: #666; padding-bottom: 0;}
.showdesc .menu-title{padding: 0 0 5px;}
}
div.mega-group-content{position: relative;
.mega-module {padding: 0 10px;
ul {position: static;width: auto;padding: 0;margin: 0; background: transparent;box-shadow: none;}
}
}
}
}
}
}
// 1.4 Responsive Menu
// ----------------------------------
#yt-responivemenu{ width: 100%; display: none;margin-top: 30px;
.btn-navbar{background: darken(@background1,8%);padding:6px 20px; .border-radius(0); color: @white;text-shadow: none;height: 45px;
border: none; font-size: 16px;font-weight: bold; width: 100%;text-align: inherit;max-width: 100%; box-shadow: none;
i{margin: 0 10px 0 5px ; font-size: 19px; vertical-align: top;}
}
// Select Box Menu
&.menu-selectbox{ position: relative; background: @background1;
&:before {color: @white; content: "Select Menu"; padding: 6px 10px 0;position: absolute;top: 0px;z-index: 1;}
}
#yt_resmenu_selectbox{.opacity(0);margin: 0;height: 35px;width: 100%;}
// Collapse Menu
&.menu-collapse{
ul.resmenu{
li{ background: #e0e0e0;border-bottom: 1px solid #aaa;
a{color: #555;margin: 0;padding: 10px ; border: none;.border-radius(0px);background: transparent;
&.active{color: @white;background: @background1;}
}
// Item Hover
&:hover{
a{color: @white;background: @background1;}
.menuress-toggle{color: @white;background: darken(@background1,20%);}
}
}
// HaveChild menu
li.haveChild{position: relative;
.menuress-toggle{position: absolute; width: 44px;line-height: 40px; right: 0px; top: 0px; cursor: pointer;font-family: FontAwesome;font-size: 18px;text-align: center;
&:before{content: "\f107";}
}
> .res-wrapnav{opacity: 0;.transition(all 0.2s ease-out 0s); height: 0px;display: none;}
&.open{background: @background1;
a{color: @white;}
.menuress-toggle:before{content: "\f106";color: @white;}
.res-wrapnav{display: block;opacity: 1;background: #e9e8e8;padding: 10px;
ul.nav{margin: 0;}
ul.nav li {background: transparent;margin: 0; border-bottom: none;
a{background: transparent;font-weight: normal;color: #555;
&:hover,&.active{background: @background1;color: @white;}
}
}
}
}
}
}
}
#yt_resmenu_sidebar{display: none;}
}
}
// Sidebar menu
.yt-off-sideresmenu{position: absolute;top: 0; left: 0; z-index: 2; width: 260px;overflow-y:scroll;max-height: 100%;display: none;
.yt-sideresmenu {background: #153242; border-right:1px solid #152F3D;
li a{color: inherit}
ul.resmenu{margin: 0 ;
li {
a{font-weight: bold;color: #BCBCBC;padding: 4px 8px 8px ; background: none; border-bottom: 1px solid #0B222D;.box-shadow(0 -1px 0 #1D4051 inset);
&:focus,&:hover,&.active {color: @white;background: @background1;}
}
}
//Menu level2
ul.nav{ margin: 0;.box-shadow(0 -1px 0 #1D4051 inset);background-color: #153242;
li a{font-weight: normal;border-bottom: 1px solid #153242;.box-shadow(0 -1px 0 #214556 inset);}
//Menu level3
ul.nav{border: none;.box-shadow(none);padding: 1px 15px;border-bottom: 1px solid #132D3A;.box-shadow(0 -1px 0 #214556 inset);background-color: #224556;
ul.nav{border-bottom: none;.box-shadow(none);}
li a{border-bottom: none;.box-shadow(none);padding: 3px 8px;}
}
}
}
}
}
// 2. RTL Menu Style
// --------------------------------------------------
.rtl{
#yt_menuposition{
//2.1 Moo Menu & Css Menu
// ----------------------------------
ul.navirtl{
li.level1{float: right;
&:hover ul.level2,&.hover ul.level2{left: auto;right: 0;}
}
ul {left: auto;right: -999em;}
ul.subnavi {
li {
.item-link{padding: 5px 30px 5px 0;
&:before{left: auto; right: 15px;}
&.havechild:after{right: auto;left: 10px;content: "\f104";}
}
// Add description and show icons
&:hover ul.level3,
li.level3:hover ul.level4,
li.level4:hover ul.level5{left: auto;right: 100%;}
}
}
}
//2.2 Dropline Menu
// ----------------------------------
#droplinenavigator{
ul.level2 li.level2{float: right;
&:hover{
ul.level3{left: auto;right: 0;}
}
}
}
//2.3 Mega Menu
// ----------------------------------
#meganavigator{
li.level1{
.mega-content{ .box-shadow(-1px 1px 2px rgba(0, 0, 0, 0.4));
//Mega colums
.mega-col {float: right;}
}
}
}
}
}