Hard Coded Navigation in Master Page - Active link not changing

Question

Prior to my arrival it was decided that all navigation would be hard coded into the Master Page. I wish I could find a solid reason why, but for the time being it escapes me. Due to time constraints, rewriting the Master Page is not really an option.

The issue I am having is when navigating to other sites(Home, News, About), the active site is not reflected in the navigation.

Here is the code I'm working with:

<div class="top_nav">
<span>
    <ul class="list-nav">
        <li class="first"></li>
        <li class="sep-left"></li>
        <li class="selected"><a href="/" target="_self" title="the Nest">
            <span>Home</span></a></li>
        <li class="sep-right"></li>
        <li><a href="/news" target="_self" title="News">
            <span>News</span></a></li>
        <li class="sep"></li>
        <li><a href="/about" target="_self" title="About us">
            <span>About us</span></a></li><li class="sep"></li>
    </ul></span>

<div id="s4-searcharea" class="s4-search s4-rp topBar"><!-- Search -->
    <asp:ContentPlaceHolder id="PlaceHolderSearchArea" runat="server">
            <SharePoint:DelegateControl runat="server"     ControlId="SmallSearchInputBox" Version="4"/>
    </asp:ContentPlaceHolder>
</div>  

Here is the CSS

/* Top navigation */
div.top_nav{background:transparent url('/Style Library/Images/npe_layout.png') no-     repeat;display:block;height:30px;margin-bottom:10px;width:955px}
.top_nav * {color:#fff}
.top_nav .list-nav{float:left;text-align:center}
    .top_nav .list-nav li{display:inline;float:left;height:24px;list-style-  type:none;padding:0}
    .top_nav .list-nav li.first{margin-left:2px}
        .top_nav .list-nav li a{display:block;height:25px;outline:0;padding:5px 10px 0 10px;text-decoration:none}
            .top_nav .list-nav li a:hover{background:transparent url('/Style Library/Images/npe_layout.png') repeat-x scroll -1011px -186px;height:25px;text-decoration:none!important}
            .top_nav .list-nav li a span{cursor:pointer;display:block;margin:0;padding-top:2px}
    .top_nav .list-nav li.selected {margin-top:4px} 
        .top_nav .list-nav li.selected a{background- color:#fff;color:#8e663c;padding:1px 6px 0}
            .top_nav .list-nav li.selected a:hover{background:#fff none}
            .top_nav .list-nav li.selected a span {color:#369}
    .top_nav .list-nav li.sep {background:transparent url('/Style  Library/Images/npe_layout.png') no-repeat -965px 0;height:25px;margin-top:3px;width:2px}
    .top_nav .list-nav li.sep-left {background:transparent url('/Style Library/Images/npe_layout.png') no-repeat -955px 0;height:27px;margin-top:4px;margin-left:2px;width:5px}
    .top_nav .list-nav li.sep-right { background:transparent url('/Style Library/Images/npe_layout.png') no-repeat -960px 0;height:27px;margin-top:4px;margin-right:2px;width:5px}

a bit of javascript to help things along

<script type="text/javascript">
//Sets the selected tab on the Nest global navigation.
function setGlobalNavigationSelected() {

try {

    $(".layout .top_nav ul a").each(function () {
        var href = $(this).attr('href');
        if (href != undefined && href != "") {
            if (href == window.location.href) {

                var previouslyselected = $(".layout .top_nav ul .selected");
                //alert(previouslyselected)
                previouslyselected.removeClass('selected');
                previouslyselected.next().remove();
                previouslyselected.prev().remove();


                $(this).parent().addClass('selected');

                $(this).parent().before('<li class="sep-left" />');
                $(this).parent().after('<li class="sep-right" />');

                var nestNextLi = $(this).parent('li').next();
                if (nestNextLi != null && nestNextLi.length > 0) {
                    nestNextLi.children('a:first-child').children('span').children('span').css('background-image', 'none');
                }

            }
        }
    });

}
catch (err5) { }

}


</script>

Answer 1

Including the navigation in this way effectively bypasses the SharePoint mechanisms for highlighting the current tab so you will have to roll your own.

One approach would be to use jQuery to iterate through the urls in the nav (perhaps ".top_nav li a") and compare the url in the each link to the current window.location.href to find the best match. Once found use .parent().addClass("selected") to highlight the parent LI.

Answer 2

A different perspective on this... I would argue that you need to use the out of the box navigation control. It has many benefits such as security trimming items according to the current user's privileges. you will spend more time fixing bugs with your custom Nav than just putting the original back in. At the end of the day, you still have to write the jquery to do the selection and test it, it would take the same amount of time putting in the original Nav. Also let me assure you that you design can completely be implemented using the out of the box navigation.