Skip to content

Commit

Permalink
[FEATURE] Add third menu-level for main navigation
Browse files Browse the repository at this point in the history
  • Loading branch information
@dmh
dmh committed Jan 13, 2017
1 parent fc2413f commit ea0a18c
Show file tree
Hide file tree
Showing 4 changed files with 125 additions and 17 deletions.
49 changes: 43 additions & 6 deletions dev/js/main/header/header.js
View file
Expand Up @@ -12,31 +12,58 @@ 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) {
$('.js__navigation__items-wrp').show();
} 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');
Expand All @@ -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) {
Expand All @@ -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 =======
Expand Down
64 changes: 55 additions & 9 deletions dev/styles/main/header/header.less
View file
Expand Up @@ -555,18 +555,22 @@
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;
Expand All @@ -586,16 +590,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 {
Expand All @@ -620,6 +630,10 @@
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 {
Expand Down Expand Up @@ -667,6 +681,7 @@
display: none;
}

//Second navigation level
.main-navigation__sub-item-list {
position: absolute;
-webkit-transform: translate3d(0, 16px, 0);
Expand All @@ -686,22 +701,31 @@
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: 3px;
Expand All @@ -711,6 +735,18 @@
color: @nav-link-arrow-color;
}

// Third menu arrow right
.no-touch ._sub > .main-navigation__sub-item-link:after {
.icons();
content: "\e111";
padding-left: 3px;
position: relative;
font-size: 15px;
top: 2px;
color: @nav-link-arrow-color;
float: right;
}

// Submenu by click (Tablet)
.touch .main-navigation__item._sub .main-navigation__item-link {
display: block;
Expand All @@ -726,7 +762,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);
Expand Down Expand Up @@ -754,7 +791,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: 40px;
}

.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);
}
Expand Down
1 change: 1 addition & 0 deletions dev/templates/layouts/default.hbs
View file
Expand Up @@ -21,6 +21,7 @@

showMainNavSearch="false"
navDropdown="true"
navThirdLevel="false"
}}

<!-- pages -->
Expand Down
28 changes: 26 additions & 2 deletions dev/templates/parts/nav/nav.hbs
View file
Expand Up @@ -43,12 +43,12 @@
{{~/is~}}
<a href="{{basename}}.html" class="main-navigation__open-sub-menu-link js__main-navigation__open-sub-menu-link">Open</a>

<ul class="main-navigation__sub-item-list">
<ul class="main-navigation__sub-item-list {{#is ../../this.navThirdLevel 'true' }} second-navigation-level {{/is}} ">

{{!build sub menu level 2}}
{{!grunt/helpers/helper-submenu.js}}
{{~#subMenu ../../pages 2~}}
<li class="main-navigation__sub-item {{#if this.isCurrentPage}} _active{{/if}}
<li class="main-navigation__sub-item {{#if this.isCurrentPage}} _active{{/if}} {{#is ../../../this.navThirdLevel 'true' }}_sub {{/is}}
{{!add "active" class if some of children also active}}
{{! grunt/helpers/helper-ifChildrensActive_addClass.js}}
{{~#ifChildrensActive_addClass ../../../pages ~}}
Expand All @@ -59,6 +59,30 @@
{{~else~}}
<a class="main-navigation__sub-item-link" href="{{data.externalLink}}">{{data.title}}</a>
{{~/is~}}

{{!@TODO need some more conditions here to check for subpages}}
{{#is ../../../this.navThirdLevel 'true' }}
<a href="{{basename}}.html" class="main-navigation__open-sub-menu-link js__main-navigation__open-third-menu-link">Open</a>

<ul class="main-navigation__sub-item-list third-navigation-level">
{{!build sub menu level 3}}
{{!grunt/helpers/helper-submenu.js}}
{{~#subMenu ../../../../pages 3~}}
<li class="main-navigation__sub-item {{#if this.isCurrentPage}} _active{{/if}}
{{!add "active" class if some of children also active}}
{{! grunt/helpers/helper-ifChildrensActive_addClass.js}}
{{~#ifChildrensActive_addClass ../../../../../pages ~}}
_active
{{~/ifChildrensActive_addClass~}}">
{{~#is data.externalLink false~}}
<a class="main-navigation__sub-item-link" href="{{basename}}.html">{{data.title}}</a>
{{~else~}}
<a class="main-navigation__sub-item-link" href="{{data.externalLink}}">{{data.title}}</a>
{{~/is~}}
</li>
{{~/subMenu~}}
</ul>
{{~/is~}}
</li>
{{~/subMenu~}}

Expand Down

0 comments on commit ea0a18c

Please sign in to comment.