How to highlight the link of the current page

A few days ago, the owner of the website i was building ask me to highlight the menu link of the paging the user was visiting at the moment.

Ok. My first solution was the following: inserted a class attribute with the page name, loop through all the links comparing the page name with the class name and highlight it if the condition was true.

It worked, but a better idea came up.

Here’s the code i ended up with:

#menu .<%= Request.Path.Substring(Request.ApplicationPath.Length+1).ToLower().Replace(".aspx", "") %> {
            font-weight: bold;
        }

Here I create a CSS class with the page name that makes the link bold. Therefore, if the page I’m visiting is the Home.aspx, the application will create a class .home which will highlight my link containing the class attribute as “home”. If you want, you can even add the class at the server-side code then you don’t have to worry about the aspx page.

Additionaly, an easy way of separating the links by pipe, is use the CSS bellow:

.home, .profile, .contact {
     padding: 0 10px;
     border-right: 1px solid #FFF;
}
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s