Jump to main content or area navigation.

Contact Us

EPAFiles: Web Design

Tab Styles, Template 4

Note: EPA no longer updates this information, but it may be useful as a reference or resource.

EPA builds all web content in the Drupal WebCMS as of January 2013. All new microsites and resource directories will be created using Drupal WebCMS. There is still content on EPA's legacy servers and this content will be maintained there until it is transformed and moved into the Drupal WebCMS. This information on styles and look and feel only applies to the existing content using Template 4 or older versions of EPA's template. Information for building new content is found in the EPA Web Guide.

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 your epa.gov web design, contact the Web Template Workgroup.

Jump to main content.