Created
February 5, 2018 19:43
-
-
Save rivaadara111/91168f9c8a3f5c25aca0c3a14e12832e to your computer and use it in GitHub Desktop.
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