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/).