YUI Library Home

YUI Library Examples: Layout Manager: Layout with Menu Controls

Layout Manager: Layout with Menu Controls

This example shows how to build a Full Page Layout and use Menu Control's inside different Layout Units.

Create the Full Page Layout

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.

1Event.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 | ?

Creating the Menus

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.

Top Menu

1var 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 | ?

Left Menu

1var 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 | ?

Rendering the Menus

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.

1layout.on('render', function() { 
2    YAHOO.util.Event.onContentReady("productsandservices", initTopMenu); 
3    YAHOO.util.Event.onContentReady("productsandservices2", initLeftMenu);         
4}); 
5 
6layout.render(); 
view plain | print | ?

Fixing the hidden Menus

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 | ?

Source for the example

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 | ?

Configuration for This Example

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.

More Layout Manager Resources:

Copyright © 2009 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings