This example shows how to build a Full Page Layout and use Menu Control's inside different Layout Units.
First we will create the Full Page Layout with the following HTML.
1 | <body class=" yui-skin-sam"> |
2 | <div id="top1"></div> |
3 | <div id="bottom1"></div> |
4 | <div id="right1"></div> |
5 | <div id="left1"></div> |
6 | <div id="center1"></div> |
7 | </body> |
view plain | print | ? |
Now we will create the Layout instance for this content.
1 | Event.onDOMReady(function() { |
2 | var layout = new YAHOO.widget.Layout({ |
3 | units: [ |
4 | { position: 'top', height: 28, body: 'top1' }, |
5 | { position: 'right', header: 'Right', width: 300, resize: true, footer: 'Footer', collapse: true, scroll: true, body: 'right1', animate: true, gutter: '5' }, |
6 | { position: 'bottom', height: 30, body: 'bottom1' }, |
7 | { position: 'left', header: 'Left', width: 200, body: 'left1', gutter: '5' }, |
8 | { position: 'center', body: 'center1', gutter: '5 0' } |
9 | ] |
10 | }); |
11 | |
12 | layout.render(); |
13 | }); |
view plain | print | ? |
To create our Menu's we will borrow the code from these examples: Website Top Nav With Submenus From JavaScript and Website Left Nav With Submenus From JavaScript
We will create 2 private functions that will create our menus: initTopMenu
and initLeftMenu
.
1 | var initTopMenu = function() { |
2 | /* |
3 | Instantiate a MenuBar: The first argument passed to the |
4 | constructor is the id of the element in the page |
5 | representing the MenuBar; the second is an object literal |
6 | of configuration properties. |
7 | */ |
8 | |
9 | var oMenuBar = new YAHOO.widget.MenuBar("productsandservices", { |
10 | autosubmenudisplay: true, |
11 | hidedelay: 750, |
12 | lazyload: true, |
13 | effect: { |
14 | effect: YAHOO.widget.ContainerEffect.FADE, |
15 | duration: 0.25 |
16 | } |
17 | }); |
18 | |
19 | /* |
20 | Define an array of object literals, each containing |
21 | the data necessary to create a submenu. |
22 | */ |
23 | |
24 | var aSubmenuData = [ |
25 | |
26 | { |
27 | id: "communication", |
28 | itemdata: [ |
29 | { text: "360", url: "http://360.yahoo.com" }, |
30 | { text: "Alerts", url: "http://alerts.yahoo.com" }, |
31 | { text: "Avatars", url: "http://avatars.yahoo.com" }, |
32 | { text: "Groups", url: "http://groups.yahoo.com " }, |
33 | { text: "Internet Access", url: "http://promo.yahoo.com/broadband" }, |
34 | { |
35 | text: "PIM", |
36 | submenu: { |
37 | id: "pim", |
38 | itemdata: [ |
39 | { text: "Yahoo! Mail", url: "http://mail.yahoo.com" }, |
40 | { text: "Yahoo! Address Book", url: "http://addressbook.yahoo.com" }, |
41 | { text: "Yahoo! Calendar", url: "http://calendar.yahoo.com" }, |
42 | { text: "Yahoo! Notepad", url: "http://notepad.yahoo.com" } |
43 | ] |
44 | } |
45 | |
46 | }, |
47 | { text: "Member Directory", url: "http://members.yahoo.com" }, |
48 | { text: "Messenger", url: "http://messenger.yahoo.com" }, |
49 | { text: "Mobile", url: "http://mobile.yahoo.com" }, |
50 | { text: "Flickr Photo Sharing", url: "http://www.flickr.com" }, |
51 | ] |
52 | }, |
53 | |
54 | { |
55 | id: "shopping", |
56 | itemdata: [ |
57 | { text: "Auctions", url: "http://auctions.shopping.yahoo.com" }, |
58 | { text: "Autos", url: "http://autos.yahoo.com" }, |
59 | { text: "Classifieds", url: "http://classifieds.yahoo.com" }, |
60 | { text: "Flowers & Gifts", url: "http://shopping.yahoo.com/b:Flowers%20%26%20Gifts:20146735" }, |
61 | { text: "Real Estate", url: "http://realestate.yahoo.com" }, |
62 | { text: "Travel", url: "http://travel.yahoo.com" }, |
63 | { text: "Wallet", url: "http://wallet.yahoo.com" }, |
64 | { text: "Yellow Pages", url: "http://yp.yahoo.com" } |
65 | ] |
66 | }, |
67 | |
68 | { |
69 | id: "entertainment", |
70 | itemdata: [ |
71 | { text: "Fantasy Sports", url: "http://fantasysports.yahoo.com" }, |
72 | { text: "Games", url: "http://games.yahoo.com" }, |
73 | { text: "Kids", url: "http://www.yahooligans.com" }, |
74 | { text: "Music", url: "http://music.yahoo.com" }, |
75 | { text: "Movies", url: "http://movies.yahoo.com" }, |
76 | { text: "Radio", url: "http://music.yahoo.com/launchcast" }, |
77 | { text: "Travel", url: "http://travel.yahoo.com" }, |
78 | { text: "TV", url: "http://tv.yahoo.com" } |
79 | ] |
80 | }, |
81 | |
82 | { |
83 | id: "information", |
84 | itemdata: [ |
85 | { text: "Downloads", url: "http://downloads.yahoo.com" }, |
86 | { text: "Finance", url: "http://finance.yahoo.com" }, |
87 | { text: "Health", url: "http://health.yahoo.com" }, |
88 | { text: "Local", url: "http://local.yahoo.com" }, |
89 | { text: "Maps & Directions", url: "http://maps.yahoo.com" }, |
90 | { text: "My Yahoo!", url: "http://my.yahoo.com" }, |
91 | { text: "News", url: "http://news.yahoo.com" }, |
92 | { text: "Search", url: "http://search.yahoo.com" }, |
93 | { text: "Small Business", url: "http://smallbusiness.yahoo.com" }, |
94 | { text: "Weather", url: "http://weather.yahoo.com" } |
95 | ] |
96 | } |
97 | ]; |
98 | |
99 | |
100 | /* |
101 | Subscribe to the "beforerender" event, adding a submenu |
102 | to each of the items in the MenuBar instance. |
103 | */ |
104 | |
105 | oMenuBar.subscribe("beforeRender", function () { |
106 | |
107 | if (this.getRoot() == this) { |
108 | |
109 | this.getItem(0).cfg.setProperty("submenu", aSubmenuData[0]); |
110 | this.getItem(1).cfg.setProperty("submenu", aSubmenuData[1]); |
111 | this.getItem(2).cfg.setProperty("submenu", aSubmenuData[2]); |
112 | this.getItem(3).cfg.setProperty("submenu", aSubmenuData[3]); |
113 | |
114 | } |
115 | |
116 | }); |
117 | |
118 | |
119 | /* |
120 | Call the "render" method with no arguments since the |
121 | markup for this MenuBar instance is already exists in |
122 | the page. |
123 | */ |
124 | |
125 | oMenuBar.render(); |
126 | }; |
view plain | print | ? |
1 | var initLeftMenu = function() { |
2 | /* |
3 | Instantiate a Menu: The first argument passed to the |
4 | constructor is the id of the element in the page |
5 | representing the Menu; the second is an object literal |
6 | of configuration properties. |
7 | */ |
8 | |
9 | var oMenu = new YAHOO.widget.Menu("productsandservices2", { |
10 | position: "static", |
11 | hidedelay: 750, |
12 | lazyload: true, |
13 | effect: { |
14 | effect: YAHOO.widget.ContainerEffect.FADE, |
15 | duration: 0.25 |
16 | } |
17 | }); |
18 | |
19 | |
20 | /* |
21 | Define an array of object literals, each containing |
22 | the data necessary to create a submenu. |
23 | */ |
24 | |
25 | var aSubmenuData = [ |
26 | |
27 | { |
28 | id: "communication2", |
29 | itemdata: [ |
30 | { text: "360", url: "http://360.yahoo.com" }, |
31 | { text: "Alerts", url: "http://alerts.yahoo.com" }, |
32 | { text: "Avatars", url: "http://avatars.yahoo.com" }, |
33 | { text: "Groups", url: "http://groups.yahoo.com " }, |
34 | { text: "Internet Access", url: "http://promo.yahoo.com/broadband" }, |
35 | { |
36 | text: "PIM", |
37 | submenu: { |
38 | id: "pim2", |
39 | itemdata: [ |
40 | { text: "Yahoo! Mail", url: "http://mail.yahoo.com" }, |
41 | { text: "Yahoo! Address Book", url: "http://addressbook.yahoo.com" }, |
42 | { text: "Yahoo! Calendar", url: "http://calendar.yahoo.com" }, |
43 | { text: "Yahoo! Notepad", url: "http://notepad.yahoo.com" } |
44 | ] |
45 | } |
46 | |
47 | }, |
48 | { text: "Member Directory", url: "http://members.yahoo.com" }, |
49 | { text: "Messenger", url: "http://messenger.yahoo.com" }, |
50 | { text: "Mobile", url: "http://mobile.yahoo.com" }, |
51 | { text: "Flickr Photo Sharing", url: "http://www.flickr.com" }, |
52 | ] |
53 | }, |
54 | |
55 | { |
56 | id: "shopping2", |
57 | itemdata: [ |
58 | { text: "Auctions", url: "http://auctions.shopping.yahoo.com" }, |
59 | { text: "Autos", url: "http://autos.yahoo.com" }, |
60 | { text: "Classifieds", url: "http://classifieds.yahoo.com" }, |
61 | { text: "Flowers & Gifts", url: "http://shopping.yahoo.com/b:Flowers%20%26%20Gifts:20146735" }, |
62 | { text: "Real Estate", url: "http://realestate.yahoo.com" }, |
63 | { text: "Travel", url: "http://travel.yahoo.com" }, |
64 | { text: "Wallet", url: "http://wallet.yahoo.com" }, |
65 | { text: "Yellow Pages", url: "http://yp.yahoo.com" } |
66 | ] |
67 | }, |
68 | |
69 | { |
70 | id: "entertainment2", |
71 | itemdata: [ |
72 | { text: "Fantasy Sports", url: "http://fantasysports.yahoo.com" }, |
73 | { text: "Games", url: "http://games.yahoo.com" }, |
74 | { text: "Kids", url: "http://www.yahooligans.com" }, |
75 | { text: "Music", url: "http://music.yahoo.com" }, |
76 | { text: "Movies", url: "http://movies.yahoo.com" }, |
77 | { text: "Radio", url: "http://music.yahoo.com/launchcast" }, |
78 | { text: "Travel", url: "http://travel.yahoo.com" }, |
79 | { text: "TV", url: "http://tv.yahoo.com" } |
80 | ] |
81 | }, |
82 | |
83 | { |
84 | id: "information2", |
85 | itemdata: [ |
86 | { text: "Downloads", url: "http://downloads.yahoo.com" }, |
87 | { text: "Finance", url: "http://finance.yahoo.com" }, |
88 | { text: "Health", url: "http://health.yahoo.com" }, |
89 | { text: "Local", url: "http://local.yahoo.com" }, |
90 | { text: "Maps & Directions", url: "http://maps.yahoo.com" }, |
91 | { text: "My Yahoo!", url: "http://my.yahoo.com" }, |
92 | { text: "News", url: "http://news.yahoo.com" }, |
93 | { text: "Search", url: "http://search.yahoo.com" }, |
94 | { text: "Small Business", url: "http://smallbusiness.yahoo.com" }, |
95 | { text: "Weather", url: "http://weather.yahoo.com" } |
96 | ] |
97 | } |
98 | ]; |
99 | |
100 | |
101 | // Subscribe to the Menu instance's "beforeRender" event |
102 | |
103 | oMenu.subscribe("beforeRender", function () { |
104 | |
105 | if (this.getRoot() == this) { |
106 | |
107 | this.getItem(0).cfg.setProperty("submenu", aSubmenuData[0]); |
108 | this.getItem(1).cfg.setProperty("submenu", aSubmenuData[1]); |
109 | this.getItem(2).cfg.setProperty("submenu", aSubmenuData[2]); |
110 | this.getItem(3).cfg.setProperty("submenu", aSubmenuData[3]); |
111 | |
112 | } |
113 | |
114 | }); |
115 | |
116 | |
117 | /* |
118 | Call the "render" method with no arguments since the |
119 | markup for this Menu instance is already exists in the page. |
120 | */ |
121 | |
122 | oMenu.render(); |
123 | }; |
view plain | print | ? |
Now that we have the Menu Controls all set up, we will listen for the Layout's render event and render our Menu's.
Just before we call render
on the layout, let's listen for the render
event and call our private methods.
1 | layout.on('render', function() { |
2 | YAHOO.util.Event.onContentReady("productsandservices", initTopMenu); |
3 | YAHOO.util.Event.onContentReady("productsandservices2", initLeftMenu); |
4 | }); |
5 | |
6 | layout.render(); |
view plain | print | ? |
Now that we have Menu's on the page, you will notice that the menu items will not escape the Layout Unit.
We can fix this by adding a few more config options to the Layout Unit's. Specifically the scroll
and zIndex
options.
scroll
: The scroll property has 3 possible values: true
, false
and null
.
By setting the scroll property to null, the Layout Unit will not be wrapped in an element with the overflow CSS property on it. Now it will allow for items to escape the unit's body.
zIndex
: The zIndex property will set the Layout Units wrap element to that zIndex (defaults to 0).
So in the code below, we have set scroll
to null
on the top and left Layout Units to allow the menus to escape the Layout Units. We have given the top Layout Unit a zIndex
of 2
and
the left Layout Unit a zIndex
of 1
. This way the menus from the top Layout Unit will overlap the left Layout Unit. But the menu in the left Layout Unit will overlap the center Layout Unit.
1 | { position: 'top', height: 28, body: 'top1', scroll: null, zIndex: 2 }, |
2 | { position: 'left', header: 'Left', width: 200, body: 'left1', gutter: '5', scroll: null, zIndex: 1 }, |
view plain | print | ? |
1 | (function() { |
2 | var Dom = YAHOO.util.Dom, |
3 | Event = YAHOO.util.Event; |
4 | |
5 | |
6 | var initTopMenu = function() { |
7 | /* |
8 | Instantiate a MenuBar: The first argument passed to the |
9 | constructor is the id of the element in the page |
10 | representing the MenuBar; the second is an object literal |
11 | of configuration properties. |
12 | */ |
13 | |
14 | var oMenuBar = new YAHOO.widget.MenuBar("productsandservices", { |
15 | autosubmenudisplay: true, |
16 | hidedelay: 750, |
17 | lazyload: true, |
18 | effect: { |
19 | effect: YAHOO.widget.ContainerEffect.FADE, |
20 | duration: 0.25 |
21 | } |
22 | }); |
23 | |
24 | /* |
25 | Define an array of object literals, each containing |
26 | the data necessary to create a submenu. |
27 | */ |
28 | |
29 | var aSubmenuData = [ |
30 | |
31 | { |
32 | id: "communication", |
33 | itemdata: [ |
34 | { text: "360", url: "http://360.yahoo.com" }, |
35 | { text: "Alerts", url: "http://alerts.yahoo.com" }, |
36 | { text: "Avatars", url: "http://avatars.yahoo.com" }, |
37 | { text: "Groups", url: "http://groups.yahoo.com " }, |
38 | { text: "Internet Access", url: "http://promo.yahoo.com/broadband" }, |
39 | { |
40 | text: "PIM", |
41 | submenu: { |
42 | id: "pim", |
43 | itemdata: [ |
44 | { text: "Yahoo! Mail", url: "http://mail.yahoo.com" }, |
45 | { text: "Yahoo! Address Book", url: "http://addressbook.yahoo.com" }, |
46 | { text: "Yahoo! Calendar", url: "http://calendar.yahoo.com" }, |
47 | { text: "Yahoo! Notepad", url: "http://notepad.yahoo.com" } |
48 | ] |
49 | } |
50 | |
51 | }, |
52 | { text: "Member Directory", url: "http://members.yahoo.com" }, |
53 | { text: "Messenger", url: "http://messenger.yahoo.com" }, |
54 | { text: "Mobile", url: "http://mobile.yahoo.com" }, |
55 | { text: "Flickr Photo Sharing", url: "http://www.flickr.com" }, |
56 | ] |
57 | }, |
58 | |
59 | { |
60 | id: "shopping", |
61 | itemdata: [ |
62 | { text: "Auctions", url: "http://auctions.shopping.yahoo.com" }, |
63 | { text: "Autos", url: "http://autos.yahoo.com" }, |
64 | { text: "Classifieds", url: "http://classifieds.yahoo.com" }, |
65 | { text: "Flowers & Gifts", url: "http://shopping.yahoo.com/b:Flowers%20%26%20Gifts:20146735" }, |
66 | { text: "Real Estate", url: "http://realestate.yahoo.com" }, |
67 | { text: "Travel", url: "http://travel.yahoo.com" }, |
68 | { text: "Wallet", url: "http://wallet.yahoo.com" }, |
69 | { text: "Yellow Pages", url: "http://yp.yahoo.com" } |
70 | ] |
71 | }, |
72 | |
73 | { |
74 | id: "entertainment", |
75 | itemdata: [ |
76 | { text: "Fantasy Sports", url: "http://fantasysports.yahoo.com" }, |
77 | { text: "Games", url: "http://games.yahoo.com" }, |
78 | { text: "Kids", url: "http://www.yahooligans.com" }, |
79 | { text: "Music", url: "http://music.yahoo.com" }, |
80 | { text: "Movies", url: "http://movies.yahoo.com" }, |
81 | { text: "Radio", url: "http://music.yahoo.com/launchcast" }, |
82 | { text: "Travel", url: "http://travel.yahoo.com" }, |
83 | { text: "TV", url: "http://tv.yahoo.com" } |
84 | ] |
85 | }, |
86 | |
87 | { |
88 | id: "information", |
89 | itemdata: [ |
90 | { text: "Downloads", url: "http://downloads.yahoo.com" }, |
91 | { text: "Finance", url: "http://finance.yahoo.com" }, |
92 | { text: "Health", url: "http://health.yahoo.com" }, |
93 | { text: "Local", url: "http://local.yahoo.com" }, |
94 | { text: "Maps & Directions", url: "http://maps.yahoo.com" }, |
95 | { text: "My Yahoo!", url: "http://my.yahoo.com" }, |
96 | { text: "News", url: "http://news.yahoo.com" }, |
97 | { text: "Search", url: "http://search.yahoo.com" }, |
98 | { text: "Small Business", url: "http://smallbusiness.yahoo.com" }, |
99 | { text: "Weather", url: "http://weather.yahoo.com" } |
100 | ] |
101 | } |
102 | ]; |
103 | |
104 | |
105 | /* |
106 | Subscribe to the "beforerender" event, adding a submenu |
107 | to each of the items in the MenuBar instance. |
108 | */ |
109 | |
110 | oMenuBar.subscribe("beforeRender", function () { |
111 | |
112 | if (this.getRoot() == this) { |
113 | |
114 | this.getItem(0).cfg.setProperty("submenu", aSubmenuData[0]); |
115 | this.getItem(1).cfg.setProperty("submenu", aSubmenuData[1]); |
116 | this.getItem(2).cfg.setProperty("submenu", aSubmenuData[2]); |
117 | this.getItem(3).cfg.setProperty("submenu", aSubmenuData[3]); |
118 | |
119 | } |
120 | |
121 | }); |
122 | |
123 | |
124 | /* |
125 | Call the "render" method with no arguments since the |
126 | markup for this MenuBar instance is already exists in |
127 | the page. |
128 | */ |
129 | |
130 | oMenuBar.render(); |
131 | }; |
132 | |
133 | var initLeftMenu = function() { |
134 | /* |
135 | Instantiate a Menu: The first argument passed to the |
136 | constructor is the id of the element in the page |
137 | representing the Menu; the second is an object literal |
138 | of configuration properties. |
139 | */ |
140 | |
141 | var oMenu = new YAHOO.widget.Menu("productsandservices2", { |
142 | position: "static", |
143 | hidedelay: 750, |
144 | lazyload: true, |
145 | effect: { |
146 | effect: YAHOO.widget.ContainerEffect.FADE, |
147 | duration: 0.25 |
148 | } |
149 | }); |
150 | |
151 | |
152 | /* |
153 | Define an array of object literals, each containing |
154 | the data necessary to create a submenu. |
155 | */ |
156 | |
157 | var aSubmenuData = [ |
158 | |
159 | { |
160 | id: "communication2", |
161 | itemdata: [ |
162 | { text: "360", url: "http://360.yahoo.com" }, |
163 | { text: "Alerts", url: "http://alerts.yahoo.com" }, |
164 | { text: "Avatars", url: "http://avatars.yahoo.com" }, |
165 | { text: "Groups", url: "http://groups.yahoo.com " }, |
166 | { text: "Internet Access", url: "http://promo.yahoo.com/broadband" }, |
167 | { |
168 | text: "PIM", |
169 | submenu: { |
170 | id: "pim2", |
171 | itemdata: [ |
172 | { text: "Yahoo! Mail", url: "http://mail.yahoo.com" }, |
173 | { text: "Yahoo! Address Book", url: "http://addressbook.yahoo.com" }, |
174 | { text: "Yahoo! Calendar", url: "http://calendar.yahoo.com" }, |
175 | { text: "Yahoo! Notepad", url: "http://notepad.yahoo.com" } |
176 | ] |
177 | } |
178 | |
179 | }, |
180 | { text: "Member Directory", url: "http://members.yahoo.com" }, |
181 | { text: "Messenger", url: "http://messenger.yahoo.com" }, |
182 | { text: "Mobile", url: "http://mobile.yahoo.com" }, |
183 | { text: "Flickr Photo Sharing", url: "http://www.flickr.com" }, |
184 | ] |
185 | }, |
186 | |
187 | { |
188 | id: "shopping2", |
189 | itemdata: [ |
190 | { text: "Auctions", url: "http://auctions.shopping.yahoo.com" }, |
191 | { text: "Autos", url: "http://autos.yahoo.com" }, |
192 | { text: "Classifieds", url: "http://classifieds.yahoo.com" }, |
193 | { text: "Flowers & Gifts", url: "http://shopping.yahoo.com/b:Flowers%20%26%20Gifts:20146735" }, |
194 | { text: "Real Estate", url: "http://realestate.yahoo.com" }, |
195 | { text: "Travel", url: "http://travel.yahoo.com" }, |
196 | { text: "Wallet", url: "http://wallet.yahoo.com" }, |
197 | { text: "Yellow Pages", url: "http://yp.yahoo.com" } |
198 | ] |
199 | }, |
200 | |
201 | { |
202 | id: "entertainment2", |
203 | itemdata: [ |
204 | { text: "Fantasy Sports", url: "http://fantasysports.yahoo.com" }, |
205 | { text: "Games", url: "http://games.yahoo.com" }, |
206 | { text: "Kids", url: "http://www.yahooligans.com" }, |
207 | { text: "Music", url: "http://music.yahoo.com" }, |
208 | { text: "Movies", url: "http://movies.yahoo.com" }, |
209 | { text: "Radio", url: "http://music.yahoo.com/launchcast" }, |
210 | { text: "Travel", url: "http://travel.yahoo.com" }, |
211 | { text: "TV", url: "http://tv.yahoo.com" } |
212 | ] |
213 | }, |
214 | |
215 | { |
216 | id: "information2", |
217 | itemdata: [ |
218 | { text: "Downloads", url: "http://downloads.yahoo.com" }, |
219 | { text: "Finance", url: "http://finance.yahoo.com" }, |
220 | { text: "Health", url: "http://health.yahoo.com" }, |
221 | { text: "Local", url: "http://local.yahoo.com" }, |
222 | { text: "Maps & Directions", url: "http://maps.yahoo.com" }, |
223 | { text: "My Yahoo!", url: "http://my.yahoo.com" }, |
224 | { text: "News", url: "http://news.yahoo.com" }, |
225 | { text: "Search", url: "http://search.yahoo.com" }, |
226 | { text: "Small Business", url: "http://smallbusiness.yahoo.com" }, |
227 | { text: "Weather", url: "http://weather.yahoo.com" } |
228 | ] |
229 | } |
230 | ]; |
231 | |
232 | |
233 | // Subscribe to the Menu instance's "beforeRender" event |
234 | |
235 | oMenu.subscribe("beforeRender", function () { |
236 | |
237 | if (this.getRoot() == this) { |
238 | |
239 | this.getItem(0).cfg.setProperty("submenu", aSubmenuData[0]); |
240 | this.getItem(1).cfg.setProperty("submenu", aSubmenuData[1]); |
241 | this.getItem(2).cfg.setProperty("submenu", aSubmenuData[2]); |
242 | this.getItem(3).cfg.setProperty("submenu", aSubmenuData[3]); |
243 | |
244 | } |
245 | |
246 | }); |
247 | |
248 | |
249 | /* |
250 | Call the "render" method with no arguments since the |
251 | markup for this Menu instance is already exists in the page. |
252 | */ |
253 | |
254 | oMenu.render(); |
255 | }; |
256 | |
257 | |
258 | Event.onDOMReady(function() { |
259 | var layout = new YAHOO.widget.Layout({ |
260 | units: [ |
261 | { position: 'top', height: 28, body: 'top1', scroll: null, zIndex: 2 }, |
262 | { position: 'right', header: 'Right', width: 300, resize: true, footer: 'Footer', collapse: true, scroll: true, body: 'right1', animate: true, gutter: '5' }, |
263 | { position: 'bottom', height: 30, body: 'bottom1' }, |
264 | { position: 'left', header: 'Left', width: 200, body: 'left1', gutter: '5', scroll: null, zIndex: 1 }, |
265 | { position: 'center', body: 'center1', gutter: '5 0' } |
266 | ] |
267 | }); |
268 | |
269 | layout.on('render', function() { |
270 | YAHOO.util.Event.onContentReady("productsandservices", initTopMenu); |
271 | YAHOO.util.Event.onContentReady("productsandservices2", initLeftMenu); |
272 | }); |
273 | |
274 | layout.render(); |
275 | }); |
276 | })(); |
view plain | print | ? |
You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.
Copyright © 2009 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Copyright Policy - Job Openings