From 4e985cabe6b239094c24a6757368dd5fb4194bc4 Mon Sep 17 00:00:00 2001 From: Yos Date: Wed, 1 Feb 2017 10:53:40 +0700 Subject: [PATCH 1/2] [FEATURE] alternative designs for language menu (Podio feature_82) * [FEATURE] dropdown and fixed language menu css and javascript --- main.js | 28 +++++++++ main.less | 184 +++++++++++++++++++++++++++++++++++++++++++++++++++--- 2 files changed, 205 insertions(+), 7 deletions(-) diff --git a/main.js b/main.js index 5053846..9529f65 100644 --- a/main.js +++ b/main.js @@ -86,6 +86,10 @@ 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'); @@ -97,6 +101,30 @@ jQuery(function($) { // detect if we cross 992px window width. window.matchMedia('(min-width: 992px)').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(300); + }); + + var cleanupLanguageMenu = function() { + if (window.matchMedia('(min-width: 450px)').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 450px window width. + window.matchMedia('(min-width: 450px)').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 From cd6a71ca1414b188d68f7e7e055077e7b61e5492 Mon Sep 17 00:00:00 2001 From: Yos Date: Fri, 10 Feb 2017 11:45:11 +0700 Subject: [PATCH 2/2] [REFACTOR] use variables for common settings --- main.js | 25 ++++++++++++++----------- 1 file changed, 14 insertions(+), 11 deletions(-) diff --git a/main.js b/main.js index 9529f65..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 { @@ -94,13 +97,13 @@ jQuery(function($) { 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) { @@ -110,11 +113,11 @@ jQuery(function($) { // toggle language menu (dropdown) $('.js__language-navigation__toggle-btn').on('click', function(e) { e.preventDefault(); - $('.js__language-navigation__items-wrp').not(':animated').slideToggle(300); + $('.js__language-navigation__items-wrp').not(':animated').slideToggle($menuAnimationSpeed); }); var cleanupLanguageMenu = function() { - if (window.matchMedia('(min-width: 450px)').matches) { + 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 { @@ -123,8 +126,8 @@ jQuery(function($) { } }; - // detect if we cross 450px window width. - window.matchMedia('(min-width: 450px)').addListener(cleanupLanguageMenu); + // detect if we cross the small screen width. + window.matchMedia('(min-width: ' + $smallScreenWidth + ')').addListener(cleanupLanguageMenu); }); // ====== class fo fixed main navigation bar =======