CSS Menu in a .Net Master Page

A quick search on the Internet for "CSS menus" reveals hundreds of websites providing free CSS based menus: horizontal menus, vertical menus, menus with tabs, menus with dropdowns, etc. Almost all of these menus operate on the same basic principle: they take an HTML unordered list and they apply CSS styles. That is, the HTML looks something like this:

The CSS makes this look like a menu or set of tabs:

The CSS has one style for the active tab (Link 3) and another style for all the other tabs. The HTML indicates which tab is active by assigning it a special CSS class:

This is where the difficulty arises when you're using a Master Page. How do you set the class for the active tab?

You can put the basic HTML list in the Master Page, but you will have to write code to set the class for the active tab. There are many ways to do this. I do it with JavaScript.

The first step is to give each list item an ID.

Add the following to the master page:



Each of the content pages (page1.aspx, page2.aspx, etc.) should implement the Master Page and include the following. On each page, this hidden span indicates which menu tab should be active.

Now we'll add some Javascript to the Master Page. Each time the Master Page loads, the Javascript code will find the span called tabid. The text of this span provides the ID of the menu tab which should be active. The Javascript code will find the menu tab and give it the "active" class.



In jQuery, the Javascript looks like this:



The downloadable code sample uses a CSS menu from Dynamic Drive CSS Library (http://www.dynamicdrive.com/style/).  Dynamic Drive CSS Library has many different CSS menus which you can download and use. In my example, I used the DD Color Tabs CSS(http://www.dynamicdrive.com/style/csslibrary/item/dd-color-tabs/P10/).