In the last installment of the CSS Starter Page series, we added vertical navigation to the sidebar. We used CSS to create the look of buttons for a set of links within an unordered list. This time around we're going to add horizontal navigation in the form of tabs. We are going to use the famous Sliding Door technique, taking our code from Adrian Senior's CSS Tabbed Navigation Sets for Sliding Doors Navigation.

This tutorial includes all the files you'll need to play along at home, as well as a completed layout folder in case you need to compare your work.

The CSS Starter Page Series:
The CSS Starter Page Series - Part 1: Faux-Column Images
The CSS Starter Page Series - Part 2: More Background Images
The CSS Starter Page Series - Part 3: Three-Column Fluid Background Images
The CSS Starter Page Series - Part 4: Rounded Corner Background Images
The CSS Starter Page Series - Part 5: Shadows and Rounded Corner Background Images
The CSS Starter Page Series - Part 6A: Adding Navigation Schemes
The CSS Starter Page Series - Part 6B: Adding Navigation Schemes Part Two...

Related Articles

• The CSS Starter Page Series Part 7: Adding A Spry Menu Bar
• The CSS Starter Page Series Part 6c: Adding Navigation Schemes Part Three
• Extending Dreamweaver CS4: Part 2 - jQuery UI Calendar
• Extending Dreamweaver CS4 - Part 1: The TNC Lightbox
• Dreamweaver Built-In CSS Help Features - Part 3: CSS Layout Backgrounds
• The Adobe BrowserLab Web Service
• CMX JumpStart: Siberia
• Introducing CMX JumpStart Siberia
• Dreamweaver's Built-In CSS Help Features: Part 2 - CSS Layout Box Model
• Dreamweaver Built-In CSS Help Features - Part 1: CSS Layout Outlines

• A Beginner's Guide to Spry - Part 5: Spry Menu Bar
• The CSS Starter Page Series Part 6A: Adding Navigation Schemes
• A Beginner's Guide to Spry - Part 4: Spry Tabbed Panels
• A Beginner's Guide to Spry - Part 3: The Spry Accordion
• Introducing CMX JumpStart: Nairobi Flexible
• CMX JumpStart: Nairobi-Flexible
• A Beginner's Guide to Spry - Part 2: The Spry Collapsible Panel
• CMX JumpStart: Isle of Skye
• Introducing CMX JumpStart Isle of Skye
• Embedding Flash Content, Demystified - Part 1: Introduction