From e594088f1815bb14d4660a046c060c19d0209640 Mon Sep 17 00:00:00 2001 From: dmh Date: Wed, 28 Sep 2016 19:04:06 +0300 Subject: [PATCH] [FEATURE] DropdownMenu with columns --- dev/js/main/header/header.js | 48 +++-- dev/styles/main.less | 1 + .../main/nav/dropdownMenuWithColumns.less | 117 ++++++++++++ dev/templates/parts/header/header.hbs | 4 +- .../parts/nav/dropdownMenuWithColumns.hbs | 171 ++++++++++++++++++ dev/templates/parts/nav/nav.hbs | 12 ++ 6 files changed, 334 insertions(+), 19 deletions(-) create mode 100644 dev/styles/main/nav/dropdownMenuWithColumns.less create mode 100644 dev/templates/parts/nav/dropdownMenuWithColumns.hbs diff --git a/dev/js/main/header/header.js b/dev/js/main/header/header.js index 6ff296c..2e7d327 100644 --- a/dev/js/main/header/header.js +++ b/dev/js/main/header/header.js @@ -3,6 +3,7 @@ /*global touchSupport*/ /*global isAndroid*/ +///*global isIOS*/ // ================================= jQuery(function($) { @@ -12,6 +13,14 @@ jQuery(function($) { 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 $dropdownMenuWithColumns = $('.js__dropdown-menu-with-columns .js__main-navigation__item._sub'); + if (!touchSupport) { + $dropdownMenuWithColumns.hover(function() { + $(this).toggleClass('open'); + }); + } + // Cleanup function to clean unneeded classes var cleanup = function cleanup() { if ($mainNavigationItemsList.hasClass('_open-mobile-dropdown')) { @@ -38,11 +47,11 @@ jQuery(function($) { e.preventDefault(); // if (touchSupport && $(window).width() > 992) { if ($(window).width() > 992) { - $mainNavigationItemsList.not($(this).parent()).removeClass('_open-tablet-dropdown'); - $(this).parent('.main-navigation__item').toggleClass('_open-tablet-dropdown'); + $mainNavigationItemsList.not($(this).parents()).removeClass('_open-tablet-dropdown'); + $(this).parents('.main-navigation__item').toggleClass('_open-tablet-dropdown'); } if ($(window).width() < 992) { - $(this).parent('.main-navigation__item').toggleClass('_open-mobile-dropdown'); + $(this).parents('.main-navigation__item').toggleClass('_open-mobile-dropdown'); } }); @@ -67,21 +76,24 @@ jQuery(function($) { // ====== class fo fixed main navigation bar ======= jQuery(function($) { var navbar = $('.js__main-navigation'); - var offsetTop = navbar.offset().top; - $(window).on('orientationchange',function() { - if ($(window).width() > 992 && touchSupport) { - var navbarPos = navbar.css('position'); - offsetTop = $('header').height() - (navbarPos === 'fixed' ? 0 : navbar.outerHeight()); - } - }); - $(window).on('load scroll', function() { - var scrollPos = $(window).scrollTop(); - if (scrollPos > offsetTop) { - $('body:not(.main-navigation-fixed)').addClass('main-navigation-fixed'); - } else { - $('body.main-navigation-fixed').removeClass('main-navigation-fixed'); - } - }); + + if (navbar.length) { + var offsetTop = navbar.offset().top; + $(window).on('orientationchange',function() { + if ($(window).width() > 992 && touchSupport) { + var navbarPos = navbar.css('position'); + offsetTop = $('header').height() - (navbarPos === 'fixed' ? 0 : navbar.outerHeight()); + } + }); + $(window).on('load scroll', function() { + var scrollPos = $(window).scrollTop(); + if (scrollPos > offsetTop) { + $('body:not(.main-navigation-fixed)').addClass('main-navigation-fixed'); + } else { + $('body.main-navigation-fixed').removeClass('main-navigation-fixed'); + } + }); + } }); jQuery(function($) { diff --git a/dev/styles/main.less b/dev/styles/main.less index 98dfefa..0680d98 100644 --- a/dev/styles/main.less +++ b/dev/styles/main.less @@ -65,6 +65,7 @@ @import "main/nav/breadcrumbs.less"; @import "main/nav/subNavigation.less"; +@import "main/nav/dropdownMenuWithColumns.less"; // print styles @import "main/print.less"; diff --git a/dev/styles/main/nav/dropdownMenuWithColumns.less b/dev/styles/main/nav/dropdownMenuWithColumns.less new file mode 100644 index 0000000..2112a1b --- /dev/null +++ b/dev/styles/main/nav/dropdownMenuWithColumns.less @@ -0,0 +1,117 @@ +._dropdown-menu-with-columns .main-navigation__sub-item-column-list { + list-style: none; + padding: 0; +} +._dropdown-menu-with-columns .main-navigation__sub-item-link._sub-level-3._sub{ + font-weight: 700; + +} +._dropdown-menu-with-columns .main-navigation__sub-item-link._sub-level-2{ + text-transform: uppercase; + font-size: 14px; + font-weight: 700; + margin-top: 20px; +} +._dropdown-menu-with-columns .main-navigation__sub-item-link._sub-level-3{ + padding-left: 35px; +} +._dropdown-menu-with-columns .main-navigation__sub-item-link._sub-level-3._current{ + color: @nav-link-active-color; + padding-left: 35px; +} +._dropdown-menu-with-columns .main-navigation__sub-item-link._sub-level-3:before { + .icons(); + content: "\e675"; + font-size: 12px; + position: absolute; + left: 32px; + margin-top: 5px; +} + +.touch ._dropdown-menu-with-columns .main-navigation__sub-item-link:hover, +.touch ._dropdown-menu-with-columns .main-navigation__sub-item-link:focus { + color: fade(@nav-link-hover-color, 60%); +} + + + +@media (min-width: 992px){ + ._dropdown-menu-with-columns .main-navigation__sub-item-list{ + border-top: 2px solid @header-border-color; + padding-bottom: 30px; + } + + ._dropdown-menu-with-columns .main-navigation__item { + position: static; + } + ._dropdown-menu-with-columns .main-navigation__items-wrp{ + position: static; + } + + + ._dropdown-menu-with-columns .main-navigation__item._sub > .main-navigation__item-link{ + position: relative; + } + ._dropdown-menu-with-columns .main-navigation__item._sub.open > .main-navigation__item-link{ + background: @nav-link-hover-background; + } + ._dropdown-menu-with-columns .main-navigation__item._sub.open > .main-navigation__item-link:before{ + content: ''; + position: absolute; + top: 52px; + left: 50%; + margin-left: -8px; + width: 0; + height: 0; + border-bottom: solid 8px; + border-bottom-color: @main-body-bg; + border-left: solid 8px transparent; + border-right: solid 8px transparent; + z-index: 1; + } + + // tablet css styling + ._dropdown-menu-with-columns .tablet-arrow { + position: relative; + } + .touch ._dropdown-menu-with-columns .tablet-arrow .main-navigation__open-sub-menu-link { + top: -@nav-height; + height: @nav-height; + } + + .touch ._dropdown-menu-with-columns .main-navigation__item._sub._open-tablet-dropdown > .main-navigation__item-link{ + background: @nav-link-hover-background; + } + .touch ._dropdown-menu-with-columns .main-navigation__item._sub._open-tablet-dropdown .main-navigation__open-sub-menu-link{ + background: @nav-link-hover-background; + } + .touch ._dropdown-menu-with-columns .main-navigation__item._sub._open-tablet-dropdown > .main-navigation__item-link:before{ + content: ''; + position: absolute; + top: 52px; + left: 50%; + margin-left: -8px; + width: 0; + height: 0; + border-bottom: solid 8px; + border-bottom-color: @main-body-bg; + border-left: solid 8px transparent; + border-right: solid 8px transparent; + z-index: 1; + } + +} + +@media (max-width: 991px){ + ._dropdown-menu-with-columns .main-navigation__sub-item-list{ + background: darken(@nav-background-color, 3%); + } + ._dropdown-menu-with-columns .main-navigation__sub-item-list .container{ + padding: 0; + width: 100%; + } + + ._dropdown-menu-with-columns .main-navigation__sub-item-link._sub-level-2{ + padding-left: 18px; + } +} diff --git a/dev/templates/parts/header/header.hbs b/dev/templates/parts/header/header.hbs index 4df54bb..9c69003 100644 --- a/dev/templates/parts/header/header.hbs +++ b/dev/templates/parts/header/header.hbs @@ -95,7 +95,9 @@ {{/is}} -{{>nav}} +{{>nav + dropdownMenuWithColumns = false +}}
diff --git a/dev/templates/parts/nav/dropdownMenuWithColumns.hbs b/dev/templates/parts/nav/dropdownMenuWithColumns.hbs new file mode 100644 index 0000000..8dbc994 --- /dev/null +++ b/dev/templates/parts/nav/dropdownMenuWithColumns.hbs @@ -0,0 +1,171 @@ +
  • + Home +
    • +
  • + Content +
    + Open +
    +
    +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    +
    +
    • +
  • + Community +
    + Open +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    • +
  • + Documentation +
    + Open +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    • +
  • + Demo +
    • +
  • + Customizer +
    • diff --git a/dev/templates/parts/nav/nav.hbs b/dev/templates/parts/nav/nav.hbs index abcc20c..50b81a5 100644 --- a/dev/templates/parts/nav/nav.hbs +++ b/dev/templates/parts/nav/nav.hbs @@ -4,6 +4,17 @@ {{/is}} +{{#if this.dropdownMenuWithColumns}} + + +{{else}} + +{{/if}}