//if you change this breakpoint in the style.css file (or _layout.scss if you use SASS), don't forget to update this value as well
var MqL = 1170;
//move nav element position according to window width
moveNavigation();
$(window).on('resize', function(){
(!window.requestAnimationFrame) ? setTimeout(moveNavigation, 300) : window.requestAnimationFrame(moveNavigation);
});
//mobile - open lateral menu clicking on the menu icon
$('.cd-nav-trigger').on('click', function(event){
event.preventDefault();
if( $('.cd-main-content').hasClass('nav-is-visible') ) {
closeNav();
$('.cd-overlay').removeClass('is-visible');
} else {
$(this).addClass('nav-is-visible');
$('.cd-primary-nav').addClass('nav-is-visible');
$('.cd-main-header').addClass('nav-is-visible');
$('.cd-main-content').addClass('nav-is-visible').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
$('body').addClass('overflow-hidden');
});
toggleSearch('close');
$('.cd-overlay').addClass('is-visible');
}
});
//open search form
$('.cd-search-trigger').on('click', function(event){
event.preventDefault();
toggleSearch();
closeNav();
});
//close lateral menu on mobile
$('.cd-overlay').on('swiperight', function(){
if($('.cd-primary-nav').hasClass('nav-is-visible')) {
closeNav();
$('.cd-overlay').removeClass('is-visible');
}
});
$('.nav-on-left .cd-overlay').on('swipeleft', function(){
if($('.cd-primary-nav').hasClass('nav-is-visible')) {
closeNav();
$('.cd-overlay').removeClass('is-visible');
}
});
$('.cd-overlay').on('click', function(){
closeNav();
toggleSearch('close')
$('.cd-overlay').removeClass('is-visible');
});
//prevent default clicking on direct children of .cd-primary-nav
$('.cd-primary-nav').children('.has-children').children('a').on('click', function(event){
event.preventDefault();
});
//open submenu
$('.has-children').children('a').on('click', function(event){
if( !checkWindowWidth() ) event.preventDefault();
var selected = $(this);
if( selected.next('ul').hasClass('is-hidden') ) {
//desktop version only
selected.addClass('selected').next('ul').removeClass('is-hidden').end().parent('.has-children').parent('ul').addClass('moves-out');
selected.parent('.has-children').siblings('.has-children').children('ul').addClass('is-hidden').end().children('a').removeClass('selected');
$('.cd-overlay').addClass('is-visible');
} else {
selected.removeClass('selected').next('ul').addClass('is-hidden').end().parent('.has-children').parent('ul').removeClass('moves-out');
$('.cd-overlay').removeClass('is-visible');
}
toggleSearch('close');
});
//submenu items - go back link
$('.go-back').on('click', function(){
$(this).parent('ul').addClass('is-hidden').parent('.has-children').parent('ul').removeClass('moves-out');
});
function closeNav() {
$('.cd-nav-trigger').removeClass('nav-is-visible');
$('.cd-main-header').removeClass('nav-is-visible');
$('.cd-primary-nav').removeClass('nav-is-visible');
$('.has-children ul').addClass('is-hidden');
$('.has-children a').removeClass('selected');
$('.moves-out').removeClass('moves-out');
$('.cd-main-content').removeClass('nav-is-visible').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
$('body').removeClass('overflow-hidden');
});
}
function toggleSearch(type) {
if(type=="close") {
//close serach
$('.cd-search').removeClass('is-visible');
$('.cd-search-trigger').removeClass('search-is-visible');
$('.cd-overlay').removeClass('search-is-visible');
} else {
//toggle search visibility
$('.cd-search').toggleClass('is-visible');
$('.cd-search-trigger').toggleClass('search-is-visible');
$('.cd-overlay').toggleClass('search-is-visible');
if($(window).width() > MqL && $('.cd-search').hasClass('is-visible')) $('.cd-search').find('input[type="search"]').focus();
($('.cd-search').hasClass('is-visible')) ? $('.cd-overlay').addClass('is-visible') : $('.cd-overlay').removeClass('is-visible') ;
}
}
function checkWindowWidth() {
//check window width (scrollbar included)
var e = window,
a = 'inner';
if (!('innerWidth' in window )) {
a = 'client';
e = document.documentElement || document.body;
}
if ( e[ a+'Width' ] >= MqL ) {
return true;
} else {
return false;
}
}
function moveNavigation(){
var navigation = $('.cd-nav');
var desktop = checkWindowWidth();
if ( desktop ) {
navigation.detach();
navigation.insertBefore('.cd-header-buttons');
} else {
navigation.detach();
navigation.insertAfter('.cd-main-content');
}
}
<header class="cd-main-header">
<a class="cd-logo" href="#0"><img src="images/cd-logo.svg" alt="Logo"></a>
<ul class="cd-header-buttons">
<li><a class="cd-search-trigger" href="#cd-search">Search<span></span></a></li>
<li><a class="cd-nav-trigger" href="#cd-primary-nav">Menu<span></span></a></li>
</ul> <!-- cd-header-buttons -->
</header>
<main class="cd-main-content">
<!-- your content here -->
</main>
<div class="cd-overlay"></div>
<nav class="cd-nav">
<ul id="cd-primary-nav" class="cd-primary-nav is-fixed">
<li class="has-children">
<a href="http://codyhouse.co/?p=409">Clothing</a>
<ul class="cd-secondary-nav is-hidden">
<li class="go-back"><a href="#0">Menu</a></li>
<li class="see-all"><a href="http://codyhouse.co/?p=409">All Clothing</a></li>
<li class="has-children">
<a href="http://codyhouse.co/?p=409">Accessories</a>
<ul class="is-hidden">
<li class="go-back"><a href="#0">Clothing</a></li>
<li class="see-all"><a href="http://codyhouse.co/?p=409">All Accessories</a></li>
<li class="has-children">
<a href="#0">Beanies</a>
<ul class="is-hidden">
<li class="go-back"><a href="#0">Accessories</a></li>
<li class="see-all"><a href="http://codyhouse.co/?p=409">All Benies</a></li>
<li><a href="http://codyhouse.co/?p=409">Caps & Hats</a></li>
<li><a href="http://codyhouse.co/?p=409">Gifts</a></li>
<li><a href="http://codyhouse.co/?p=409">Scarves & Snoods</a></li>
</ul>
</li>
<li class="has-children">
<a href="#0">Caps & Hats</a>
<ul class="is-hidden">
<li class="go-back"><a href="#0">Accessories</a></li>
<li class="see-all"><a href="http://codyhouse.co/?p=409">All Caps & Hats</a></li>
<li><a href="http://codyhouse.co/?p=409">Beanies</a></li>
<li><a href="http://codyhouse.co/?p=409">Caps</a></li>
<li><a href="http://codyhouse.co/?p=409">Hats</a></li>
</ul>
</li>
<li><a href="http://codyhouse.co/?p=409">Glasses</a></li>
<li><a href="http://codyhouse.co/?p=409">Gloves</a></li>
<li><a href="http://codyhouse.co/?p=409">Jewellery</a></li>
<li><a href="http://codyhouse.co/?p=409">Scarves</a></li>
<li><a href="http://codyhouse.co/?p=409">Wallets</a></li>
<li><a href="http://codyhouse.co/?p=409">Watches</a></li>
</ul>
</li>
<li class="has-children">
<a href="http://codyhouse.co/?p=409">Bottoms</a>
<ul class="is-hidden">
<li class="go-back"><a href="#0">Clothing</a></li>
<li class="see-all"><a href="http://codyhouse.co/?p=409">All Bottoms</a></li>
<li><a href="http://codyhouse.co/?p=409">Casual Trousers</a></li>
<li class="has-children">
<a href="#0">Jeans</a>
<ul class="is-hidden">
<li class="go-back"><a href="#0">Bottoms</a></li>
<li class="see-all"><a href="http://codyhouse.co/?p=409">All Jeans</a></li>
<li><a href="http://codyhouse.co/?p=409">Ripped</a></li>
<li><a href="http://codyhouse.co/?p=409">Skinny</a></li>
<li><a href="http://codyhouse.co/?p=409">Slim</a></li>
<li><a href="http://codyhouse.co/?p=409">Straight</a></li>
</ul>
</li>
<li><a href="#0">Leggings</a></li>
<li><a href="#0">Shorts</a></li>
</ul>
</li>
<li class="has-children">
<a href="http://codyhouse.co/?p=409">Jackets</a>
<ul class="is-hidden">
<li class="go-back"><a href="#0">Clothing</a></li>
<li class="see-all"><a href="http://codyhouse.co/?p=409">All Jackets</a></li>
<li><a href="http://codyhouse.co/?p=409">Blazers</a></li>
<li><a href="http://codyhouse.co/?p=409">Bomber jackets</a></li>
<li><a href="http://codyhouse.co/?p=409">Denim Jackets</a></li>
<li><a href="http://codyhouse.co/?p=409">Duffle Coats</a></li>
<li><a href="http://codyhouse.co/?p=409">Leather Jackets</a></li>
<li><a href="http://codyhouse.co/?p=409">Parkas</a></li>
</ul>
</li>
<li class="has-children">
<a href="http://codyhouse.co/?p=409">Tops</a>
<ul class="is-hidden">
<li class="go-back"><a href="#0">Clothing</a></li>
<li class="see-all"><a href="http://codyhouse.co/?p=409">All Tops</a></li>
<li><a href="http://codyhouse.co/?p=409">Cardigans</a></li>
<li><a href="http://codyhouse.co/?p=409">Coats</a></li>
<li><a href="http://codyhouse.co/?p=409">Hoodies & Sweatshirts</a></li>
<li><a href="http://codyhouse.co/?p=409">Jumpers</a></li>
<li><a href="http://codyhouse.co/?p=409">Polo Shirts</a></li>
<li><a href="http://codyhouse.co/?p=409">Shirts</a></li>
<li class="has-children">
<a href="#0">T-Shirts</a>
<ul class="is-hidden">
<li class="go-back"><a href="#0">Tops</a></li>
<li class="see-all"><a href="http://codyhouse.co/?p=409">All T-shirts</a></li>
<li><a href="http://codyhouse.co/?p=409">Plain</a></li>
<li><a href="http://codyhouse.co/?p=409">Print</a></li>
<li><a href="http://codyhouse.co/?p=409">Striped</a></li>
<li><a href="http://codyhouse.co/?p=409">Long sleeved</a></li>
</ul>
</li>
<li><a href="http://codyhouse.co/?p=409">Vests</a></li>
</ul>
</li>
</ul>
</li>
<li class="has-children">
<a href="http://codyhouse.co/?p=409">Gallery</a>
<ul class="cd-nav-gallery is-hidden">
<li class="go-back"><a href="#0">Menu</a></li>
<li class="see-all"><a href="http://codyhouse.co/?p=409">Browse Gallery</a></li>
<li>
<a class="cd-nav-item" href="http://codyhouse.co/?p=409">
<img src="images/img.jpg" alt="Product Image">
<h3>Product #1</h3>
</a>
</li>
<li>
<a class="cd-nav-item" href="http://codyhouse.co/?p=409">
<img src="images/img.jpg" alt="Product Image">
<h3>Product #2</h3>
</a>
</li>
<li>
<a class="cd-nav-item" href="http://codyhouse.co/?p=409">
<img src="images/img.jpg" alt="Product Image">
<h3>Product #3</h3>
</a>
</li>
<li>
<a class="cd-nav-item" href="http://codyhouse.co/?p=409">
<img src="images/img.jpg" alt="Product Image">
<h3>Product #4</h3>
</a>
</li>
</ul>
</li>
<li class="has-children">
<a href="http://codyhouse.co/?p=409">Services</a>
<ul class="cd-nav-icons is-hidden">
<li class="go-back"><a href="#0">Menu</a></li>
<li class="see-all"><a href="http://codyhouse.co/?p=409">Browse Services</a></li>
<li>
<a class="cd-nav-item item-1" href="http://codyhouse.co/?p=409">
<h3>Service #1</h3>
<p>This is the item description</p>
</a>
</li>
<li>
<a class="cd-nav-item item-2" href="http://codyhouse.co/?p=409">
<h3>Service #2</h3>
<p>This is the item description</p>
</a>
</li>
<li>
<a class="cd-nav-item item-3" href="http://codyhouse.co/?p=409">
<h3>Service #3</h3>
<p>This is the item description</p>
</a>
</li>
<li>
<a class="cd-nav-item item-4" href="http://codyhouse.co/?p=409">
<h3>Service #4</h3>
<p>This is the item description</p>
</a>
</li>
<li>
<a class="cd-nav-item item-5" href="http://codyhouse.co/?p=409">
<h3>Service #5</h3>
<p>This is the item description</p>
</a>
</li>
<li>
<a class="cd-nav-item item-6" href="http://codyhouse.co/?p=409">
<h3>Service #6</h3>
<p>This is the item description</p>
</a>
</li>
<li>
<a class="cd-nav-item item-7" href="http://codyhouse.co/?p=409">
<h3>Service #7</h3>
<p>This is the item description</p>
</a>
</li>
<li>
<a class="cd-nav-item item-8" href="http://codyhouse.co/?p=409">
<h3>Service #8</h3>
<p>This is the item description</p>
</a>
</li>
</ul>
</li>
<li><a href="http://codyhouse.co/?p=409">Standard</a></li>
</ul> <!-- primary-nav -->
</nav> <!-- cd-nav -->
<div id="cd-search" class="cd-search">
<form>
<input type="search" placeholder="Search...">
</form>
</div>
