diff --git a/dev/js/main/header/header.js b/dev/js/main/header/header.js index 2ad30b1..13243fb 100644 --- a/dev/js/main/header/header.js +++ b/dev/js/main/header/header.js @@ -12,18 +12,41 @@ jQuery(function($) { var $mainNavigation = $('.js__main-navigation'); var $openSubMenuLink = $('.js__main-navigation__open-sub-menu-link'); var $mainNavigationItemsList = $mainNavigation.find('.js__main-navigation__items-list').children('li'); - - //var $mainNavigationItemsListSub = ('.main-navigation__item._sub'); + var $secondNavLevel = $('.second-navigation-level'); + 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'); + if (!touchSupport) { $dropdownMenuWithColumns.hover(function() { $(this).toggleClass('open'); }); } + // 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) { + $secondNavLevel.each(function() { + var offsetRight = $(window).width() - $(this).offset().left - $(this).outerWidth(); + var secondNavLevelWidth = $(this).width(); + var thirdNavLevelWidth = $(this).find($thirdNavLevel).width(); + if (offsetRight < thirdNavLevelWidth) { + $(this).find($thirdNavLevel).css('left', -secondNavLevelWidth); + } else { + $(this).find($thirdNavLevel).css('left', secondNavLevelWidth); + } + }); + } else { + $thirdNavLevel.css('left', 'auto'); + } + } + }; + // Initial call for function + setThirdMenuPosition(); // Cleanup function to clean unneeded classes var cleanup = function() { - $mainNavigationItemsList.removeClass('_open-mobile-dropdown _open-tablet-dropdown'); + $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) { @@ -31,12 +54,16 @@ jQuery(function($) { } else { $('.js__navigation__items-wrp').hide(); } + + //Set timeout for third menu position to load the width + window.setTimeout(function() { + setThirdMenuPosition(); + }, 500); }; // Add click event to dropdown link on mobile devices. $openSubMenuLink.on('click', function(e) { e.preventDefault(); - if (window.matchMedia('(min-width: 992px)').matches) { $mainNavigationItemsList.not($(this).parents()).removeClass('_open-tablet-dropdown'); $(this).parents('.main-navigation__item').toggleClass('_open-tablet-dropdown'); @@ -45,8 +72,16 @@ jQuery(function($) { } }); - // detect if we cross 992px window width. - window.matchMedia('(min-width: 992px)').addListener(cleanup); + // 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) { + $('.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 { + $(this).parents('.main-navigation__sub-item').toggleClass('_open-mobile-dropdown'); + } + }); var mobileMenuAnimationComplete = true; $('.js__main-navigation__toggle-btn').on('click', function(e) { @@ -60,6 +95,8 @@ jQuery(function($) { }); }); + // detect if we cross 992px window width. + window.matchMedia('(min-width: 992px)').addListener(cleanup); }); // ====== class fo fixed main navigation bar ======= diff --git a/dev/styles/main/header/header.less b/dev/styles/main/header/header.less index 133bd44..fc506c4 100644 --- a/dev/styles/main/header/header.less +++ b/dev/styles/main/header/header.less @@ -546,18 +546,23 @@ transform: rotate(90deg); } -._open-mobile-dropdown .main-navigation__open-sub-menu-link:before { +._open-mobile-dropdown > .main-navigation__open-sub-menu-link:before { -webkit-transform: rotate(45deg); transform: rotate(45deg); } -._open-mobile-dropdown .main-navigation__open-sub-menu-link:after { +._open-mobile-dropdown > .main-navigation__open-sub-menu-link:after { -webkit-transform: rotate(135deg); transform: rotate(135deg); } +// Open link cross for third navigation level, adjust height +.main-navigation__sub-item > .main-navigation__open-sub-menu-link { + line-height: 40px; +} + .main-navigation__sub-item-list { list-style: none; padding: 0; @@ -577,16 +582,22 @@ } @media (max-width: 991px) { - ._open-mobile-dropdown .main-navigation__sub-item-list { + ._open-mobile-dropdown > .main-navigation__sub-item-list { -webkit-transform: scale(1, 1); transform: scale(1,1); opacity: 1; visibility: visible; max-height: 100%; } + + //Set border-top for links on second navigation level if third navigation level is enabled + .second-navigation-level ._sub > .main-navigation__sub-item-link { + border-top: 1px solid @header-border-color; + } } .main-navigation__sub-item { + position: relative; } .main-navigation__sub-item-link { @@ -611,6 +622,11 @@ color: @nav-link-active-hover-color; } +// More padding for third level links +.third-navigation-level .main-navigation__sub-item-link { + padding-left: 90px; +} + @media (min-width: 992px) { .main-navigation { @@ -665,6 +681,7 @@ display: none; } + //Second navigation level .main-navigation__sub-item-list { position: absolute; -webkit-transform: translate3d(0, 16px, 0); @@ -684,31 +701,51 @@ right: 0; } - .main-navigation__sub-item-link { + .main-navigation__sub-item-link, + .third-navigation-level .main-navigation__sub-item-link { padding-left: 20px; } + //Third navigation level + .main-navigation__sub-item-list.third-navigation-level { + top: -3px; + } } @media (min-width: 992px) { // Submenu by hover (devices without touch screen) - .no-touch .main-navigation__item._sub:hover .main-navigation__sub-item-list{ + .no-touch .main-navigation__sub-item._sub:hover > .main-navigation__sub-item-list, + .no-touch .main-navigation__item._sub:hover > .main-navigation__sub-item-list{ visibility: visible; opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } - .no-touch ._sub .main-navigation__item-link:after{ + + // Dropdown arrow + .no-touch ._sub > .main-navigation__item-link:after { .icons(); // content: "\e10f"; - padding-left: 5px; + padding-left: 3px; position: relative; font-size: 15px; - top: 0; + top: 2px; color: @nav-link-arrow-color; } + // Third menu arrow right + .no-touch ._sub > .main-navigation__sub-item-link:after { + .icons(); + content: "\e675"; + padding-left: 3px; + position: relative; + font-size: 15px; + top: 6px; + color: @nav-link-arrow-color; + float: right; + } + // Submenu by click (Tablet) .touch .main-navigation__item._sub .main-navigation__item-link { display: block; @@ -724,7 +761,8 @@ border: none; } - .touch .main-navigation__item._sub._open-tablet-dropdown .main-navigation__sub-item-list{ + .touch .main-navigation__sub-item._sub._open-tablet-dropdown > .main-navigation__sub-item-list, + .touch .main-navigation__item._sub._open-tablet-dropdown > .main-navigation__sub-item-list{ visibility: visible; opacity: 1; -webkit-transform: translate3d(0, 0, 0); @@ -752,7 +790,16 @@ height: auto; } - .touch .main-navigation__item._sub._open-tablet-dropdown .main-navigation__open-sub-menu-link:before { + .touch .second-navigation-level ._sub > .main-navigation__open-sub-menu-link:before { + line-height: 46px; + } + + .touch .main-navigation__item._sub._open-tablet-dropdown > .main-navigation__open-sub-menu-link:before { + -webkit-transform: rotate(135deg); + transform: rotate(135deg); + } + + .touch .second-navigation-level ._sub._open-tablet-dropdown > .main-navigation__open-sub-menu-link:before { -webkit-transform: rotate(135deg); transform: rotate(135deg); } diff --git a/dev/templates/layouts/default.hbs b/dev/templates/layouts/default.hbs index 6b9713f..c3bfd11 100644 --- a/dev/templates/layouts/default.hbs +++ b/dev/templates/layouts/default.hbs @@ -21,6 +21,7 @@ showMainNavSearch="false" navDropdown="true" + navThirdLevel="false" }} diff --git a/dev/templates/parts/nav/nav.hbs b/dev/templates/parts/nav/nav.hbs index 50b81a5..1bf2555 100644 --- a/dev/templates/parts/nav/nav.hbs +++ b/dev/templates/parts/nav/nav.hbs @@ -43,12 +43,12 @@ {{~/is~}} Open -