WordPress – Creating Tab Menus with Yahoo! YUI Tab View
The Yahoo! User Interface Library (YUI) is a set of JavaScript utilities and controls, for building interactive web applications. The YUI Tab View is part of that vast library – – it help you to quickly create and design Tab Menus.
The advantage of Tab Views is that they allow you add more content to your web page whilst occupying less space. If well done they won’t slow down website-browsing.
If you’re using the Ndomche Summary Theme – II Columns for WordPress or Blogger, then the best place to insert this tabbed menu is the header — like on this blog. Don’t bother to contact me for more info.
Step 1: Including JavaScript files – Place above the tag
...
Place this code below the tag
Step 2: Including Markup for the Tabs – Place this where you want your tabbed menu. I have it in the header.php file
Make sure the number of items in the “yui-naveset” and “yui-content” correspond.
Step 3: Styling with CSS – Place in your CSS file and customize to taste
/* Yui Tabbed Menu * /
.yui-navset {width:410px; float:left; height:134px; border:1px solid #666; margin-left:4px; margin-bottom:4px; display: inline; }
.yui-content {width:400px; clear:both; height:88px; margin-left:4px; margin-top:0px;}
.yui-nav {padding:1px 0px 3px 0px; margin-left:0px; font:12px Verdana; border-bottom:1px solid #666; list-style-type:none; text-align:center;}
.yui-nav li{display:inline; margin:0px;}
.yui-nav li a{text-decoration:none; padding:3px 7px; margin-right:3px; border:1px solid #666; border-bottom:none;
background-color:#FFF; color:#2d2b2b;}
.yui-nav li a:visited{color:#2d2b2b;}
.yui-nav li a:hover{background-color:#ca0002; color:black;}
.yui-nav li a:active{color:black;}
.yui-nav li.selected a{position:relative; top:1px; padding-top:4px; background-color:#DBFF6C; color: black;}
CSS is magic, you can modify it as much as you want.