-
April 13th, 2011, 08:34 PM
#1
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...
- 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.
- 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>
- 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...
- 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.
- 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
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
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|