asp.NET 4.0 + CSS Problem: How to create a give a different effect for the current webpage on the menu?

Question

Usually when creating static websites, not through asp.NET I have a class, which would have the styling for a current/selected menu item. Then I would place it as current in each relevent page.

Now I am using asp.NET and the template is handled through the sitemaster so this cannot be done. How would you do this. This is the css I have so far.

/* TAB MENU   
----------------------------------------------------------*/
div.hideSkiplink
{
   background-color:#3a4f63;
   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: #FFF; /*680840*/
   border: 1px #4e667d solid;
   height: 20px;
   width: 140px;
   color: #000; /*FFF*/
   display: block;
   line-height: 1.35em;
   padding: 4px 20px;
   text-decoration: none;
   white-space: nowrap;
}

div.menu ul li a:hover
{
   background-color: #680840;
   color: #FFF;
   text-decoration: none;
}

div.menu ul li a:active 
{
   background-color: #680840;
   color: #cfdbe6;
   text-decoration: none;
}

This is the result, on hover I then have a Purplish background (this can be used as the selected colour as well, i.e. the a:hover styling can be used for when a link is representing the current page): enter image description here

asp.NET Menu:

                        <div id="menu">
            <h2>Dashboard</h2>
            <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Vertical" >
                <StaticSelectedStyle CssClass="selectedMenu" /> 
                <Items>
                    <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home" ToolTip="Home"/>
                    <asp:MenuItem NavigateUrl="~/Imports.aspx" Text="Import"/>
                    <asp:MenuItem NavigateUrl="~/Submission.aspx" Text="Insert Submission"/>
                    <asp:MenuItem NavigateUrl="~/Reports.aspx" Text="Reports"/>
                    <asp:MenuItem NavigateUrl="~/CurrencyMaintenance.aspx" Text="Currency Maintenance" />
                    <asp:MenuItem NavigateUrl="~/Remittance.aspx" Text="Remittance" />
                </Items>
            </asp:Menu>
        </div>

CSS

/* TAB MENU   
----------------------------------------------------------*/
div.hideSkiplink
{
    background-color:#3a4f63;
    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: #FFF; /*680840*/
   border: 1px #4e667d solid;
   height: 20px;
   width: 140px;
   color: #000; /*FFF*/
   display: block;
   line-height: 1.35em;
   padding: 4px 20px;
   text-decoration: none;
   white-space: nowrap;
}

div.menu ul li a:hover 
{
   background-color: #680840;
   color: #FFF;
   text-decoration: none;
}

.selectedMenu
{
   background-color: #680840;
   color: #FFF;
   text-decoration: none;
}

div.menu ul li a:active
{
   background-color: #680840;
   color: #cfdbe6;
   text-decoration: none;
}

paulGraffix answered this question in a better structured question of mine, the answer can be found here: asp.NET - Problems with Static Selected Style for a Selected Page on the menu

i'm facing same problem... i think one way could be use of hidden textbox. You fill it with the current page name and with javascript / jquery assign the class "current" to the corrisponding menu item... — 2GDev, Aug 11 '11 at 10:36
@2GDev - I don't really like that solution, there must be something better. — Ryan S, Aug 11 '11 at 10:41

niaher · Answer 1 · 2011-08-12T06:17:41.150

You could implement a property on Site.Master's class. Example:

public enum MenuItem
{
    Home,
    Import,
    InsertSubmission,
    Reports,
    CurrencyMaintenance,
    Remittance
}

public partial class MyMaster : System.Web.UI.MasterPage
{
    public MenuItem SelectedMenu { get; set; }
    protected void Page_Load(object sender, EventArgs e)
    {
        // You can either generate your entire menu from here or
        // you could just use the
        // <a href="Default.aspx" class='<%= this.SelectedMenu == MenuItem.Home ? "selected" : "" %>'>Home</a>
     }
}

Now in your page class you will simply do this:

public partial class Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        var master = (this.Master as MyMaster);
        master.SelectedMenu = MenuItem.Home;
    }
}

EDIT: If you are using <asp:menu> then it's even easier, as you can set the style using <staticselectedstyle> tag, e.g. -

<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Vertical">
    <StaticSelectedStyle CssClass="selectedMenu" />
    <Items>
        <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home"/>
        <asp:MenuItem NavigateUrl="~/Imports.aspx" Text="Import"/>
        <asp:MenuItem NavigateUrl="~/Submission.aspx" Text="Insert Submission"/>
        <asp:MenuItem NavigateUrl="~/Reports.aspx" Text="Reports"/>
        <asp:MenuItem NavigateUrl="~/CurrencyMaintenance.aspx" Text="Currency Maintenance" />
        <asp:MenuItem NavigateUrl="~/Remittance.aspx" Text="Remittance" />
    </Items>
</asp:Menu>

Check this link for more info.

I updated my description to and included my asp.NET code, where would I include the code now? Sorry but I am still new to asp.NET and C# — Ryan S, Aug 11 '11 at 12:11
Updated my code still no luck (check code + css above) , any ideas? — Ryan S, Aug 16 '11 at 12:03
Try add !important to every rule in .selectedMenu. Example: .selectedMenu {background-color: #680840 !important; color:#FFF !important} — niaher, Aug 16 '11 at 15:29

asp.NET 4.0 + CSS Problem: How to create a give a different effect for the current webpage on the menu?

1 Answers1