CODEWITHSUNDEEP
cssyui3
BigMac66
BigMac66

Reputation: 1538

YUI3 location of skin class changes appearance

Tested only in Firefox 9 (so far).

In the following HTML if you move the class="yui3-skin-sam" from the BODY tag to the main_menu DIV tag like so:

<div id="main_menu" class="yui3-skin-sam yui3-menu yui3-menu-horizontal yui3-menubuttonnav">

you get a very different appearance (the graphic in the menu background is missing). However if I wrap my main_menu DIV with and other DIV that applies the class="yui3-skin-sam" skin it works just fine. Why? Is it possible to get it to work on just one DIV the same way it works for the whole BODY and the wrapped DIV?

<html>
<head>
    <script src="http://yui.yahooapis.com/3.5.0/build/yui/yui-min.js">
    </script>
</head>
<body class="yui3-skin-sam">
    <div id="main_menu" class="yui3-menu yui3-menu-horizontal yui3-menubuttonnav">
        <div class="yui3-menu-content">
            <ul class="first-of-type">
                <li class="yui3-menu-item">
                    <a class="yui3-menuitem-content" href="#">Home</a>
                </li>
                <li>
                    <a class="yui3-menu-label" href="#search_menu"><em>Search</em></a>
                    <div id="search_menu" class="yui3-menu">
                        <div class="yui3-menu-content">
                            <ul>
                                <li class="yui3-menuitem">
                                    <a class="yui3-menuitem-content" href="http://www.google.ca">Google</a>
                                </li>
                                <li class="yui3-menuitem">
                                    <a class="yui3-menuitem-content" href="http://www.yahoo.ca">Yahoo</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <script>
        YUI().use('node-menunav', function(Y) 
        {
            var menu = Y.one("#main_menu");

            menu.plug(Y.Plugin.NodeMenuNav);

            menu.get("ownerDocument").get("documentElement").removeClass("yui3-loading");
        });
    </script>
</body>

Upvotes: 0

Views: 490

Answers (1)

mjhm
mjhm

Reputation: 16705

Nearly all of the YUI widgets use a CSS style declaration that looks like

.yui3-skin-sam .yui3-some-widget-name ... {
   ...
}

rather than

.yui3-skin-sam.yui3-some-widget-name ... {
   ...
}

So there is an implicit assumption that the widget is in a child of some container which has a skin class. This usually makes the most sense because normally you would want to group together a bunch of widgets with a consistent skin. So (as you discovered) the easiest way to apply the skin is to just have an extra containing div that applies the skin class to the menu.

Upvotes: 1

Related Questions