---------------
Copyright 2007 - http://www.thecredence.com, Feel free to use the code though a link back to the site is always appreciated :)

This is text version of the article http://www.thecredence.com/create-drop-down-menu-using-yui-yahoo-user-interface-library/ 
---------------
---------------

The Web is evolving. It is not how it was few years back. Gone are those days when websites meant a set of static pages that had white background, one-two images. Now people want desktop experience in their browser; and what is a desktop with out a menubar with drop-down menus. Drop down menu can be implemented in many ways. But instead of hand coding from scratch, we will use YUI or Yahoo User Interface Library. It is a new yet one the best JS library out there.

Perquisites and installation

Download YUI from <a href="http://developer.yahoo.com/yui/download/">here</a>, decompress and put it in an appropriate directory that is accessible from your site. YUI is divided into packages such DOM, menu etc. Some packages depends on other packages. Our menu package depends on Event, DOM and Container. We will have to include them too.

The Beginning

First we will include the important files. 

<link rel="stylesheet" type="text/css" href="yui/build/reset/reset.css">
<link rel="stylesheet" type="text/css" href="yui/build/fonts/fonts.css">
<link rel="stylesheet" type="text/css" href="yui/build/menu/assets/menu.css">
<script type="text/javascript" src="yui/build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="yui/build/event/event.js"></script>
<script type="text/javascript" src="yui/build/dom/dom.js"></script>
<script type="text/javascript" src="yui/build/menu/menu.js"></script> 

These files include three CSS files that is used to style the menu and container files for each package. You can also change the look and feel of the menu by modifying the css. Now let’s build up the markup. The markup for the menu will be an unordered list. That is the “ul” tag. Lets look at the code.

<button id="menutoggle">Show Menu</button>
        <div id="basicmenu" class="yuimenu">
            <div class="bd">
                <ul class="first-of-type">
                    <li class="yuimenuitem"><a href="http://mail.yahoo.com">Yahoo! Mail</a></li>
                    <li class="yuimenuitem"><a href="http://addressbook.yahoo.com">Yahoo! Address Book</a></li>
                    <li class="yuimenuitem"><a href="http://calendar.yahoo.com">Yahoo! Calendar</a></li>
                    <li class="yuimenuitem"><a href="http://notepad.yahoo.com">Yahoo! Notepad</a></li>
                </ul>            
            </div>
        </div> 


This may seem very complex. But its not actually. The menu will be held in a container div that will have id “test” and class “yuimenu”. This class tells this is a menu. Now another container div called “bd”. The start of menu will be the <ul> tag. The <li> tags inside <ul> will held each of the menu items. So it will have a class of “yuimenuitem”. There is some example menu items. But you will still see no effect unless the menu is fully initialized. To do it, put this code on the head section after the file includes. 


<script type="text/javascript">
            YAHOO.example.onMenuReady = function(p_oEvent) {
                var oMenu = new YAHOO.widget.Menu("basicmenu", { fixedcenter: true });
                oMenu.render();
                oMenu.show();
                function onMenuToggleMouseDown(p_oEvent) {
                    YAHOO.util.Event.stopPropagation(p_oEvent); 
                    oMenu.show();
                }
                YAHOO.util.Event.addListener("menutoggle", "mousedown", onMenuToggleMouseDown);
            }
            YAHOO.util.Event.onContentReady("basicmenu", YAHOO.example.onMenuReady);
        </script>


As you can see the menu is initialized by the “new YAHOO.widget.Menu("basicmenu", { fixedcenter: true });” This takes several arguments. The first being the id of the menu div, while the second is a list of options. You will find out about all the options in the API documentation.
When you view the page you will see a menu just like “start menu”. Just change the css to match your sites look and feel. You can also add multi tier menu. By adding another <ul> tag inside a <li> tag. So I hope you will add some cool menus in your site.