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.
Now we will create the Layout instance for this content.
We will create 2 private functions that will create our 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.
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: The scroll property has 3 possible values:
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
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
the left Layout Unit a
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.