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.

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

Left Menu

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

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.

Copyright © 2009 Yahoo! Inc. All rights reserved.

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