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 Ndocmhe 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 </head> tag

...
      <!-- JavaScript Dependencies for Tabview: -->
      <script src="http://yui.yahooapis.com/2.5.2/build/yahoo-dom-event/yahoo-dom-event.js" type="text/javascript"><!--mce:0--></script>
      <script src="http://yui.yahooapis.com/2.5.2/build/element/element-beta-min.js" type="text/javascript"><!--mce:1--></script>
      <!-- Source file for TabView -->
      <script src="http://yui.yahooapis.com/2.5.2/build/tabview/tabview-min.js" type="text/javascript"><!--mce:2--></script>
      <!-- Source file for TabView -->
      <script src="http://yui.yahooapis.com/2.5.2/build/tabview/tabview-min.js" type="text/javascript"><!--mce:3--></script>
 </head>

Place this code below the <body> tag

<body>
    <script type="text/javascript">
         var myTabs = new YAHOO.widget.TabView("menu_content");
    </script>

Step 2: Including Markup for the Tabs - Place this where you want your tabbed menu. I have it in the header.php file

<div id="menu_content" class="yui-navset">
          <ul class="yui-nav">
	        <li class="selected"><a><em>Most Viewed</em></a></li>
	        <li><a><em>Most Emailed</em></a></li>
	        <li><a><em>Recent Articles</em></a></li>
          </ul>          
          <div class="yui-content">
                <div><!-- Place in here  list of Popular Articles or equivalent plugin --></div>
                <div>...</div>
                <div>...</div>
         </div>
</div>

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.

Also Read

3 Comments;

  1. Bebel
    6:57 pm on August 12th, 2008

    Thx for tipping me man, i’m unto building my own theme with YUI

  2. Scott F
    4:30 am on August 13th, 2008

    Thanks a lot for the tutorial.
    I love Tabbed menus!

  3. AF
    5:04 am on November 8th, 2008

    Fantastic guide, do you think there’s any chance that you could provide one that implements pictures as well?

Share Your Thoughts