This example demonstrates how to skin a Menu widget as well as how to
transform an existing
<ul> element into an
operating-system-like menu via the technique of
Progressive Enhancement: If
<ul> element will be
transformed into a Menu widget.
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
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.