Skip Navigation | Groups

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



2008121301 Email to Ronx

Tabbed Navigation Bars

How to indicate the web site section a page is in using a tabbed navigation bar

The tabs in the tabbed navigation bar below show which section of the web site is in use. Each tab is given a unique ID, and CSS embedded in each page load the appropriate tab image - one background image for the section in use, and a second image for the other sections. The images are derived from those used for Interactive Buttons.

The Tab images:

The nav bar is an unordered list, with CSS to make each element float left - lining up the tabs horizontally.

The images are generated by using Insert->Interactive Button. The link and button text are left blank since these will be background images, not buttons. The three images generated are (from left to right): Link, hover and pressed.

Tab - Link Tab- hovered Tab - Pressed

The nav bar

The Tabs in this example are based on the main navigation for this web site. This page is in the Web Faqs section of the web site, so has the "pressed" background image.

The next page shows the HTML and CSS for the navigation bar, and shows how to configure the correct background images.