YUI Library Examples: Layout Manager: Layout with Menu Controls

Create the Full Page Layout

First we will create the Full Page Layout with the following HTML.

Now we will create the Layout instance for this content.

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

var initTopMenu = function() {
                /*
                     Instantiate a MenuBar:  The first argument passed to the 
                     constructor is the id of the element in the page 
                     representing the MenuBar; the second is an object literal 
                     of configuration properties.
                */

var oMenuBar = new YAHOO.widget.MenuBar("productsandservices", { 
                                                            autosubmenudisplay: true, 
                                                            hidedelay: 750, 
                                                            lazyload: true,
                                                            effect: { 
                                                                effect: YAHOO.widget.ContainerEffect.FADE,
                                                                duration: 0.25
                                                            } 
                                                        });

/*
                     Define an array of object literals, each containing 
                     the data necessary to create a submenu.
                */

var aSubmenuData = [
                
                    {
                        id: "communication", 
                        itemdata: [ 
                            { text: "360", url: "http://360.yahoo.com" },
                            { text: "Alerts", url: "http://alerts.yahoo.com" },
                            { text: "Avatars", url: "http://avatars.yahoo.com" },
                            { text: "Groups", url: "http://groups.yahoo.com " },
                            { text: "Internet Access", url: "http://promo.yahoo.com/broadband" },
                            {
                                text: "PIM", 
                                submenu: { 
                                            id: "pim", 
                                            itemdata: [
                                                { text: "Yahoo! Mail", url: "http://mail.yahoo.com" },
                                                { text: "Yahoo! Address Book", url: "http://addressbook.yahoo.com" },
                                                { text: "Yahoo! Calendar",  url: "http://calendar.yahoo.com" },
                                                { text: "Yahoo! Notepad", url: "http://notepad.yahoo.com" }
                                            ] 
                                        }
                            
                            }, 
                            { text: "Member Directory", url: "http://members.yahoo.com" },
                            { text: "Messenger", url: "http://messenger.yahoo.com" },
                            { text: "Mobile", url: "http://mobile.yahoo.com" },
                            { text: "Flickr Photo Sharing", url: "http://www.flickr.com" },
                        ]
                    },

{
                        id: "shopping", 
                        itemdata: [
                            { text: "Auctions", url: "http://auctions.shopping.yahoo.com" },
                            { text: "Autos", url: "http://autos.yahoo.com" },
                            { text: "Classifieds", url: "http://classifieds.yahoo.com" },
                            { text: "Flowers & Gifts", url: "http://shopping.yahoo.com/b:Flowers%20%26%20Gifts:20146735" },
                            { text: "Real Estate", url: "http://realestate.yahoo.com" },
                            { text: "Travel", url: "http://travel.yahoo.com" },
                            { text: "Wallet", url: "http://wallet.yahoo.com" },
                            { text: "Yellow Pages", url: "http://yp.yahoo.com" }                    
                        ]    
                    },
                    
                    {
                        id: "entertainment", 
                        itemdata: [
                            { text: "Fantasy Sports", url: "http://fantasysports.yahoo.com" },
                            { text: "Games", url: "http://games.yahoo.com" },
                            { text: "Kids", url: "http://www.yahooligans.com" },
                            { text: "Music", url: "http://music.yahoo.com" },
                            { text: "Movies", url: "http://movies.yahoo.com" },
                            { text: "Radio", url: "http://music.yahoo.com/launchcast" },
                            { text: "Travel", url: "http://travel.yahoo.com" },
                            { text: "TV", url: "http://tv.yahoo.com" }              
                        ] 
                    },
                    
                    {
                        id: "information",
                        itemdata: [
                            { text: "Downloads", url: "http://downloads.yahoo.com" },
                            { text: "Finance", url: "http://finance.yahoo.com" },
                            { text: "Health", url: "http://health.yahoo.com" },
                            { text: "Local", url: "http://local.yahoo.com" },
                            { text: "Maps & Directions", url: "http://maps.yahoo.com" },
                            { text: "My Yahoo!", url: "http://my.yahoo.com" },
                            { text: "News", url: "http://news.yahoo.com" },
                            { text: "Search", url: "http://search.yahoo.com" },
                            { text: "Small Business", url: "http://smallbusiness.yahoo.com" },
                            { text: "Weather", url: "http://weather.yahoo.com" }
                        ]
                    }                    
                ];

/*
                     Subscribe to the "beforerender" event, adding a submenu 
                     to each of the items in the MenuBar instance.
                */

oMenuBar.subscribe("beforeRender", function () {

if (this.getRoot() == this) {

this.getItem(0).cfg.setProperty("submenu", aSubmenuData[0]);
                        this.getItem(1).cfg.setProperty("submenu", aSubmenuData[1]);
                        this.getItem(2).cfg.setProperty("submenu", aSubmenuData[2]);
                        this.getItem(3).cfg.setProperty("submenu", aSubmenuData[3]);

}

});

/*
                     Call the "render" method with no arguments since the 
                     markup for this MenuBar instance is already exists in 
                     the page.
                */

oMenuBar.render();         
        };

Left Menu

var initLeftMenu = function() {
                /*
                     Instantiate a Menu:  The first argument passed to the 
                     constructor is the id of the element in the page 
                     representing the Menu; the second is an object literal 
                     of configuration properties.
                */

var oMenu = new YAHOO.widget.Menu("productsandservices2", { 
                                                        position: "static", 
                                                        hidedelay:  750, 
                                                        lazyload: true,
                                                            effect: { 
                                                                effect: YAHOO.widget.ContainerEffect.FADE,
                                                                duration: 0.25
                                                            } 
                                                        });

/*
                     Define an array of object literals, each containing 
                     the data necessary to create a submenu.
                */

var aSubmenuData = [
                
                    {
                        id: "communication2", 
                        itemdata: [ 
                            { text: "360", url: "http://360.yahoo.com" },
                            { text: "Alerts", url: "http://alerts.yahoo.com" },
                            { text: "Avatars", url: "http://avatars.yahoo.com" },
                            { text: "Groups", url: "http://groups.yahoo.com " },
                            { text: "Internet Access", url: "http://promo.yahoo.com/broadband" },
                            {
                                text: "PIM", 
                                submenu: { 
                                            id: "pim2", 
                                            itemdata: [
                                                { text: "Yahoo! Mail", url: "http://mail.yahoo.com" },
                                                { text: "Yahoo! Address Book", url: "http://addressbook.yahoo.com" },
                                                { text: "Yahoo! Calendar",  url: "http://calendar.yahoo.com" },
                                                { text: "Yahoo! Notepad", url: "http://notepad.yahoo.com" }
                                            ] 
                                        }
                            
                            }, 
                            { text: "Member Directory", url: "http://members.yahoo.com" },
                            { text: "Messenger", url: "http://messenger.yahoo.com" },
                            { text: "Mobile", url: "http://mobile.yahoo.com" },
                            { text: "Flickr Photo Sharing", url: "http://www.flickr.com" },
                        ]
                    },

{
                        id: "shopping2", 
                        itemdata: [
                            { text: "Auctions", url: "http://auctions.shopping.yahoo.com" },
                            { text: "Autos", url: "http://autos.yahoo.com" },
                            { text: "Classifieds", url: "http://classifieds.yahoo.com" },
                            { text: "Flowers & Gifts", url: "http://shopping.yahoo.com/b:Flowers%20%26%20Gifts:20146735" },
                            { text: "Real Estate", url: "http://realestate.yahoo.com" },
                            { text: "Travel", url: "http://travel.yahoo.com" },
                            { text: "Wallet", url: "http://wallet.yahoo.com" },
                            { text: "Yellow Pages", url: "http://yp.yahoo.com" }                    
                        ]    
                    },
                    
                    {
                        id: "entertainment2", 
                        itemdata: [
                            { text: "Fantasy Sports", url: "http://fantasysports.yahoo.com" },
                            { text: "Games", url: "http://games.yahoo.com" },
                            { text: "Kids", url: "http://www.yahooligans.com" },
                            { text: "Music", url: "http://music.yahoo.com" },
                            { text: "Movies", url: "http://movies.yahoo.com" },
                            { text: "Radio", url: "http://music.yahoo.com/launchcast" },
                            { text: "Travel", url: "http://travel.yahoo.com" },
                            { text: "TV", url: "http://tv.yahoo.com" }              
                        ] 
                    },
                    
                    {
                        id: "information2",
                        itemdata: [
                            { text: "Downloads", url: "http://downloads.yahoo.com" },
                            { text: "Finance", url: "http://finance.yahoo.com" },
                            { text: "Health", url: "http://health.yahoo.com" },
                            { text: "Local", url: "http://local.yahoo.com" },
                            { text: "Maps & Directions", url: "http://maps.yahoo.com" },
                            { text: "My Yahoo!", url: "http://my.yahoo.com" },
                            { text: "News", url: "http://news.yahoo.com" },
                            { text: "Search", url: "http://search.yahoo.com" },
                            { text: "Small Business", url: "http://smallbusiness.yahoo.com" },
                            { text: "Weather", url: "http://weather.yahoo.com" }
                        ]
                    }                    
                ];

// Subscribe to the Menu instance's "beforeRender" event

oMenu.subscribe("beforeRender", function () {

if (this.getRoot() == this) {

}

});

/*
                     Call the "render" method with no arguments since the 
                     markup for this Menu instance is already exists in the page.
                */

oMenu.render();
        };

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.

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.

Source for the example

(function() {
    var Dom = YAHOO.util.Dom,
        Event = YAHOO.util.Event;

/*
                     Define an array of object literals, each containing 
                     the data necessary to create a submenu.
                */

/*
                     Subscribe to the "beforerender" event, adding a submenu 
                     to each of the items in the MenuBar instance.
                */

oMenuBar.subscribe("beforeRender", function () {

if (this.getRoot() == this) {

}

});

oMenuBar.render();         
        };

/*
                     Define an array of object literals, each containing 
                     the data necessary to create a submenu.
                */

// Subscribe to the Menu instance's "beforeRender" event

oMenu.subscribe("beforeRender", function () {

if (this.getRoot() == this) {

}

});

/*
                     Call the "render" method with no arguments since the 
                     markup for this Menu instance is already exists in the page.
                */

oMenu.render();
        };

Event.onDOMReady(function() {
        var layout = new YAHOO.widget.Layout({
            units: [
                { position: 'top', height: 28, body: 'top1', scroll: null, zIndex: 2 },
                { position: 'right', header: 'Right', width: 300, resize: true, footer: 'Footer', collapse: true, scroll: true, body: 'right1', animate: true, gutter: '5' },
                { position: 'bottom', height: 30, body: 'bottom1' },
                { position: 'left', header: 'Left', width: 200, body: 'left1', gutter: '5', scroll: null, zIndex: 1 },
                { position: 'center', body: 'center1', gutter: '5 0' }
            ]
        });
        
        layout.on('render', function() {
            YAHOO.util.Event.onContentReady("productsandservices", initTopMenu);
            YAHOO.util.Event.onContentReady("productsandservices2", initLeftMenu);        
        });
        
        layout.render();
    });
})();

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.

YUI Library Examples: Layout Manager: Layout with Menu Controls

Create the Full Page Layout

Creating the Menus

Top Menu

Left Menu

Rendering the Menus

Fixing the hidden Menus

Source for the example

Configuration for This Example

Layout Manager Examples:

More Layout Manager Resources: