Skip to content

Commit

Permalink
[FEATURE] DropdownMenu with columns
Browse files Browse the repository at this point in the history
  • Loading branch information
@dmh
dmh committed Sep 28, 2016
1 parent 4941517 commit e594088
Show file tree
Hide file tree
Showing 6 changed files with 334 additions and 19 deletions.
48 changes: 30 additions & 18 deletions dev/js/main/header/header.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@

/*global touchSupport*/
/*global isAndroid*/
///*global isIOS*/
// =================================

jQuery(function($) {
Expand All @@ -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')) {
Expand All @@ -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');
}
});

Expand All @@ -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($) {
Expand Down
1 change: 1 addition & 0 deletions dev/styles/main.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down
117 changes: 117 additions & 0 deletions dev/styles/main/nav/dropdownMenuWithColumns.less
View file
Original file line number Diff line number Diff line change
@@ -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;
}
}
4 changes: 3 additions & 1 deletion dev/templates/parts/header/header.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,9 @@
</div>
{{/is}}

{{>nav}}
{{>nav
dropdownMenuWithColumns = false
}}

<div class="main-navigation__search-box-overlay js__main-navigation__search-box-overlay"></div>
<div class="header-top__language-menu-overlay js__header-top__language-menu-overlay"></div>
Expand Down
171 changes: 171 additions & 0 deletions dev/templates/parts/nav/dropdownMenuWithColumns.hbs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,171 @@
<li class="main-navigation__item js__main-navigation__item uid-2 point-1 first">
<a href="/" class="main-navigation__item-link js__main-navigation__item-link">Home</a>
</li>
<li class="main-navigation__item js__main-navigation__item _active _sub uid-21 point-2 middle">
<a href="/content/" class="main-navigation__item-link js__main-navigation__item-link">Content</a>
<div class="tablet-arrow">
<a href="#" class="main-navigation__open-sub-menu-link js__main-navigation__open-sub-menu-link">Open</a>
</div>
<div class="main-navigation__sub-item-list">
<div class="container">
<div class="row">
<div class="col-md-3">
<ul class="main-navigation__sub-item-column-list ">
<li class="main-navigation__sub-item uid-3 _active point-1 first">
<a href="/content/typical-page-content/headers/" class="main-navigation__sub-item-link _active _sub _sub-level-2">Typical page content</a>
<ul class="main-navigation__sub-item-column-list _sub">
<li class="main-navigation__sub-item uid-15 _current point-1 first">
<a href="/content/typical-page-content/headers/" class="main-navigation__sub-item-link _current _sub-level-3">Headers</a>
</li>
<li class="main-navigation__sub-item uid-16 point-2 middle">
<a href="/content/typical-page-content/text-media/" class="main-navigation__sub-item-link _sub-level-3">Text &amp; Media</a>
</li>
<li class="main-navigation__sub-item uid-17 point-3 middle">
<a href="/content/typical-page-content/bulletlist/" class="main-navigation__sub-item-link _sub-level-3">Bulletlist</a>
</li>
<li class="main-navigation__sub-item uid-14 point-4 middle">
<a href="/content/typical-page-content/tables/" class="main-navigation__sub-item-link _sub-level-3">Tables</a>
</li>
<li class="main-navigation__sub-item uid-18 point-5 last">
<a href="/content/typical-page-content/file-links/" class="main-navigation__sub-item-link _sub-level-3">File Links</a>
</li>
</ul>
</li>
<li class="main-navigation__sub-item uid-20 point-2 middle">
<a href="/content/special-elements/special-menus/" class="main-navigation__sub-item-link _sub _sub-level-2">Special Elements</a>
<ul class="main-navigation__sub-item-column-list _sub">
<li class="main-navigation__sub-item uid-19 point-1 last">
<a href="/content/special-elements/special-menus/" class="main-navigation__sub-item-link _sub-level-3">Special Menus</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="col-md-3">
<ul class="main-navigation__sub-item-column-list ">
<li class="main-navigation__sub-item uid-24 point-4 middle">
<a href="/content/form-elements/login-form/" class="main-navigation__sub-item-link _sub _sub-level-2">Form Elements</a>
<ul class="main-navigation__sub-item-column-list _sub">
<li class="main-navigation__sub-item uid-25 point-1 first">
<a href="/content/form-elements/login-form/" class="main-navigation__sub-item-link _sub-level-3">Login form</a>
</li>
<li class="main-navigation__sub-item uid-27 point-2 last">
<a href="/content/form-elements/mail-form/" class="main-navigation__sub-item-link _sub-level-3">Mail form</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="col-md-3">
<ul class="main-navigation__sub-item-column-list ">
<li class="main-navigation__sub-item uid-5 point-6 middle">
<a href="/content/plugins/" class="main-navigation__sub-item-link _sub _sub-level-2">Plugins</a>
<ul class="main-navigation__sub-item-column-list _sub">
<li class="main-navigation__sub-item uid-43 point-1 first">
<a href="/content/plugins/news/" class="main-navigation__sub-item-link _sub _sub-level-3">News</a>
</li>
<li class="main-navigation__sub-item uid-69 point-2 middle">
<a href="/content/plugins/google-map/" class="main-navigation__sub-item-link _sub-level-3">Google Map</a>
</li>
<li class="main-navigation__sub-item uid-71 point-3 last">
<a href="/content/plugins/solr/" class="main-navigation__sub-item-link _sub-level-3">Solr</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="col-md-3">
<ul class="main-navigation__sub-item-column-list ">
<li class="main-navigation__sub-item uid-4 point-8 last">
<a href="/content/content-elements/accordion/" class="main-navigation__sub-item-link _sub _sub-level-2">Content Elements</a>
<ul class="main-navigation__sub-item-column-list _sub">
<li class="main-navigation__sub-item uid-32 point-1 first">
<a href="/content/content-elements/accordion/" class="main-navigation__sub-item-link _sub-level-3">Accordion</a>
</li>
<li class="main-navigation__sub-item uid-13 point-2 middle">
<a href="/content/content-elements/bigicontextbutton/" class="main-navigation__sub-item-link _sub-level-3">BigIconTextButton</a>
</li>
<li class="main-navigation__sub-item uid-28 point-3 middle">
<a href="/content/content-elements/icontextbutton/" class="main-navigation__sub-item-link _sub-level-3">IconTextButton</a>
</li>
<li class="main-navigation__sub-item uid-29 point-4 middle">
<a href="/content/content-elements/imagetextlink/" class="main-navigation__sub-item-link _sub-level-3">ImageTextLink</a>
</li>
<li class="main-navigation__sub-item uid-30 point-5 middle">
<a href="/content/content-elements/logocarousel/" class="main-navigation__sub-item-link _sub-level-3">LogoCarousel</a>
</li>
<li class="main-navigation__sub-item uid-12 point-6 middle">
<a href="/content/content-elements/quote/" class="main-navigation__sub-item-link _sub-level-3">Quote</a>
</li>
<li class="main-navigation__sub-item uid-10 point-7 middle">
<a href="/content/content-elements/slider/" class="main-navigation__sub-item-link _sub-level-3">Slider</a>
</li>
<li class="main-navigation__sub-item uid-31 point-8 middle">
<a href="/content/content-elements/tabs/" class="main-navigation__sub-item-link _sub-level-3">Tabs</a>
</li>
<li class="main-navigation__sub-item uid-79 point-9 middle">
<a href="/content/content-elements/fullwidthimage/" class="main-navigation__sub-item-link _sub-level-3">FullWidthImage</a>
</li>
<li class="main-navigation__sub-item uid-80 point-10 middle">
<a href="/content/content-elements/responsivevideo/" class="main-navigation__sub-item-link _sub-level-3">ResponsiveVideo</a>
</li>
<li class="main-navigation__sub-item uid-97 point-11 last">
<a href="/content/content-elements/navigation-level-3/" class="main-navigation__sub-item-link _sub _sub-level-3">Navigation Level 3</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="main-navigation__item js__main-navigation__item _sub uid-45 point-3 middle">
<a href="/community/t3kit-on-github/" class="main-navigation__item-link js__main-navigation__item-link ">Community</a>
<div class="tablet-arrow">
<a href="#" class="main-navigation__open-sub-menu-link js__main-navigation__open-sub-menu-link">Open</a>
</div>
<div class="main-navigation__sub-item-list">
<div class="container">
<div class="row">
<div class="col-md-3">
<ul class="main-navigation__sub-item-column-list ">
<li class="main-navigation__sub-item uid-46 point-1 last">
<a href="https://github.com/t3kit" class="main-navigation__sub-item-link _sub-level-2">t3kit on Github</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="main-navigation__item js__main-navigation__item _sub uid-47 point-4 middle">
<a href="/documentation/" class="main-navigation__item-link js__main-navigation__item-link">Documentation</a>
<div class="tablet-arrow">
<a href="#" class="main-navigation__open-sub-menu-link js__main-navigation__open-sub-menu-link">Open</a>
</div>
<div class="main-navigation__sub-item-list">
<div class="container">
<div class="row">
<div class="col-md-3">
<ul class="main-navigation__sub-item-column-list ">
<li class="main-navigation__sub-item uid-73 point-1 last">
<a href="/documentation/content-elements/" class="main-navigation__sub-item-link _sub _sub-level-2">Content Elements</a>
<ul class="main-navigation__sub-item-column-list _sub">
<li class="main-navigation__sub-item uid-72 point-1 last">
<a href="/documentation/content-elements/wrapper/" class="main-navigation__sub-item-link _sub-level-3">Wrapper</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="main-navigation__item js__main-navigation__item uid-48 point-5 middle">
<a href="http://demo.t3kit.com" class="main-navigation__item-link js__main-navigation__item-link">Demo</a>
</li>
<li class="main-navigation__item js__main-navigation__item uid-59 point-6 last">
<a href="http://t3kit.github.io/theme_t3kit_customizer" class="main-navigation__item-link js__main-navigation__item-link">Customizer</a>
</li>
Loading

0 comments on commit e594088

Please sign in to comment.