• subscribe
  • twitter

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.