[RESOLVED]Net 4 Navigation menu – highlighting selected page

Recently I had to upload an existing site written for 3.5 to a 4 web host.  Using a quick cheat in the web.config file got everything rendering as in 3.5 – but I decided to get stuck in an sort everything to work directly in 4.  Practically everything is
working fine now – except I can’t figure out how to get the selected page highlighted in the navigation menu.

So I went back to basics, and made a simple site, with a basic MasterPage.  Using the List RenderingMode and CSS all behaved much as expected – but again I had the same problem.  If the CSS class for the menu was menu, .menu ul li a.selected in the CSS made
no difference.  Now I am not too surprised at that, since I figure JavaScript is required. I know there are some examples on the net – but I suspect that what I want is already in net 4 already has what I want – but searching around, I can’t find how to do
it.

Can anybody help me out?

You’d have to do that from the codebehind. You would have all menu links have no class. For whatever page is clicked, you would set the corresponding link’s class to an ".active" class. That active class will be have something that makes the link stand out.
If you don’t have direct access to the links (as in runat="server"), you can register startup script that has javascript change the specific link’s class to what you want. This "specific link" is set by the specific page that is requested.

Thanks for coming back to me.

Adapting the default web site in Web Developer 2010, and vb I still have a problem – and would be grateful for a further pointer.

Here’s the menu part of the MasterPage

<div class="clear hideSkiplink">
                <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
                    <Items>
                        <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home"/>
                        <asp:MenuItem NavigateUrl="~/About.aspx" Text="About"/>
                    </Items>
                </asp:Menu>
            </div>
Here's the code behind:
Partial Class Site
    Inherits System.Web.UI.MasterPage
    Sub Page_Load(ByVal Sender As System.Object, ByVal e As System.EventArgs)
        NavigationMenu.StaticSelectedStyle.CssClass = "active"
    End Sub
End Class

And here's the CSS
div.hideSkiplink
{
      width:100%;
}

div.menu
{
    padding: 4px 0px 4px 8px;
}

div.menu ul
{
    list-style: none;
    margin: 0px;
    padding: 0px;
    width: auto;
}

div.menu ul li a, div.menu ul li a:visited
{
    background-color: #465c71;
    border: 1px #4e667d solid;
    color: #dde4ec;
    display: block;
    line-height: 1.35em;
    padding: 4px 20px;
    text-decoration: none;
    white-space: nowrap;
}

div.menu ul li a:hover
{
    background-color: #bfcbd6;
    color: #465c71;
    text-decoration: none;
}

div.menu ul li a:active
{
    background-color: Lime;
    color: red;
    text-decoration: none;
}

I’ve seen
this page
and though, scrolling down to Listing 2 it looks as thought there is an answer if I use a sitemap (no problem) it does look complex to use, and I can’t see the error in the code above.  However, though when I click the link,
the styling kicks in – it does not persist.

So….

Thoughts on what is wrong with my code above?

Is Listing 2 in the link as good a way as any?

To use it  would I have to open a new Prject using MVC Web Application (something that is new to me)?

mvark, I am sure that would work, but I think it should be possible to do what I need using the asp.net menu control (which binds very neatly to a stemap) – and code behind something similar to that shown in  the first post.  My guess is that the
class has to be written correctly – but I haven’t figured it yet.

It seems that to do what I want, the menu control has to be bound to a data source (looks like this was so in net3.5, too). 
When I bound the menu control to a sitemap, I got what I wanted (without having to call up a page laod event in the code behind)

<%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
    a
    {
        background-color:Blue;
    }
    
    .selected
    {
        background-color:Green;
        color:Yellow;
    }
    </style>
</head>
<body>
<form id="form1" runat="server">
 <asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1"
     RenderingMode="List">
     <StaticSelectedStyle CssClass="selected" />
            </asp:Menu>
        <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server"
     ShowStartingNode="False" />
    <div>

        <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
           
        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>

Here is a simple way to do it. Using Javascript

window.onload = initAll;

/***********************************************************************************************/

/* This script determines witch navigation link (url) is the default page and            */
/* changes that link (tab) color to dark gray. To distinguish it from the other tabs. */
/***********************************************************************************************/

function initAll(){
var Lnk = document.getElementById("NavigationMenu").getElementsByTagName("a");
url1 = document.URL;
for (var i = 0; i < Lnk.length; i++) {
// alert("document Url " + url1 + " document by id " + Lnk[i]);

Roger Dorfield

if (Lnk[i] == url1) {
Lnk[i].style.backgroundColor = "#5e5e5e";
Lnk[i].style.color = "white";
break;
} // End if
} // for loop
}//initAll function

Leave a Reply