I am struggling to find a way of implementing a tab style menu system in ASP.net. The tabs look great from the HTML/CSS standpoint and are implemeted in the Master page so I don't have access to the body tag from the content page. what I am trying to work out is how to vary the "active tab" based upon the page the user is accessing.
I can think of several ways of doing this:
- Dynamicly generate the HTML at each page load
- Manipulate the list items in the Page_Load
- Use jQuery to manipulate the selected tab class
I have an additional problem which seems to make some solutions unsuitable; one tab may incoporate several different page names, so for example the Courses tab should be selected for both Default.aspx and CourseDetail.aspx.
None of these seem particuarly elegant, I get the feeling that there is a better way of doing this in ASP.net but I don't know what I am looking (or searching) for.
HTML:
<div id="tabs">
<ul>
<li class="selectedtab"><a href="/">Courses</a></li>
<li><a href="#">My Courses</a></li>
<li><a href="#">Administration</a></li>
</ul>
</div>
CSS:
#head ul
{
list-style: none;
padding:0;
margin:0;
}
#head li
{
display: inline;
border: solid;
border-width: 1px 1px 0 1px;
margin: 0 0.5em 0 0;
background: #EEE;
font-size: large;
font-weight: bold;
padding-top: 0.3em;
}
#head li a
{
padding: 0 1em;
text-decoration: none;
color: Black;
}
#head .selectedtab
{
padding-bottom: 1px;
background: white;
border-bottom: 1px solid white;
}
#tabs
{
text-align: right;
width: 100%;
border-bottom: 1px solid;
}