Net 4 Navigation menu

kiwibrit · July 30th, 2011, 06:45 PM

Using the menu control and list RenderingMode, I am trying to highlight the currently selected page in the navigation menu - so far without success. Can anyone here help?

Here's the menu part of the MasterPage:

Code:

<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:

Code:

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

Here's the CSS

Code:

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

The active styling does indeed click in as normal when the nav link is clicked - but the effect does not persist - so I am ding something wrong.

Imar · July 31st, 2011, 04:03 AM

Hi there,

a:active is called a pseudo selector and works in the browser when the link is activated (e.g. tabbed to, or clicked without releasing the mouse).

As such, it only works just before you click it and not after the page has been loaded. If you're setting an explicit class like active, use a dot instead of a colon. E.g. a.active.

Hope this helps,

Imar

kiwibrit · July 31st, 2011, 05:23 AM

Imar, thanks for your interest. I am still having problems, though. I have tried various ways of writing the class in the style sheet, such as:

Code:

.active
a.active
.menu ul li a.active
div.menu ul li a.active

In desperation, I switched to calling the class a.selected, (and changed the code behind class called up to 'selected'). I also tried

Code:

.selected a

But none have worked. It seems to me that the problem is that the class

Code:

.menu ul li a

Overrides anything I do subsequently. I'd be grateful for your thoughts on how I could write the class - and your confirmation that the code behind shown in my first post looks reasonable.

Imar · July 31st, 2011, 10:03 AM

It seems to work for me when I call the class selected. Here's an example that works:

Code:

 
<%@ Page Language="C#" %>
<!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 id="Head1" runat="server">
  <title>Menu StaticSelectedStyle Example</title>
  <style type="text/css">
    .selected
    {
      background-color: Green;
    }
  </style>
</head>
<body>
  <form id="form1" runat="server">
  <h3>Menu StaticSelectedStyle Example</h3>
  <asp:Menu ID="NavigationMenu" StaticDisplayLevels="2" StaticSubMenuIndent="10" Orientation="Vertical" runat="server">
    <StaticSelectedStyle CssClass="selected" />
    <Items>
      <asp:MenuItem Text="Home" ToolTip="Home">
        <asp:MenuItem Text="Music" ToolTip="Music">
          <asp:MenuItem Text="Classical" ToolTip="Classical" />
          <asp:MenuItem Text="Rock" ToolTip="Rock" />
          <asp:MenuItem Text="Jazz" ToolTip="Jazz" />
        </asp:MenuItem>
        <asp:MenuItem Text="Movies" ToolTip="Movies">
          <asp:MenuItem Text="Action" ToolTip="Action" />
          <asp:MenuItem Text="Drama" ToolTip="Drama" />
          <asp:MenuItem Text="Musical" ToolTip="Musical" />
        </asp:MenuItem>
      </asp:MenuItem>
    </Items>
  </asp:Menu>
  </form>
</body>
</html>

Hope this helps,

Imar

kiwibrit · July 31st, 2011, 05:39 PM

Imar, thanks for persisting with this. I am still having the problem of the background color not changing maybe the the a style overriding select. I notice you're not using NavigateUrl in your asp:MenuItem and I'm not clear how that can work - maybe the secret is in the Web.config file?

Or maybe the fault lies somewhere in my computer. I am using Web Developer 2010, Windows 7 and, mostly, Firefox5.0, BTW. I have been unable to upload to a web host because the only site I have on aspnet4 host has web.config set up to render as for net 3.5.

I have now created a very basic two-page site with nothing else except the web.config file. Here is the code.

For Default.aspx (About.aspx is the same except for the title and h1)

Code:

<%@ Page Language="VB" %>

<!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 id="Head1" runat="server">
    <title>About</title>
       <style type="text/css">
    a 
    {
     background-color:Red;
    }    
        
    .selected
    {
      background-color: Green;
    }
  </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <h1>About</h1>
    <asp:Menu ID="NavigationMenu" StaticDisplayLevels="2" StaticSubMenuIndent="10" Orientation="Vertical" runat="server"> 
                <StaticSelectedStyle CssClass="selected" />
                    <Items>
                        <asp:MenuItem  NavigateUrl="~/Default.aspx" Text="Home"/>
                        <asp:MenuItem  NavigateUrl="~/About.aspx" Text="About"/>
                    </Items>
                </asp:Menu>
    </div>
    </form>
</body>
</html>

Here's the Web.config

Code:

<?xml version="1.0"?>
<configuration>
        <system.web>
        <compilation debug="true" strict="false" explicit="true" targetFramework="4.0"/>
        </system.web>
    <system.webServer>
        <modules runAllManagedModulesForAllRequests="true"/>
    </system.webServer>
</configuration>

Imar · July 31st, 2011, 07:02 PM

Looks like an issue that's been discussed here: problem with StaticSelectedStyle in a menu

Sounds like a bug in ASP.NET to me....

Cheers,

Imar

kiwibrit · August 1st, 2011, 03:16 AM

Thanks Imar,

That looks as thought it could be the answer. I'm tied up with other things for the next few days - but will do a test run with a Menu bound to a SiteMap as soon as I can - and report back- hopefully just for the record.

kiwibrit · August 1st, 2011, 07:29 PM

As (almost) ever, Imar was right, the menu needed to be bound to a source.

This does it:

Code:

<%@ 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>

Imar · August 2nd, 2011, 03:43 AM

Yeah, that would work fine. Don't know why it doesn't work with statically defined menu items. Must be a bug if you ask me..

Imar

GeoffreyBoult · January 28th, 2014, 10:19 AM

Thanks for this -I have been tearing my hair out! Works great