diff --git a/main.js b/main.js index 5053846..ad9ccaa 100644 --- a/main.js +++ b/main.js @@ -16,6 +16,9 @@ jQuery(function($) { var $thirdNavLevel = $('.third-navigation-level'); var $openThirdMenuLink = $('.js__main-navigation__open-third-menu-link'); var $dropdownMenuWithColumns = $('.js__dropdown-menu-with-columns .js__main-navigation__item._sub'); + var $menuAnimationSpeed = 300; + var $minScreenWidth = '992px'; + var $smallScreenWidth = '450px'; if (!touchSupport) { $dropdownMenuWithColumns.hover(function() { @@ -26,7 +29,7 @@ jQuery(function($) { // Set class for third-navigation-level to handle position on left or right var setThirdMenuPosition = function() { if ($thirdNavLevel.length) { - if (window.matchMedia('(min-width: 992px)').matches) { + if (window.matchMedia('(min-width: ' + $minScreenWidth + ')').matches) { $secondNavLevel.each(function() { var offsetRight = $(window).width() - $(this).offset().left - $(this).outerWidth(); var secondNavLevelWidth = $(this).width(); @@ -49,7 +52,7 @@ jQuery(function($) { $mainNavigation.find('.js__main-navigation__items-list').find('li').removeClass('_open-mobile-dropdown _open-tablet-dropdown'); $html.removeClass('mobile-menu-opened'); - if (window.matchMedia('(min-width: 992px)').matches) { + if (window.matchMedia('(min-width: ' + $minScreenWidth + ')').matches) { $('.js__navigation__items-wrp').show(); } else { $('.js__navigation__items-wrp').hide(); @@ -64,7 +67,7 @@ jQuery(function($) { // Add click event to dropdown link on mobile devices. $openSubMenuLink.on('click', function(e) { e.preventDefault(); - if (window.matchMedia('(min-width: 992px)').matches) { + if (window.matchMedia('(min-width: ' + $minScreenWidth + ')').matches) { $mainNavigationItemsList.not($(this).parents()).removeClass('_open-tablet-dropdown'); $(this).parents('.main-navigation__item').toggleClass('_open-tablet-dropdown'); } else { @@ -75,7 +78,7 @@ jQuery(function($) { // Add click event to second menu dropdown link on mobile devices. $openThirdMenuLink.on('click', function(e) { e.preventDefault(); - if (window.matchMedia('(min-width: 992px)').matches) { + if (window.matchMedia('(min-width: ' + $minScreenWidth + ')').matches) { $('.main-navigation__sub-item').not($(this).parents('.main-navigation__sub-item')).removeClass('_open-tablet-dropdown'); $(this).parents('.main-navigation__sub-item').toggleClass('_open-tablet-dropdown'); } else { @@ -86,17 +89,45 @@ jQuery(function($) { var mobileMenuAnimationComplete = true; $('.js__main-navigation__toggle-btn').on('click', function(e) { e.preventDefault(); + + // close language menu if open + $('.header-top__language-navigation.toggle-language-menu .language-navigation__items-wrp').hide(); + if (mobileMenuAnimationComplete) { mobileMenuAnimationComplete = false; $html.toggleClass('mobile-menu-opened'); } - $('.js__navigation__items-wrp').not(':animated').slideToggle(300, function() { + $('.js__navigation__items-wrp').not(':animated').slideToggle($menuAnimationSpeed, function() { mobileMenuAnimationComplete = true; }); }); - // detect if we cross 992px window width. - window.matchMedia('(min-width: 992px)').addListener(cleanup); + // detect if we cross the minimum window width. + window.matchMedia('(min-width: ' + $minScreenWidth + ')').addListener(cleanup); + + // disable active language in language menu (full width) + $('.js__header-top__language-navigation.fixed a.active').on('click', function(e) { + e.preventDefault(); + }); + + // toggle language menu (dropdown) + $('.js__language-navigation__toggle-btn').on('click', function(e) { + e.preventDefault(); + $('.js__language-navigation__items-wrp').not(':animated').slideToggle($menuAnimationSpeed); + }); + + var cleanupLanguageMenu = function() { + if (window.matchMedia('(min-width: ' + $smallScreenWidth + ')').matches) { + $('.js__header-top__language-navigation.fixed').removeClass('toggle-language-menu'); + $('.js__header-top__language-navigation.fixed .js__language-navigation__items-wrp').show(); + } else { + $('.js__header-top__language-navigation.fixed').addClass('toggle-language-menu'); + $('.js__header-top__language-navigation.fixed .js__language-navigation__items-wrp').hide(); + } + }; + + // detect if we cross the small screen width. + window.matchMedia('(min-width: ' + $smallScreenWidth + ')').addListener(cleanupLanguageMenu); }); // ====== class fo fixed main navigation bar ======= diff --git a/main.less b/main.less index f869e94..e72d191 100644 --- a/main.less +++ b/main.less @@ -1050,6 +1050,17 @@ } } +// dropdown caret +.dropdown-caret() { + .icons(); + content: "\e10f"; + padding-left: 3px; + position: relative; + font-size: 15px; + top: 2px; + color: @nav-link-arrow-color; +} + // Custom Variables @@ -2479,13 +2490,7 @@ // Dropdown arrow .no-touch ._sub > .main-navigation__item-link:after { - .icons(); - content: "\e10f"; - padding-left: 3px; - position: relative; - font-size: 15px; - top: 2px; - color: @nav-link-arrow-color; + .dropdown-caret; } // Third menu arrow right @@ -2566,6 +2571,171 @@ } +// ============================================================ +// Dropdown language menu +// ============================================================ +.header-top__language-navigation-dropdown() { + height: @header-top-height; + float: right; + + .language-navigation__items { + position: absolute; + top: 100%; + right: 0; + } + + .language-navigation__item-link { + .main-navigation__item-link; + + text-transform: none; + font-weight: 400; + padding: 0 20px 0 15px; + line-height: @header-top-height; + color: @header-top-color; + + &._sub:after { + .dropdown-caret; + } + } + + .language-navigation__toggle-btn { + background: transparent; + position: relative; + width: 100%; + border: none; + text-align: left; + cursor: pointer; + padding: 0 16px; + height: @header-top-height - 1; + line-height: @header-top-height - 1; + + span { + margin-left: 0; + } + + &:hover { + color: @link-hover-color; + } + } + + ul.language-navigation__items-wrp { + margin: 0; + padding-left: 3px; + background: @main-body-bg; + display: none; + + li { + list-style-type: none; + + &.active { + display: none; + } + } + + .language-navigation__item-link:hover{ + background: @nav-link-hover-background; + color: fade(@nav-link-hover-color, 60%); + } + } +} + +.header-top__language-navigation.dropdown { + .header-top__language-navigation-dropdown; +} + + +@media (max-width: 449px) { + .header-top__language-navigation.dropdown { + .language-navigation__items { + .language-navigation__item-link { + font-weight: 400; + line-height: @nav-height; + } + } + } +} +// ======== end dropdown language menu =========== + +// ============================================================ +// Fixed language menu +// ============================================================ +.header-top__language-navigation.fixed { + .language-navigation__item-link { + .main-navigation__item-link; + + font-weight: 400; + text-transform: none; + color: @header-top-color; + + &._sub:after { + .dropdown-caret; + } + } + + .active .language-navigation__item-link { + background: transparent; + } + + ul.language-navigation__items-wrp { + margin: 0; + } +} + + +@media (max-width: 449px) { + .header-top__language-navigation.fixed { + .header-top__language-navigation-dropdown; + + .language-navigation__items { + .language-navigation__item-link { + line-height: @nav-height; + } + } + + .language-navigation__items-wrp { + .language-navigation__item-link:hover{ + background: @nav-link-hover-background; + color: fade(@nav-link-hover-color, 60%); + } + } + } +} + +@media (min-width: 450px) { + .header-top__language-navigation.fixed { + .language-navigation__toggle-btn { + display: none; + } + + .language-navigation__items-wrp { + display: block; + float: right; + padding-left: 3px; + + li { + display: inline-block; + + a { + padding: 0 3px; + line-height: @header-top-height; + } + } + + .language-navigation__item-link { + &:hover { + background: none; + color: @link-hover-color; + } + } + + .active .language-navigation__item-link { + cursor: default; + color: @main-link-color; + } + } + } +} +// ======== end fixed language menu =========== // ================================= // Search