Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > ASP.NET and ASP > ASP.NET 4 > ASP.NET 4 General Discussion
Password Reminder
Register
Register | FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
ASP.NET 4 General Discussion For ASP.NET 4 discussions not relating to a specific Wrox book
Welcome to the p2p.wrox.com Forums.

You are currently viewing the ASP.NET 4 General Discussion section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Search this Thread Display Modes
  #1 (permalink)  
Old July 30th, 2011, 06:45 PM
Authorized User
 
Join Date: Jun 2009
Posts: 70
Thanks: 18
Thanked 1 Time in 1 Post
Default Net 4 Navigation menu - highlighting currently selected page

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.
Reply With Quote
  #2 (permalink)  
Old July 31st, 2011, 04:03 AM
Imar's Avatar
Wrox Author
Points: 72,038, Level: 100
Points: 72,038, Level: 100 Points: 72,038, Level: 100 Points: 72,038, Level: 100
Activity: 100%
Activity: 100% Activity: 100% Activity: 100%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,080
Thanks: 80
Thanked 1,587 Times in 1,563 Posts
Default

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
__________________
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Follow me on Twitter

Author of Beginning ASP.NET 4.5 : in C# and VB, Beginning ASP.NET Web Pages with WebMatrix
and Beginning ASP.NET 4 : in C# and VB.
Did this post help you? Click the button below this post to show your appreciation!
Reply With Quote
  #3 (permalink)  
Old July 31st, 2011, 05:23 AM
Authorized User
 
Join Date: Jun 2009
Posts: 70
Thanks: 18
Thanked 1 Time in 1 Post
Default

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.

Last edited by kiwibrit; July 31st, 2011 at 06:28 AM..
Reply With Quote
  #4 (permalink)  
Old July 31st, 2011, 10:03 AM
Imar's Avatar
Wrox Author
Points: 72,038, Level: 100
Points: 72,038, Level: 100 Points: 72,038, Level: 100 Points: 72,038, Level: 100
Activity: 100%
Activity: 100% Activity: 100% Activity: 100%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,080
Thanks: 80
Thanked 1,587 Times in 1,563 Posts
Default

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
__________________
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Follow me on Twitter

Author of Beginning ASP.NET 4.5 : in C# and VB, Beginning ASP.NET Web Pages with WebMatrix
and Beginning ASP.NET 4 : in C# and VB.
Did this post help you? Click the button below this post to show your appreciation!
Reply With Quote
  #5 (permalink)  
Old July 31st, 2011, 05:39 PM
Authorized User
 
Join Date: Jun 2009
Posts: 70
Thanks: 18
Thanked 1 Time in 1 Post
Default

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>
Reply With Quote
  #6 (permalink)  
Old July 31st, 2011, 07:02 PM
Imar's Avatar
Wrox Author
Points: 72,038, Level: 100
Points: 72,038, Level: 100 Points: 72,038, Level: 100 Points: 72,038, Level: 100
Activity: 100%
Activity: 100% Activity: 100% Activity: 100%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,080
Thanks: 80
Thanked 1,587 Times in 1,563 Posts
Default

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
__________________
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Follow me on Twitter

Author of Beginning ASP.NET 4.5 : in C# and VB, Beginning ASP.NET Web Pages with WebMatrix
and Beginning ASP.NET 4 : in C# and VB.
Did this post help you? Click the button below this post to show your appreciation!
Reply With Quote
The Following User Says Thank You to Imar For This Useful Post:
kiwibrit (August 1st, 2011)
  #7 (permalink)  
Old August 1st, 2011, 03:16 AM
Authorized User
 
Join Date: Jun 2009
Posts: 70
Thanks: 18
Thanked 1 Time in 1 Post
Default

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.
Reply With Quote
  #8 (permalink)  
Old August 1st, 2011, 07:29 PM
Authorized User
 
Join Date: Jun 2009
Posts: 70
Thanks: 18
Thanked 1 Time in 1 Post
Default

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>

Last edited by kiwibrit; August 2nd, 2011 at 01:59 AM..
Reply With Quote
  #9 (permalink)  
Old August 2nd, 2011, 03:43 AM
Imar's Avatar
Wrox Author
Points: 72,038, Level: 100
Points: 72,038, Level: 100 Points: 72,038, Level: 100 Points: 72,038, Level: 100
Activity: 100%
Activity: 100% Activity: 100% Activity: 100%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,080
Thanks: 80
Thanked 1,587 Times in 1,563 Posts
Default

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
__________________
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Follow me on Twitter

Author of Beginning ASP.NET 4.5 : in C# and VB, Beginning ASP.NET Web Pages with WebMatrix
and Beginning ASP.NET 4 : in C# and VB.
Did this post help you? Click the button below this post to show your appreciation!
Reply With Quote
  #10 (permalink)  
Old January 28th, 2014, 10:19 AM
Registered User
Points: 3, Level: 1
Points: 3, Level: 1 Points: 3, Level: 1 Points: 3, Level: 1
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jan 2014
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
Default highlight selected menu item

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


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
dynamic navigation menu dovito Beginning PHP 0 June 11th, 2009 01:37 PM
Chapter 7: Navigation - Menu Control VeganMan BOOK: Beginning ASP.NET 3.5 : in C# and VB BOOK ISBN: 978-0-470-18759-3 12 April 10th, 2008 08:28 AM
Menu Navigation behind Control jwiedmier BOOK: ASP.NET 2.0 Website Programming Problem Design Solution ISBN: 978-0-7645-8464-0 2 March 19th, 2008 10:54 AM
How do I get a menu/navigation look like this? R/O LuxeGirl Classic ASP Basics 4 January 22nd, 2005 08:04 PM
pop up menu on navigation bar joshil Dreamweaver (all versions) 0 May 16th, 2004 07:53 AM



All times are GMT -4. The time now is 01:04 PM.


Powered by vBulletin®
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.