YUI recommends YUI3.

YUI 2 has been deprecated since 2011. This site acts as an archive for files and documentation.

This documentation is no longer maintained.

YUI Library Examples: Menu Family: OS-Style Programs Menu

Menu Family: OS-Style Programs Menu

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 JavaScript is disabled the content of the Menu will still be available. When JavaScript is enabled, the <ul> element will be transformed into a Menu widget.

Begin by adding the Menu markup to page, leaving off any Menu-specific CSS class names from the HTML elements to ensure the markup isn't rendered as a Menu widget if JavaScript is disabled.

1<div id="yproducts"
2    <div class="bd"
3        <ul> 
4            <li><a href="#">Products</a> 
5                <div id="products"
6                    <div class="bd"
7                        <ul> 
8                            <li><a href="http://mail.yahoo.com">Yahoo! Mail</a></li
9                            <li><a href="http://addressbook.yahoo.com">Yahoo! Address Book</a></li
10                            <li><a href="http://calendar.yahoo.com">Yahoo! Calender</a></li
11                            <li><a href="http://notepad.yahoo.com">Yahoo! Notepad</a></li
12                            <li><a href="http://messenger.yahoo.com">Yahoo! Messenger</a></li
13                            <li><a href="http://360.yahoo.com">Yahoo! 360</a></li
14                            <li><a href="http://www.flickr.com">Flickr Photo Sharing</a></li
15                            <li><a href="http://finance.yahoo.com/">Finance</a></li
16                            <li><a href="http://entertainment.yahoo.com/">Entertainment</a> 
17                                <div id="entertainmentproducts"
18                                    <div class="bd"
19                                        <ul> 
20                                            <li><a href="http://music.yahoo.com/">Yahoo! Music</a></li
21                                            <li><a href="http://movies.yahoo.com/">Yahoo! Movies</a></li
22                                            <li><a href="http://tv.yahoo.com/">Yahoo! TV</a></li
23                                        </ul> 
24                                    </div> 
25                                </div> 
26                            </li> 
27                        </ul> 
28                    </div> 
29                </div> 
30            </li> 
31            <li id="search"><href="http://search.yahoo.com/">Search</a> 
32                <div id="searchproducts"
33                    <div class="bd"
34                        <ul> 
35                            <li><a href="http://images.search.yahoo.com/images">Yahoo! Image Search</a></li
36                            <li><a href="http://dir.yahoo.com/">Yahoo! Directory</a></li
37                            <li><a href="http://local.yahoo.com">Yahoo! Local</a></li
38                            <li><a href="http://news.search.yahoo.com/news">Yahoo! News Search</a></li
39                            <li><a href="http://search.yahoo.com/people">Yahoo! People Search</a></li
40                            <li><a href="http://search.yahoo.com/products">Yahoo! Product Search</a></li
41                        </ul> 
42                    </div> 
43                </div>                     
44            </li> 
45            <li id="help"><href="http://help.yahoo.com/">Help</a></li
46        </ul> 
47    </div> 
48</div> 
view plain | print | ?

Use the onContentReady 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 Menu widget.

1/*
2     Initialize and render the MenuBar when its elements are ready 
3     to be scripted.
4*/ 
5 
6YAHOO.util.Event.onContentReady("yproducts"function () { 
7 
8 
9    /*
10        Apply the "ytoolbar" class to the <H1> so that it is styled 
11        like an application toolbar.
12    */ 
13 
14    var oH1 = document.getElementsByTagName("h1")[0]; 
15 
16    YAHOO.util.Dom.addClass(oH1, "ytoolbar"); 
17 
18 
19    /*
20         Instantiate a Menu:  The first argument passed to the 
21         constructor is the id of the element in the page 
22         representing the Menu; the second is an object literal 
23         of configuration properties.
24    */ 
25 
26    var oMenu = new YAHOO.widget.Menu("yproducts", { zindex: 2 }); 
27 
28 
29    /*
30         Aligns the bottom-left corner of Menu instance to the  
31         top-left corner of the Yahoo! anchor element that is 
32         its context element.
33    */ 
34 
35    function positionMenu() { 
36 
37        oMenu.align("bl""tl"); 
38 
39    } 
40 
41 
42    // "click" handler for the "Go to..." menu item 
43 
44    function onGotoClick() { 
45     
46        var sURL = window.prompt("Enter a URL: ",""); 
47 
48        if (sURL && sURL.length > 0) { 
49             
50            document.location = sURL; 
51 
52        } 
53     
54    } 
55 
56 
57    /*
58          Add an additional item to the Menu instance.  Unlike the 
59          other items in the Menu instance, this item is added via 
60          script since its functionality requires JavaScript.
61    */ 
62 
63    oMenu.addItem({ text: "Go to...", id: "goto", onclick: { fn: onGotoClick } }); 
64 
65 
66    /*
67        "beforeShow" event listener - used to position the 
68        root Menu instance when it is displayed.
69    */ 
70 
71    oMenu.subscribe("beforeShow"function () { 
72     
73        if (this.getRoot() == this) { 
74 
75            positionMenu(); 
76 
77        } 
78     
79    }); 
80 
81 
82    /*
83         Call the "render" method with no arguments since the 
84         markup for this menu already exists in the pages.
85    */ 
86 
87    oMenu.render(); 
88 
89 
90    /*
91        Position the bottom-left corner of the root menu to the 
92        top-left corner of the "Yahoo!" anchor element.
93    */ 
94 
95    oMenu.cfg.setProperty("context", ["yahoo""bl""tl"]); 
96 
97 
98    // "click" event handler for "Yahoo!" button 
99 
100    function onYahooClick(p_oEvent) { 
101 
102        // Position and display the menu 
103         
104        positionMenu(); 
105 
106        oMenu.show(); 
107 
108 
109        // Stop propagation and prevent the default "click" behavior 
110 
111        YAHOO.util.Event.stopEvent(p_oEvent); 
112         
113    } 
114 
115 
116    /*
117        Assign a "click" event handler to the "Yahoo!" anchor that 
118        will display the menu
119    */ 
120     
121    YAHOO.util.Event.addListener("yahoo""click", onYahooClick); 
122 
123 
124    /*
125        Add a "resize" event handler for the window that will 
126        reposition the H1 "toolbar" to the bottom of the viewport
127    */ 
128 
129    YAHOO.widget.Overlay.windowResizeEvent.subscribe(positionMenu); 
130 
131}); 
view plain | print | ?

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.

1/* Define a new style for each menu */ 
2
3.yui-skin-sam .yuimenu { 
4 
5    line-height2;  /* ~24px */ 
6    *line-height1.9/* For IE */ 
7 
8} 
9
10.yui-skin-sam .yuimenu .bd { 
11 
12    border-width2px
13    border-color: #ddd #666 #666 #ddd; 
14    border-stylesolid
15    background-color: #ccc; 
16 
17} 
18 
19 
20/* Define a new style for each MenuItem instance. */ 
21
22.yui-skin-sam #yproducts li.yuimenuitem .yuimenuitemlabel { 
23 
24    backgroundurl(http://l.yimg.com/a/i/us/nt/b/purpley.1.0.gif) no-repeat 4px; 
25    padding0 20px 0 24px
26 
27} 
28
29.yui-skin-sam #yproducts li.yuimenuitem { 
30 
31    /*
32        For IE 7 Quirks and IE 6 Strict Mode and Quirks Mode:
33        Used to collapse superfluous white space between <li> 
34        elements that is triggered by the "display" property of the
35        <a> elements being set to "block."
36    */ 
37 
38    _border-bottomsolid 1px #ccc; 
39 
40} 
41 
42 
43/* Define a new style for a MenuItem instance's "selected" state. */ 
44
45.yui-skin-sam #yproducts .yuimenuitem-selected { 
46 
47    background-color: #039
48 
49} 
50
51.yui-skin-sam #yproducts .yuimenuitemlabel-selected { 
52 
53    color: #fff; 
54 
55} 
56 
57 
58/* Add unique icons to some of the MenuItem instances. */ 
59
60.yui-skin-sam #yproducts li#help .yuimenuitemlabel { 
61 
62    background-imageurl(http://l.yimg.com/a/i/nt/ic/ut/bsc/hlp16_1.gif); 
63 
64} 
65
66.yui-skin-sam #yproducts li#search .yuimenuitemlabel { 
67 
68    background-imageurl(http://l.yimg.com/a/i/nt/ic/ut/bsc/srch16_1.gif); 
69 
70} 
71
72.yui-skin-sam #yproducts li#goto .yuimenuitemlabel { 
73 
74    background-imageurl(http://l.yimg.com/a/i/nt/ic/ut/bsc/arorght16_1.gif); 
75 
76} 
view plain | print | ?

Menu Family Examples:

More Menu Family Resources:

Copyright © 2013 Yahoo! Inc. All rights reserved.

Privacy Policy - Copyright Policy - Job Openings