Begin by adding the Menu markup to page, leaving off any Menu-specific CSS class names from the HTML elements to ensure the markup isn't rendered as a Menu widget if JavaScript is disabled.

Use the onContentReady method of the Event utility to instantiate the Menu as soon as its markup is available for scripting. Once the Menu is instantiated, the necessary Menu CSS class names will be appended to each element, so that the <ul> element will be rendered will be rendered as a Menu widget.

Skinning the Menu widget is done using CSS. The stylesheet used for other Menu examples is a minified version of the menu-core.css and menu-skin.css files. When customizing the Menu skin, use the raw source files as a reference.

The menu-core.css file includes foundational styling that controls basic layout and positioning, whereas the menu-skin.css file is used to apply colors, borders, padding, etc. Skinning can be accomplished by either overriding the styles defined in the menu-skin.css file, or by creating an entirely new skin file. When overriding styles, place them in a separate file to simplify integrating with YUI updates. The follow example illustrates how to override some of the default styles defined by the "Sam" skin.

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.