CSS for Current Page with asp:Menu Control
CodeGuru Home VC++ / MFC / C++ .NET / C# Visual Basic VB Forums Developer.com
Results 1 to 7 of 7

Thread: CSS for Current Page with asp:Menu Control

Hybrid View

  1. #1
    Join Date
    Apr 2000
    Location
    Washington (state)
    Posts
    125

    CSS for Current Page with asp:Menu Control

    I would like to structure a menu bar in ASP.NET using the asp:Menu control and master pages.

    The feature I am having trouble implementing is to have the menu item for the "current page" display in a style that is distinctive from all of the other menu items.

    I have seen a few solutions for this that suggest something like this...

    1. Put a unige ID or Class attribute on the <body> tag of each page referenced in the menu. e.g. <body ID="Home"...> <body ID="Contact"...> etc.
    2. Put a unique ID on each <a> tag in the menu (or a class attribute on the <li> tag). e.g.
      <ul id="navbar">
      <li><a id="home_link" href="home.htm">HOME</a></li>
      <li><a id="contact_link" href="contact.htm">CONTACT</a></li>
      </ul>
    3. Create the following CSS...
      body#home a#home_link,
      body#contact a#contact_link
      { color: #000; background: #fff; } /* or whatever unique attributes are desired */

    I have two problems with implementing this...

    1. Since the <body> tag is in the Master page I don't know how to set a unique ID on the <body> tag for each page.
    2. Both the <li> and <a> tags are generated from the asp.MenuItem so I don't see how to apply either an ID or a Class attribute.

    If necessary I could forgo using the asp:menu control and just use simple HTML, but I would prefer to use the asp:menu control if that is possible. Even if I do resort to simple HTML (i.e. <ul> <li> <a> etc) for that part of the puzzle, I would really like to continue using a Master page.

    This seems like a VERY common way to configure a menu so I am assuming there must be some sort of solution.

    Any help will be greatly appreciated!!!

    Thanks,
    Steve

  2. #2
    Join Date
    Mar 2011
    Location
    London
    Posts
    54

    Re: CSS for Current Page with asp:Menu Control

    Here is some sample code that works and should give you an idea of how to acheive what you want.

    We have an Aspx page with a menu called MainMenu. We set two styles on it for menu items and selected menu items.

    Code:
    <&#37;@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="TestWebApplication._Default" %>
    
    <!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>
        <link href="Stylesheet.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:Menu ID="MainMenu"
                      runat="server"
                      StaticSelectedStyle-CssClass="selected_menu_item"
                      StaticMenuItemStyle-CssClass"menu_item" />
        </div>
        </form>
    </body>
    </html>
    On page load in the code behind we build our menu and store an Identifer for each page in the menu item values. We then compare those item values with the name of the page we are currently on to work out which menu item we want to look differently. We then set the selected property on that menu item.

    Code:
    using System;
    using System.Web.UI.WebControls;
    
    namespace TestWebApplication
    {
        public partial class _Default : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                //Create menu items as store the path/name for each
                MainMenu.Items.Add(new MenuItem("Page 1", "~/Page1.aspx"));
                MainMenu.Items.Add(new MenuItem("Page 2", "~/Page2.aspx"));
                MainMenu.Items.Add(new MenuItem("Page 3", "~/Page3.aspx"));
    
                //Work out what page we are viewing
                string pageViewed = this.Page.AppRelativeVirtualPath;
    
                //Go through each menu item and work out which one we want to
                //select
                foreach (MenuItem item in MainMenu.Items)
                {
                    if (pageViewed == item.Value)
                    {
                        item.Selected = true;
                    }
                }
            }
        }
    }
    Finally, we need a stylesheet.
    Code:
    .menu_item
    {
    	font-weight: normal;
    }
    .selected_menu_item
    {
    	font-weight: bold;
    }

    In this example, I have stored the actual page names but I normally use an enumerator and a lookup to a list of page names to make it easier to decouple the naming of the actual pages with the code for setting the menu items.
    Last edited by RedBully; April 15th, 2011 at 05:51 AM. Reason: Type

  3. #3
    Join Date
    Apr 2000
    Location
    Washington (state)
    Posts
    125

    Re: CSS for Current Page with asp:Menu Control

    Thanks RedBully!!!

    I will give it a try... I appreciate your response!!!!

  4. #4
    Join Date
    Oct 2013
    Location
    Green Bay, WI
    Posts
    2

    Re: CSS for Current Page with asp:Menu Control

    Quote Originally Posted by sford View Post
    Thanks RedBully!!!

    I will give it a try... I appreciate your response!!!!
    Did this solution work for you?

  5. #5
    Join Date
    Jun 2005
    Location
    JHB South Africa
    Posts
    3,772

    Re: CSS for Current Page with asp:Menu Control

    This thread is over two(2) years old and the user has not been active for over a year... I doubt he will reply on whether it worked for him or not...

    If you have a similar problem, try the proposed fix, and if it does not work as expected, start a new thread with your problem and question and someone will try help you....

    thanks...
    Articles VB6 : Break the 2G limit - Animation 1, 2 VB.NET : 2005/8 : Moving Images , Animation 1 , 2 , 3 , User Controls
    WPF Articles : 3D Animation 1 , 2 , 3
    Code snips: VB6 Hex Edit, IP Chat, Copy Prot., Crop, Zoom : .NET IP Chat (V4), Adv. ContextMenus, click Hotspot, Scroll Controls
    Find me in ASP.NET., VB6., VB.NET , Writing Articles, My Genealogy, Forum
    All VS.NET: posts refer to VS.NET 2008 (Pro) unless otherwise stated.

  6. #6
    Join Date
    Oct 2013
    Location
    Green Bay, WI
    Posts
    2

    Re: CSS for Current Page with asp:Menu Control

    I had tried the proposed solution, hence why I asked if it worked for them as it did not for me.

    This is what worked for me.

    CSS
    Code:
    .menu a.static.selected
    {
        background-color: #680840 !important;
        color: #FFF !important;
        text-decoration: none !important;
    }
    Code behind in Site.Master
    Code:
    protected void Page_Load(object sender, EventArgs e)
        {
        string path = Request.AppRelativeCurrentExecutionFilePath;
        foreach (MenuItem item in NavigationMenu.Items)
        {
        item.Selected = item.NavigateUrl.Equals(path, StringComparison.InvariantCultureIgnoreCase);
        }
    }

  7. #7
    Join Date
    Jun 2005
    Location
    JHB South Africa
    Posts
    3,772

    Re: CSS for Current Page with asp:Menu Control

    thanks for the alternate solution.. and confirmation of it....
    Articles VB6 : Break the 2G limit - Animation 1, 2 VB.NET : 2005/8 : Moving Images , Animation 1 , 2 , 3 , User Controls
    WPF Articles : 3D Animation 1 , 2 , 3
    Code snips: VB6 Hex Edit, IP Chat, Copy Prot., Crop, Zoom : .NET IP Chat (V4), Adv. ContextMenus, click Hotspot, Scroll Controls
    Find me in ASP.NET., VB6., VB.NET , Writing Articles, My Genealogy, Forum
    All VS.NET: posts refer to VS.NET 2008 (Pro) unless otherwise stated.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  


Windows Mobile Development Center


Click Here to Expand Forum to Full Width

This is a CodeGuru survey question.


Featured


HTML5 Development Center