News

Create a vertical tabbed panel with Spry

newfinaltabbed

newfinaltabbed

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

tab1

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

tab2

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

tab3

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.

×