Problem with yui menu overlap in nested layouts

Board index » YUI 2.x: » Using YUI 2.x Components

Page 1 of 1

[ 1 post ]

New Topic | Post Reply | Print view

Previous topic | Next topic

ravikiran

Username: ravikiran1288
Joined: Mon Nov 07, 2011 9:17 pm
Posts: 94

Problem with yui menu overlap in nested layouts

Posted: Tue Nov 29, 2011 5:38 am

+0-

hi,
I am trying to divide the top layout into two sub layouts(Top2,Center2) and in Center2 layout i am giving the menu.But when i try to select the menuitems they are not visible as the menu is unable tyo overlap the layout. Please see the code below.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css"href="http://yui.yahooapis.com/2.8.0r4/build/reset-fonts-grids/reset-fonts-grids.css">
<link rel="stylesheet" type="text/css"href="http://yui.yahooapis.com/2.8.0r4/build/menu/assets/skins/sam/menu.css">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/assets/skins/sam/resize.css">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/assets/skins/sam/layout.css">
</head>
<body class="yui-skin-sam">
<div id="top1"></div>
<div id="left1">Left content</div>
<div id="center1">Center Content</div>
<div id="top2">Main heading</div>
<div id="center2"></div>
<div id="right1">Right Content</div>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/yuiloader/yuiloader-min.js"></script>
<script language="javascript" type="text/javascript">
var loader = new YAHOO.util.YUILoader({
require: ['layout', 'event', 'button', 'menu', 'dom'],
base: 'http://yui.yahooapis.com/2.8.0r4/build/',
loadOptional: true,
onSuccess: function() {
var Dom = YAHOO.util.Dom,
Event = YAHOO.util.Event;
Event.onDOMReady(function() {
var layout = new YAHOO.widget.Layout({
units: [
{ position: 'top', height: '71px', body: 'top1', scroll: null, gutter: '5px', zIndex:2 },
{ position: 'left', width: '200', body: 'left1', gutter: '5', scroll: null, collapse: true, animate: false , zIndex:1},
{ position: 'center',body: 'center1', gutter: '5' , zIndex:1, scroll: null },
{ position: 'right', body: 'right1', gutter: '5', width: '475', collapse:true, animate:false, scroll: true, resize: true, zIndex:1}
]
});

layout.on('render', function() {
var myParent = layout.getUnitByPosition('top').get('wrap');
var layout2 = new YAHOO.widget.Layout(myParent, {
parent: layout,
units: [
{ position: 'top', height: '30px', body: 'top2', gutter: '1px', zIndex:2 },
{ position: 'center', body:'center2', gutter: '5' , zIndex:3, scroll: null },
]
});
layout2.render();

});

layout.render();
});

YAHOO.util.Event.onContentReady("center2", function () {

var onMenuItemClick = function (p_sType, p_aArgs, p_oItem) {
var sText = p_oItem.cfg.getProperty("text");
oMenuButton5.set("label", sText);
};

var aMenuButton5Menu = [

{ text: "One", value: 1, onclick: { fn: onMenuItemClick } },
{ text: "Two", value: 2, onclick: { fn: onMenuItemClick } },
{ text: "Three", value: 3, onclick: { fn: onMenuItemClick } },
{ text: "Four", value: 4, onclick: { fn: onMenuItemClick } },
{ text: "Five", value: 5, onclick: { fn: onMenuItemClick } },
{ text: "Six", value: 6, onclick: { fn: onMenuItemClick } },
{ text: "Seven", value: 7, onclick: { fn: onMenuItemClick } },
{ text: "Eight", value: 8, onclick: { fn: onMenuItemClick } },
{ text: "Nine", value: 9, onclick: { fn: onMenuItemClick } },
{ text: "Ten", value: 10, onclick: { fn: onMenuItemClick } },

];

var oMenuButton5 = new YAHOO.widget.Button({ type: "menu",
label: "One",
name: "mymenubutton",
menu: aMenuButton5Menu,
container: this });

});
},
onFailure: function(o) {
alert("error: " + YAHOO.lang.dump(p));
}
});
loader.insert();
</script>
</body>
</html>

kindly help me out to solve this problem.
Thanks,
Ravikiran

Page 1 of 1

[ 1 post ]

New Topic | Post Reply | Print view

Previous topic | Next topic

You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum