Pesky LI Navigation links when using Master Pages

Hi again

I've been working through a problem that has been bugging me for a while now. But I've just never had the time to work out a solution.

Think of it this way ...

I have an awesome navigation menu that uses

  • tags. This menu uses context state (the menu corresponding to the current page is highlighted) and I really want to use that highlight state. I also use Master Pages throughout my site and I really don't want to duplicate my "awesome nav" because that would be a nightmare to update if I decide that it's not quite so awesome any more.

    The answer I have found is to simply use CSS selectors to set the style.

    Let's say we have the following pages:

    • Home
    • Blog
    • Contact
    • About

    What we need to do is, give the body tag on each page a unique ID. For example would be set on the Home page.

    Now each of the

  • tags in "awesome nav" should also have unique IDs. For example 
    <li id="homenav">home</li>

    would be the nav element to get us back Home again. Do the same for each of the other nav elements.

    To tie it all together, add these lines to your CSS file to set the style, dependent on the page you are currently looking at:

    <#home #homenav {background-image: url(homenav-sizzle.jpg);}

    What happens is that the cascading nature of the two elements forms a unique style selector which lets you customise it without affecting any other pages in your site.

    Just remember to make sure the IDs you use are unique. That is the key.

    Until next time ....