Ways to deal with jQuery menu includes on multiple pages

Question

Hi,

This isn't a specific code question, but more of a conceptual question. I'm trying to figure out which direction I should go in solving this problem.

Here is the site testsite

Right now when you hover over interior and click Mastersuite, it takes you to a page for the master suite, which includes the navbar through SSI, but when the page loads the navigation menu is reset just like when you first load the index. I want to have the menu load in the state it was in when the link was clicked. I also want to have only one HTML file for the navbar on ALL pages.

What would be the most universal, clean, and update-able way of doing this?

My ideas

• use query string to tell navbar script which section the viewer is in
• use some kind of JavaScript within the subsection page (ie:mastersuite.html or bathrooms.html) to tell the navbar script what page the user is on

Answer 1

One option is for each of the links that takes you to another page, set the hash to the section ID to which it belongs.

<a href="mastersuite.shtml#section1">Master Suite</a>

Then on each page, when the page loads, get the hash value, and use it as a selector to fire the event that shows that category.

if(window.location.hash)
    $(window.location.hash).mouseover();  // Or mouseenter if that's the event

Answer 2

Ok so this is what i did and seems like a nice solution.

on the section page (ie: bathrooms.shtml or mastersuite.shtml) i used this

<script type="text/javascript">

var section='1';

</script>

the value of "section" is the section that that the page is under.

and then on my navbar script i used this

$(window).load(function() {//functionality
$('#section1').hoverIntent(navSelect('.interior','0px'));
$('#section2').hoverIntent(navSelect('.exterior','100px'));
$('#section3').hoverIntent(navSelect('.view','200px'));

function navSelect(section,selectorPosition){
    var func = function(evt){
        if ( $(section).is(':hidden')){
        $('.subSection').fadeOut(250);
        $(section).delay(250).fadeIn(250);
        $('#selector').animate({"left":selectorPosition},250);
        }
    }
    return { over: func, out: func };
}
});
//----------------------------------------------------------
if(section==0){//index page
$(window).load(function() {

$('.section').mouseover(function(){
$('#nav2').fadeOut(0).animate({"height":"30px"}, 250);      
});
});
}

//----------------------------------------------------------
if(section==1){//section1
$(window).load(function() {

$('#nav2').animate({"height":"30px"}, 0);
$('.subSection').fadeOut(250);
$('.interior').fadeIn(0);
$('#selector').animate({"left":"0px"},0);
});
}
//----------------------------------------------------------
if(section==2){//section2
$(window).load(function() {

$('#nav2').animate({"height":"30px"}, 0);
$('.subSection').fadeOut(250);
$('.exterior').fadeIn(0);
$('#selector').animate({"left":"100px"},0);
});
}
//----------------------------------------------------------
if(section==3){//section3
$(window).load(function() {

$('#nav2').animate({"height":"30px"}, 0);
$('.subSection').fadeOut(250);
$('.view').fadeIn(0);
$('#selector').animate({"left":"200px"},0);
});
}

I like this because it requires no querystring or anchors, and it is ridiculously simple