Creating a dynamic menu with jQuery

Question

we are creating a new website.

We would like to make up the site with iframes that represent different parts of the page, navigation, content, headers etc.

However our navigation menu has some "context" built into it. That is if you are the "About" section the button/link for About will be highlighted to indicate that this is your location within the site. I want to include a meta tag in each page that is like this (or something similar)

<meta name="page" content="--page name goes here--" />

I then want to be able to give all the nav menu items an id. When the id of a nav menu item matches the content of the 'page' meta tag, then I want the highlighted image to show rather than the regular one.

Can you outline the basic steps, perhaps with some code, to get this done.

Answer 1

instead of putting id in meta tag why don't you do it in ready event handler of page:

 $(document).ready(function(){
     $("#ID_OF_MENU_FOR_THIS_PAGE").addClass("CLASS_TO_HIGHLIGHT_CURRENT_MENU");
 });

It works really well and I'm using this regularly!

Answer 2

the easiest way would be say for example you have 5 links in the nav menu (global nav)

you can add id="about" to the nav item

then use this JQuery code

<script>
    $(document).ready(function() {
        $('about').addClass('active');
    });
</script>'

and define a css Class as active and get it to do whatever you want it to do (like highlight or watever)

if you want to change image on page select you can use this bit of code: $(document).ready(function() { $('active').css('background', 'url(/images/tabs/account_hover.png) no-repeat 0 0'); }); '