<div class="intro">

<p>

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

menus on <a href="http://www.flickr.com">Flickr</a>

</p>

</div>

<div class="example newwindow">

<a href="node-menunav-7-example.html" target="_blank" class="button">

View Example in New Window

</a>

</div>

<h2>Creating A Custom Skin</h2>

<p>

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.

</p>

<p>

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.

</p>

<p>

When creating a custom skin, use the node-menunav-core.css and node-menunav-skin.css files as a

reference. Also consult the <a href="index.html#css-reference">CSS reference</a>

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.

</p>