Skip Navigation | Groups

This site uses cookies- for more information see the Cookie Policy | Continue

Tags

Navigation

2008121302 Email to Ronx
 

Code for Tabbed Navigation Bars

The code for the Tabbed Navigation Bar


This page shows the HTML and CSS for the tabbed navigation described here. The example below is pretending to be in the Telephony section of this web site.

HTML

The HTML for the tabs below is:

 <div id="navigation">
<ul>
<li><a href="/" id="home1">Home</a></li>
<li><a href="/mainpage/telephony.aspx" id="telephony1">Telephony</a></li>
<li><a href="/gsp/Default.aspx" id="gallery">Gallery</a></li>
<li><a href="/fp/" id="webfaqs1">Web Faqs</a></li>
<li><a href="/mainpage/Links1.aspx" id="links">Links</a></li>
</ul>
<div style="clear: left;font-size:0;line-height:0;">&nbsp;</div>
</div>

Note that all the links in the above navigation bar go to this page.

CSS

For all pages

This CSS is applied to all pages. It can be in a linked style sheet (recommended), a non-editable area in the <head> of a DWT or master page, or copied into the <head> section of every page.

<style type="text/css">
#navigation ul {list-style: none; margin: 0; padding: 0;}
#navigation li {margin: 0 1px; float: left; width: 100px; height: 33px; text-align: center;}
#navigation li a {background: url(images/tab-link.gif) no-repeat; display: block; text-decoration: none; padding: 10px 0; font-weight:700;color:blue;}
#navigation li a:hover {background: url(images/tab-hov.gif) no-repeat;}
</style>

Specific Pages

The CSS here is specific for the page. This determines the background for the tab for the section the page is in, and will be different for different sections. Note that this example assumes that a DWT is used for all pages, so the page specific part is placed in an editable region.

<!-- #BeginEditable "tabnav" -->
<style type="text/css">
#telephony1 {background: url(images/tab-press.gif) no-repeat !important;}
</style>
<!-- #EndEditable -->

If an asp.NET masterpage is used, then a place holder would be created in the <head> of the masterpage, and the example would be similar to:

<asp:Content id="Content3" runat="server" contentplaceholderid="head">
<style type="text/css">
#telephony1 {background: url(images/tab-press.gif) no-repeat !important;}
</style>
</asp:Content>

The id (#telephony1 in this case) corresponds to the id of the link in the section tab for the page - for a page in the Web Faqs section the css changes to:

#webfaqs1 {background: url(images/tab-press.gif) no-repeat !important;}

The styles are placed in an editable region in a DWT, or a content place holder in a master page.