diff -r 000000000000 -r 40c8f766c9b8 src/cm/media/js/lib/yui/yui3.0.0/examples/node-menunav/node-menunav-7.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/src/cm/media/js/lib/yui/yui3.0.0/examples/node-menunav/node-menunav-7.html Mon Nov 23 15:14:29 2009 +0100 @@ -0,0 +1,159 @@ + + + + + YUI Library Examples: MenuNav Node Plugin: Skinning Menus Created Using the MenuNav Node Plugin + + + + + + + + + + + + + + +
+
+
+

+ + YUI 3.x Home - + +

+
+ + +
+ + + +
+
+
+
+

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

+
+
+ + +
+
+
+
+ +

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

+
+
+ + + + + +