Looking to add some jQuery functionality to my navigation menu in order to have the page wrapper fade in and out when a main nav link is clicked. While the code itself is functioning properly, I am encountering a couple of issues:
- There is a brief flash at the beginning where it seems like everything is loading, then being removed, before fading back in (potentially related to CSS).
- The links seem to be broken. For example, clicking on "contact" does not direct to www.domain.com/contact but instead goes to www.domain.com/undefined
Any assistance would be greatly appreciated. Thank you!
JavaScript Code
$(document).ready(function() {
$('#page-wrap').css('display', 'none');
$('#page-wrap').delay(500).fadeIn(1000);
$('.menu-item').click(function(event) {
event.preventDefault();
newLocation = this.href;
$('#page-wrap').fadeOut(1000, newpage);
});
function newpage() {
window.location = newLocation;
}
});
Navigation Menu Code (using WordPress)
<div id="nav_wrap">
<div id="nav"><?php wp_nav_menu( array( 'theme_location' => 'header-menu',) ); ?></div>
</div>