I recently wrote an article that gave a general overview of the Yahoo! User Interface library, or YUI. It's a comprehensive library of utilities and controls written in AJAX for developers like you. Using it can save you time and frustration and throughout the course of this article, I'll be looking at just how easy it is to create a functional, attractive and effective navigation menu, using nothing but a little HTML and the library.
Using the YUI Menu Control - Creating a Basic Menu (Page 2 of 4 )
Now that we have the files we need, we can create a basic menu. In a new page in your text editor create the following basic page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>YUI Menu Control</title> </head> <body> <h1>YUI Menu Control Example</h1> </body> </html>
Save this as yuimenu.html. Next we need to reference the files that that the YUI menu control needs in order to work. Add the following <link> and <script> tags to the <head> of the above document:
Now we can start creating the menu. Creating the menu is extremely easy and can be done using either a standard unordered list in HTML or entirely via JavaScript. This example will look at using standard markup to create the menu. The root element of the menu must be a <div> element and the internal DOM is based on a simple <ul> element, with each menu item defined as an <li> element. A basic menu may appear as follows:
So we have a <div> element that forms the root of our menu. It needs an id so it can be addressed via the script, and should have the default class of yuimenu to give it some basic formatting. The nested <div> acts as the container for the menu and ensures that the menu is only as wide as it needs to be (take this away and it stretches across the entire browser window). The <ul> is given the class first-of-type for styling purposes, and any items we want in the menu are added as <li> elements with nested link elements. The <li> elements should all have the yuimenuitem class.
JavaScript 
/ 20 
HTML5 Boilerplate Introduction
