Official website for Web Designer - defining the internet through beautiful design
Author: Imagine Admin
10th May 2010

Create a vertical tabbed panel with Spry

The Spry Tabbed Panels widget eliminates the need to code

Create a vertical tabbed panel with Spry

The Spry Tabbed Panels widget eliminates the need to code. Here we demonstrate how to change the tab orientation and style with CSS

The beauty of multi-tabbed windows is that designers can cram lots of information into a single space. However, creating such an element involves coding. A frightening thought for non-developers, but Dreamweaver eases the burden with the assistance of its Spry Tabbed Panels widget.
The Tabbed Panels widget provides all the necessary assets, JavaScript, HTML and CSS, needed to add tabbed elements into a page. The initial set up is basic, it provides a simple, horizontal, set of tabbed panels with minimal styling.
The accompanying CSS file includes a set of classes that instantly set the orientation of the tabs from horizontal to vertical. This provides the basis of a vertical tabbed panel. To take the widget beyond its standard state the CSS can be modified to change background colours, hover states, fonts and add new content. This tutorial is going to demonstrate how to create the vertical tabs, restyle, add background images and integrate related content to create a much more stylised widget.

(This tutorial orginally appeared in Web Designer issue 163, authored by Steve Jenkins)

01 New class

Create a vertical tabbed panel with Spry

The Spry Tabbed Panels code needs to be added. Place the cursor and head to the Insert menu and select Spry>Spry Tabbed Panels and save. The first line in the HTML code contains the div id and class. Change the class from <div id=”TabbedPanels1” class=”TabbedPanels”> to <div id=”TabbedPanels1” class=”VTabbedPanels”> and save.

02 More tabs

Create a vertical tabbed panel with Spry

Place the cursor over the current tabs to reveal the blue Spry Tabbed Panels tag and click. The Properties window will revert to Tabbed Panels. Click ‘+’ to add another tab, repeat for each tab. Use the up and down arrows to reposition the currently selected tab. Now select the default tab from the Default panel drop-down list.

03 Change orientation

Create a vertical tabbed panel with Spry

The tabs are still effectively normal tabs placed to the left of the content. To create vertical tabs, first double-click .VTabbedPanels .TabbedPanelsTab in the CSS panel and select Box. Now add a height and width, ie 25 pixels wide by 325 pixels high and set Float to left so they sit side-by-side.

Pages: 1 2 3

  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.
    • Joe Designer

      nice! very useful!


    • Laurence Caro

      Really cool post! Many thanks. LC

    • Jack Bannister-Sutton

      I’m a stupid head.

      I can’t work out how to do the tutorial… and tie my shoes.


    • Jack Bannister-Sutton

      Also, I’m kinda racist.

    • dave m

      Is it possible to pet the tabs to be on the right hand side?

    • designer#1

      Like Dave M, I want to know if it’s possible to have the tabs on the right side and if instead of having them sideways they can be placed horizontal and one on top of the other?

      Thank you so much in advance!

    • Diane

      Dave when I create a horizonal spry menu the parent div expands and my footer div display below it. However when I use the vertical spry the parent div does not expand and my footer div is wrapping to the right instead of below the vspy menu. How can I correct this?


    • skmagiik

      Is there any way to disable the dotted lines around the tabs when you click on them? I tried outline = none; but to no success. Any email with a suggestion could be sent to