YUI 3.x Home -

Site Search (YDN & YUIBlog):

# YUI Library Examples: MenuNav Node Plugin: Skinning Menus Created Using the MenuNav Node Plugin

Note: This is YUI 3.x. Looking for YUI 2.x?

## MenuNav Node Plugin: Skinning Menus Created Using the MenuNav Node Plugin

This example demonstrates how to skin a menu built using the MenuNav Node Plugin to look like the menus on Flickr

View example in new window.

### Creating A Custom Skin

Skinning the menus created using the MenuNav Node Plugin is done using CSS. The stylesheet used for other MenuNav Node Plugin examples is a minified version of the node-menunav-core.css and node-menunav-skin.css files. The node-menunav-core.css file includes foundational styling that controls basic layout and positioning, whereas the node-menunav-skin.css file is used to apply colors, borders, padding, etc.

Skinning can be accomplished by either overriding the styles defined in the node-menunav-skin.css file, or by creating an entirely new skin file. In either case, place custom styles in a separate file to simplify integrating with YUI updates.

When creating a custom skin, use the node-menunav-core.css and node-menunav-skin.css files as a reference. Also consult the CSS reference section of the MenuNav Node Plugin landing page, as it provides a complete list of all of the class names used by the MenuNav Node Plugin along with when and to what element(s) they are applied.

Copyright © 2009 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings