The Tab menu widget is available. I am still fiddling around with some more css demonstration examples. This is what it looks like (in need of some additional styling that matches your colours) in a header widgetised default theme:
and here a more generalised example using rounded tabs:
The Idea
The idea is to provide a navigation menu that looks like old tabs on the file folders - when you slid open the filing cabinet drawer there were the tabs on the files to guide you. The widget will list as many levels as you have however two or three looks the best. Four is okay. If you have a deeper structure, consider single level global navigation, plus a breadcrumb menu, with a fold pages style menu at the side.
Features
- Uses a list of unordered lists of parent pages with minimal markup
- Provides default css styling (no spans for separators), with the option to switch the default styling off to use your own
- Uses wordpress sandboxplus flavoured css tags, so will pickup any general styling too, as well as allowing you to style the tab menu yourself.
- Intended to be inserted into a widget enabled header or branding div (horizontal)
- Package consists of one plugin file and a default styling background image
- Some default images are provided for css variations. Some images allow a choice of custom colours.
Tested and Validated
The plugin has been tested on wordpress 2.5 and 2.6. The Css and the html produced have been validated by the w3c validator. The CSS has been tested on IE 7 and Firefox 2. It is fairly standard CSS. Please let me know if any problems are experienced.
CSS variations
Alternate CSS possibilities are possible, although it is proving challenging delivering the ones I want. See http://webdesign.anmari.com/css-horizontal-menu/
Download
http://wordpress.org/extend/plugins/horizontal-tab-menu-widget/
Installation
- Unzip the folder into your wordpress plugins folder.
- Activate the plugin
- Add the widget to the chosen horizontal sidebar. eg: header or branding sidebar. (Note many themes do not allow for this possibility, however you can add an additional sidebar to your header see http://codex.wordpress.org/Stepping_Into_Templates)
- That’s it - customise the css and background image to taste.
CSS Considerations
list item whitespace is an issue for both firefox and Internet Explorer (IE). See this test file