ASP.net Highlighting current tab in Navigation Bar in a Master Page.

Question

4.00/5 (1 vote)

See more:

I am trying to get the current tab to be highlighted on a navigation bar to make my pager look more user friendly.

I have been unable to use css as the the pseudo classes only work when the page is clicked and reverts to page visited rather than active.

I understand JQuery can be used in this case.
I have an empty jquery script at the bottom of my master page.

my html in my masterpage is as follows:

ASP.NET

<div class="clear hideSkiplink">
       <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu"
           EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal"
           onmenuitemclick="NavigationMenu_MenuItemClick">
           <Items>
               <asp:MenuItem NavigateUrl="~/Index.aspx" Text="Home" />
               <asp:MenuItem NavigateUrl="~/About.aspx" Text="About"/>
               <asp:MenuItem NavigateUrl="~/Contact.aspx" Text="Contact"/>
               <asp:MenuItem NavigateUrl="~/Admin/EditPageContent.aspx" Text="Edit Conetent"/>
               <asp:MenuItem NavigateUrl="~/Portfolio.aspx" Text="Portfolio"/>
               <asp:MenuItem NavigateUrl="~/Admin/AddToPortfolio.aspx" Text="Manage Portfolio"/>
           </Items>
       </asp:Menu>
   </div>

i am not sure what jquery to use to make the background change stay until anothe rmenu item is clicked.

Posted 28-Feb-13 1:20am

Member 9599975

Updated 28-Feb-13 4:18am

v2

Add a Solution

1 solution

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Member 5414644 · Answer 1 · 2013-02-28T05:36:00

One of the quickest solution I would suggest is that put the below code on every page load and replace "Home" with every page name.

Note: There could be many other ways of doing this... One of the quickest way is server side coding as you have only 6 pages.

C#

if (!IsPostBack)
            {
                Menu M = (Menu)this.Master.FindControl("NavigationMenu");
                foreach (MenuItem item in M.Items)
                {
                    if (item.Text == "Home")//Replace Home with the page name
                    {
                        item.Selected = true;
                    }
                }
            }

ASP.net Highlighting current tab in Navigation Bar in a Master Page.

1 solution

Solution 1

Add your solution here

Preview 0

ASP.net Highlighting current tab in Navigation Bar in a Master Page.

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us