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:
<link rel="stylesheet" type="text/css" rel="nofollow" target="_blank" href = "yui/fonts-min.css">
<link rel="stylesheet" type="text/css" rel="nofollow" target="_blank" href = "yui/assets/menu.css">
<script type="text/javascript" src="yui/yahoo-dom-event.js"></script>
<script type="text/javascript" src="yui/container_core-min.js"></script>
<script type="text/javascript" src="yui/menu-min.js"></script>
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:
<div id="mymenu" class="yuimenu">
<div class="bd">
<ul class="first-of-type">
<li class="yuimenuitem"><a rel="nofollow" target="_blank" href = "aboutus.htm">About Us</a></li>
<li class="yuimenuitem"><a rel="nofollow" target="_blank" href = "products.htm">Products</a></li>
<li class="yuimenuitem"><a rel="nofollow" target="_blank" href = "myaccount.htm">My Account</a></li>
<li class="yuimenuitem"><a rel="nofollow" target="_blank" href = "developer.htm">Developer Connection</a></li>
<li class="yuimenuitem"><a rel="nofollow" target="_blank" href = "partners.htm">Our Partners</a></li>
<li class="yuimenuitem"><a rel="nofollow" target="_blank" href = "sitemap.htm">Sitemap</a></li>
</ul>
</div>
</div>
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.
Next: Rendering and Displaying the Menu >>
More JavaScript Articles
More By Dan Wellman
/ 16 
