• RSS
  • 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

1
</head>

tag

1
2
3
4
5
6
7
8
9
...

      <!-- 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

1
<body>

tag

1
2
3
4
<body>

    <script type="text/javascript">

         var myTabs = new YAHOO.wclassget.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

1
2
3
4
5
6
7
8
9
10
11
12
<div class="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

1
2
3
4
5
6
7
8
9
10
11
12
13
/*  Yui Tabbed Menu  * /

.yui-navset {wclassth:410px; float:left; height:134px; border:1px  solclass #666; margin-left:4px; margin-bottom:4px; display: inline; } 

.yui-content {wclassth: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 solclass #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 solclass #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.

9 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?

  4. Martin Kaba
    11:55 pm on January 8th, 2009

    Of course, with CSS everything is possible

  5. sanjo_chan
    8:49 am on February 11th, 2009

    I found a Tabbed Menu tutorial using the Yahoo! TabView API. This is exactly what I’ve been looking for! http://tinyurl.com/b8cekj

  6. Frank Adams
    2:13 pm on April 29th, 2009

    How do you center those tabs?

  7. Martin Kaba
    1:26 pm on May 3rd, 2009

    WordPress How-To Create Tab Menus with Yahoo! YUI Tab View http://tinyurl.com/b8cekj

  8. Martin Kaba
    1:50 pm on May 8th, 2009

    RT @diefenbach Nice crash course about #YUI Grids #CSS. http://bit.ly/y4Ey0 #webdesign http://tinyurl.com/b8cekj

  9. Martin Kaba
    1:26 pm on July 11th, 2009

    @webupd8 You can also create Tab Menus with Yahoo! YUI Tab View , very easy-to-do http://bit.ly/46JmmE