Jump to main content or area navigation.

Contact Us

EPA Design, V4

Tab Styles, Template 4

Note: These styles apply only to Template 4 pages. You can only use one set of tabs (vertical or horizontal). The tab links will link to other pages within the same topic area and will appear on every page within the (sub)topic area. The horizontal tab layer in the WebCMS will not produce highlighting but it does provide a single place to update. The vertical tabs will be in the content section (so you must add it to multiple pages), and you can add the styles needed to produce highlighting by page.

How-to

These tabs are unordered lists with an unique identifier (ID). For horizontal tabs, use tabs. For vertical tabs, use tabs-vert.

If you can edit per page, you can use a class of "on" to indicate which page is currently open.

Horizontal Tabs ("tabs")

<ul id="tabs">
  <li><a href="#">Introduction</a></li>
  <li><a href="#">Hyperlink Two</a></li>
  <li><a href="#">Hyperlink Three</a></li>
  <li class="on"><a href="#">Hyperlink Four</a></li>
  <li><a href="#">Hyperlink Five</a></li>
  <li><a href="#">Hyperlink Six</a></li>
  <li><a href="#">Hyperlink Seven</a></li>
</ul>

Vertical Tabs ("tabs-vert")

<ul id="tabs-vert">
  <li><a href="#">Introduction</a></li>
  <li><a href="#">Hyperlink Two</a></li>
  <li><a href="#">Hyperlink Three</a></li>
  <li class="on"><a href="#">Hyperlink Four</a></li>
  <li><a href="#">Hyperlink Five</a></li>
  <li><a href="#">Hyperlink Six</a></li>
  <li><a href="#">Hyperlink Seven</a></li>
</ul>

For help with these pages, contact the Web Template Workgroup.

Jump to main content.