My sub-nav uses JQuery to simply load a new .php document into a specific <div>
so it looks like the page content changes but the same header and main menu remain.
My Question: I want the ability to actually make the URL look like it has changed to the url of the .php document that was loaded. As it is now the URL stays as the main .PHP page that loaded the sub-nav to start with.
HTML MENU:
<ul class="hiw_menu">
<li class="howitworks <?php if($page_name == 'how_it_works') { echo 'active'; } ?>"><a href="how-it-works.php">HOW IT WORKS</a></li>
<li class="methodology <?php if($page_name == 'methodology') { echo 'active'; } ?>"><a href="themethodology.php">THE METHODOLOGY</a></li>
<li class="community <?php if($page_name == 'community') { echo 'active'; } ?>"><a href="thecommunity.php">THE COMMUNITY</a></li>
<li class="tools <?php if($page_name == 'the_tools') { echo 'active'; } ?>"><a href="thetools.php">THE TOOLS</a></li>
</ul>
My JQuery that is activated by the above sub-nav:
$('.hiw_menu li').on("click", function(e) {
e.preventDefault();
$('.hiw_menu li').removeClass('active');
$(this).addClass('active');
$( "#pageheader_cont .pageheader_top" ).load( $(this).find('a').attr('href') + " #pageheader_cont .container .pageheader_top .pageheader_top_inside" );
$( ".hiw_content_cont" ).load( $(this).find('a').attr('href') + " .hiw_content_cont_inside",
//THIS FUNCTION SWITCHES OUT CONTENT IN ANOTHER SECTION OF THE PAGE
function( response, status, xhr ) {
$('.core_values_cont ul li').click(function() {
$('.core_values_cont ul li.active .core_img img').attr('src', $('.core_values_cont ul li.active .core_img img').attr('src').replace('_active.png','.png') );
$('.core_values_cont ul li').removeClass('active');
$(this).addClass('active');
//$('.core_values_cont ul li .core_img img').attr('src', $('.core_values_cont ul li .core_img img').attr('src').replace('_active.png','.png') );
$(this).find('.core_img img').attr('src', $(this).find('.core_img img').attr('src').replace('.png','_active.png') );
$('.core_values_box').css('display','none');
$('.method_box').css('display','none');
$( '#' + $(this).attr('title') + '_cont' ).css('display','block');
});
}
);
//THIS SCROLLS PAGE TO HIDE THE TOP OF THE PAGE AND FOCUS ON SUB-NAV
$('html, body').animate({
scrollTop: $("#pageheader_cont").offset().top
}, 400);
});