使用YUI layout时菜单被遮挡问题的解决

使用YUI layout时菜单被遮挡问题的解决

今天在使用YUI的layout作布局,YUI的menu作菜单时,发生了菜单被其他部分遮挡
的问题,布局的代码如下,其中titlebar为菜单,content为页面中间的内容部分,
如下的代码菜单会被content部分遮挡。

function initLayout() {
var layout = new YAHOO.widget.Layout( {
units : [ {
position :'top',
height :50,
body :'titlebar'
}, {
position :'bottom',
height :50,
body :'statusbar'
}, {
position :'center',
body :'content'
} ]
});
layout.render();
};

经过对照YUI给出的例子,发现如下修改后可消除此问题:

function initLayout() {
var layout = new YAHOO.widget.Layout( {
units : [ {
position :'top',
height :50,
body :'titlebar',
scroll: null,
zIndex: 1
}, {
position :'bottom',
height :50,
body :'statusbar'
}, {
position :'center',
body :'content'
} ]
});
layout.render();
};

修改方法是在菜单部分增加了scroll和zIndex属性。

YUI API文档中的说明是这样的:
scroll - Boolean/Null
Adds a class to the unit to allow for overflow: auto
(yui-layout-scroll), default is overflow: hidden
(yui-layout-noscroll). If true scroll bars will be placed
on the element when the content exceeds the given area,
false will put overflow hidden to hide the content.
Passing null will render the content as usual overflow.

zIndex - {Number}
The CSS zIndex to give to the unit, so you can have
overlapping elements such as menus in a unit.

详细内容可以进一步参看CSS Overflow和zIndex属性
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值