Created
April 3, 2018 18:06
-
-
Save rivaadara111/9423d077c4ce658519b17c018207865a to your computer and use it in GitHub Desktop.
Script that takes care of the primary dropdowns on the main header nav.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(function($, window, document) { | |
function toggleMenus() { | |
$('.reveal_js--trigger[data-target="drop1"][data-action="toggle"]').on('click', function(e) { | |
var clicked_obj = $(this), | |
target = clicked_obj.data('target'), | |
target_obj = $('.reveal_js--content[data-content="' + target + '"]'), | |
header_obj = $('#header'), | |
body_element = $('body'), | |
window_element = $(window), | |
window_top = window_element.scrollTop(), | |
body_top = parseInt(body_element.css('top'), 10), | |
pos = body_top * -1; | |
e.preventDefault(); | |
if (header_obj.hasClass('stuck')) { | |
header_obj.addClass('active'); | |
target_obj.addClass('stuck'); | |
} | |
else if (!header_obj.hasClass('stuck')) { | |
target_obj.removeClass('stuck'); | |
} | |
// Close all open menus & reset icons | |
$('.reveal_js--content:not([data-content="' + target + '"])').addClass('closed'); | |
$('.reveal_js--content[data-content="see_more"]').removeClass('drop_transition3'); | |
$('.reveal_js--trigger:not([data-target="' + target + '"]).icon--close').removeClass('icon--close'); | |
//open the menu | |
if (target_obj.hasClass('closed')){ | |
clicked_obj.addClass('icon--close'); | |
target_obj.removeClass('closed'); | |
if(header_obj.hasClass('stuck')){ | |
target_obj.css('top', header_obj.height() - 58); | |
} | |
else if (!window_element.scrollTop()){ | |
target_obj.css('top', ($('#banner').height() - $(window).scrollTop()) + ($('#header--primary').height() - 17)); // This is only done to handle when an ad is displayed. The position of the search menu when the menu is stuck, is all done in CSS. | |
} | |
else { | |
target_obj.css('top', header_obj.offset().top + $('#header--primary').height() - 20); | |
} | |
if (!body_element.hasClass('menu--open')) { | |
body_element.addClass('menu--open'); | |
body_element.css('top', -window_top); | |
} | |
//close the menu; | |
} else { | |
target_obj.addClass('closed'); | |
clicked_obj.removeClass('icon--close'); | |
if (body_element.hasClass('menu--open')) { | |
body_element.removeClass('menu--open'); | |
window_element.scrollTop(pos); | |
body_element.css('top', 'auto'); | |
} | |
} | |
}); | |
// Guides Menu | |
$('.reveal_js--trigger[data-target="drop2"][data-action="toggle"]').on('click', function(e) { | |
var clicked_obj = $(this), | |
target = clicked_obj.data('target'), | |
target_obj = $('.reveal_js--content[data-content="' + target + '"]'), | |
guides_icon = $('.guides span'), | |
header_obj = $('#header'), | |
body_element = $('body'), | |
window_element = $(window), | |
window_top = window_element.scrollTop(), | |
body_top = parseInt(body_element.css('top'), 10), | |
pos = body_top * -1; | |
e.preventDefault(); | |
if (header_obj.hasClass('stuck')) { | |
header_obj.addClass('active'); | |
target_obj.addClass('stuck'); | |
} | |
else if (!header_obj.hasClass('stuck')) { | |
target_obj.removeClass('stuck'); | |
} | |
// Close all open menus & revert icons to arrow & remove top value | |
$('.reveal_js--content:not([data-content="' + target + '"])').addClass('closed'); | |
$('.reveal_js--content[data-target="see_more"]').removeClass('drop_transition3'); | |
$('.reveal_js--trigger:not([data-target="' + target + '"]).icon--close').removeClass('icon--close'); | |
//open menu | |
if (target_obj.hasClass('closed')){ | |
clicked_obj.addClass('icon--close'); | |
target_obj.removeClass('closed'); | |
if(header_obj.hasClass('stuck')){ | |
target_obj.css('top', header_obj.height() - 58); | |
} | |
else if (!window_element.scrollTop()){ | |
target_obj.css('top', ($('#banner').height() - $(window).scrollTop()) + ($('#header--primary').height() - 17)); // This is only done to handle when an ad is displayed. The position of the search menu when the menu is stuck, is all done in CSS. | |
} | |
else { | |
target_obj.css('top', header_obj.offset().top + $('#header--primary').height() - 20); | |
} | |
if (!body_element.hasClass('menu--open')) { | |
body_element.addClass('menu--open'); | |
body_element.css('top', -window_top); | |
} | |
//close the menu; | |
} else { | |
target_obj.addClass('closed'); | |
clicked_obj.removeClass('icon--close'); | |
if (body_element.hasClass('menu--open')) { | |
body_element.removeClass('menu--open'); | |
window_element.scrollTop(pos); | |
body_element.css('top', 'auto'); | |
} | |
} | |
}); | |
// Secondary Menu, More | |
$('.reveal_js--trigger[data-target="see_more"][data-action="toggle"]').on('click', function(e) { | |
var clicked_obj = $(this), | |
target = $(this).data('target'), | |
target_obj = $('.reveal_js--content[data-content="' + target + '"]'), | |
body_element = $('body'), | |
window_element = $(window), | |
window_top = window_element.scrollTop(), | |
more_icon = $('.open-more span'); | |
e.preventDefault(); | |
// Close all open menus & revert icons to arrow & remove top CSS so it can be applied to this div | |
$('.reveal_js--content:not([data-content="' + target + '"])').addClass('closed'); | |
$('.reveal_js--trigger:not([data-target="' + target + '"])').removeClass('icon--close'); | |
//open the menu | |
if (!target_obj.hasClass('drop_transition3')) { | |
target_obj.removeClass('closed').addClass('drop_transition3'); | |
clicked_obj.addClass('icon--close'); | |
if (body_element.hasClass('menu--open')) { | |
body_element.removeClass('menu--open').css('top', -window_top); | |
} | |
//close the menu | |
} else { | |
target_obj.removeClass('drop_transition3').addClass('closed'); | |
clicked_obj.removeClass('icon--close'); | |
} | |
}); | |
} | |
toggleMenus(); | |
})(jQuery, this, this.document); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment