Turning a List of Links into a Menu

This example demonstrates how to create a menu bar with submenus, built using basic HTML structures.

Many of the YUI components support the principle of "progressive enhancement," meaning that a website can offer basic functionality to older or more limited browsers and enhanced capabilities to those with better support for JavaScript and Cascading Style Sheets.

The navigation menu links are organized into categories by a series of "ul" (unordered list) and "li" (list item) tags. Without enhancement, the menu would appear as a simple bulleted list of links as shown as right. In fact, this is one way Yahoo makes sure its website is accessible to users with outdated browsers, browsers for the blind, or cell phone browsers.

In addition to the list structure, this content is marked up with "div" tags and identifiers that can be used to style and script it.

<div id="productsandservices" class="yuimenubar"> <div class="bd"> <ul class="first-of-type"> <li class="yuimenubaritem first-of-type"><a href="http://www.baselinemag.com">Baseline Magazine </a> <div id="communication" class="yuimenu"> <div class="bd"> <ul> <li class="yuimenuitem"><a href="http://www.baselinemag.com/category2/0,1568,655832,00.asp"> Security</a></li> <li class="yuimenuitem"><a href="http://www.baselinemag.com/category2/0,1568,655830,00.asp"> Enterprise Planning </a></li> <li class="yuimenuitem"><a href="http://www.baselinemag.com/category2/0,1568,655829,00.asp"> Supply Chain </a></li>

By writing JavaScript that targets the "id" attribute of the section of the page that includes this markup, a web developer can load this list into memory as a programming object with code like this

var oMenuBar = new YAHOO.widget.MenuBar("productsandservices", { autosubmenudisplay:true, hidedelay:750, lazyload:true });

and then write instructions for when and how the menu should be displayed. The YUI makes this sort of task easier than it would be for a programmer working with JavaScript alone.

In addition to the menu widget, this page takes advantage of several other YUI components, including the animation library (to make the menus slide down into place).

Topics

Introduction
Background: HTML, CSS, and JavaScript
Connection (AJAX)
Navigation Menu
Tabs
Animation
More Animation
Drag & Drop
Form Controls
Slider
Dialog
More