Home arrow JavaScript arrow Using the YUI Menu Control

Using the YUI Menu Control

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.

Author Info:
By: Dan Wellman
Rating: 4 stars4 stars4 stars4 stars4 stars / 26
May 02, 2007
  1. · Using the YUI Menu Control
  2. · Creating a Basic Menu
  3. · Rendering and Displaying the Menu
  4. · Changing the Styling

print this article

Using the YUI Menu Control
(Page 1 of 4 )

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:






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.

blog comments powered by Disqus

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials