Using the YUI Menu Control
(Page 1 of 4 )
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.
A downloadable
zip file is available for this article.
All you'll need to complete this tutorial are the files indicated below and a simple text editor. To add custom images to the menu, you may require the services of an image editing application, but feel free to use the images I have provided with the source files.
Although you can reference the library files held on the Yahoo! server to save you downloading the whole library, I found it easier when working with the YUI to create an offline store of the files that you need. Doing this makes it easier to address the various files from within your code.
To get started, create a new folder on your C: drive called yuimenu and then create another one called yui inside of that one. You'll need to download a copy of the YUI, which can be obtained from the yui site. Once you have downloaded it, open it and look for the following files which the menu control depends on for its behavior and default appearance:
fonts_min.css
menu.css
yahoo-dom-event.js
container_core-min.js
menu-min.js
The library is separated into several sections and consists of hundreds of separate files; it features a build section, an examples section and a documentation section. The files you need will all be in the build section. If you look in the menu folder within the library (where several of the required files can be found), you'll see an assets folder containing images used by the library as well as the menu.css file. Copy this folder and all its contents to your yui folder as well.
For the record, the _min extension on most of the required files means that all of the helpful comments and white space have been removed from the files. They will function in exactly the same way as the full versions of the files, but have been designed to be used across the Internet and are therefore as minimal as possible.
Next: Creating a Basic Menu >>
More JavaScript Articles
More By Dan Wellman
/ 9 
