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;
}
Like this:
Be the first to like this post.