Create a vertical tabbed panel with Spry
09 Individual tabs
09 Individual tabs
Open the associated SpryTabbedPanels.css document and switch to Code view. Locate the .VTabbedPanels .TabbedPanelsTab class, select all the code, and paste below three times. Now rename the code .VTabbedPanels .TabbedPanelsTab1, .VTabbedPanels .TabbedPanelsTab2 and .VTabbedPanels .TabbedPanelsTab3.
10 Extra classes
Now locate the .TabbedPanelsTab class and copy all the code and paste three versions under the initial code. Leave the original code, but rename the other three instances as .TabbedPanelsTab1, .TabbedPanelsTab2, .TabbedPanelsTab3. Now each tab can be styled separately. Add a background colour to .VTabbedPanels .TabbedPanelsTab2 as an example.
11 Background images
The widget is now effectively a blank canvas. Now create an image to the dimensions of the individual tab for each tab to be used in the widget. Now head to .VTabbedPanels .TabbedPanelsTab in the CSS Panel, double-click to open, click Background and add the background image. Repeat for the remaining tabs.
12 Content
Finally, to complete the widget the relevant content needs to be added. In the Design view window hover the mouse cursor over the top of a tab and click the eye icon to open the related panel. By default this is a single div tag. To populate each panel add div tags, style and include images and text as if designing any other page.
to find out about all the latest web development,
news, reviews, previews, interviews, features and a whole more.
nice! very useful!
thanks!
Really cool post! Many thanks. LC
I’m a stupid head.
I can’t work out how to do the tutorial… and tie my shoes.
bye
Also, I’m kinda racist.
Is it possible to pet the tabs to be on the right hand side?
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!
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?
Thanks!