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.
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"><a 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"><a 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 | |
6 | YAHOO.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-height: 2; /* ~24px */ |
6 | *line-height: 1.9; /* For IE */ |
7 | |
8 | } |
9 | |
10 | .yui-skin-sam .yuimenu .bd { |
11 | |
12 | border-width: 2px; |
13 | border-color: #ddd #666 #666 #ddd; |
14 | border-style: solid; |
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 | background: url(http://l.yimg.com/a/i/us/nt/b/purpley.1.0.gif) no-repeat 4px; |
25 | padding: 0 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-bottom: solid 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-image: url(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-image: url(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-image: url(http://l.yimg.com/a/i/nt/ic/ut/bsc/arorght16_1.gif); |
75 | |
76 | } |
view plain | print | ? |
All YUI 2.x users should review the YUI 2.8.2 security bulletin, which discusses a vulnerability present in YUI 2.4.0-2.8.1.
Copyright © 2013 Yahoo! Inc. All rights reserved.