当前位置: 代码迷 >> Web前端 >> Jquery easyui menu 修改成自己的上拉菜单
  详细解决方案

Jquery easyui menu 修改成自己的上拉菜单

热度:805   发布时间:2012-11-05 09:35:12.0
Jquery easyui menu 修改成自己的下拉菜单

首先找到相关的Menu CSS文件:

?

.menu{
?position:absolute;
?background:#f0f0f0 url('images/menu.gif') repeat-y;
?margin:0;
?padding:2px;
??? border:1px solid #ccc;
?overflow:hidden;
}
.menu-item{
?position:relative;
?margin:0;
?padding:0;
?height:22px;
?line-height:20px;
?overflow:hidden;
?font-size:12px;
?cursor:pointer;
?/*border:1px solid transparent;
?_border:1px solid #f0f0f0;*/
?background-color:#181c25;
?color:#FFF;
?
}
.menu-text{
?position:absolute;
?text-align:center;
?top:0px;
}
.menu-icon{
?position:absolute;
?width:16px;
?height:16px;
?top:3px;
?left:2px;
}
.menu-rightarrow{
?position: absolute;
?width:4px;
?height:7px;
?top:7px;
?right:5px;
?background:url('images/menu_rightarrow.png') no-repeat;
}
.menu-sep{
?margin:3px 0px 3px 24px;
?line-height:2px;
?font-size:2px;
?background:url('images/menu_sep.png') repeat-x;
}
.menu-active{
??? /*border:1px solid #7eabcd;
?background-color:#3573b1;
?-moz-border-radius:3px;
?-webkit-border-radius: 3px;*/
?background-color:#3573b1;
}

?

?

悬停样式定义,对齐样式CSS:

?

a:hover.l-btn{
?background-position: bottom right;
?outline:none;
}
a:hover.l-btn span.l-btn-left{
?background-position: bottom left;
}

a:hover.l-btn-plain{
?width:100px;
?
?color:#EEE;
?outline:none;

}
a:hover.l-btn-disabled{
?background-position:top right;
}
a:hover.l-btn-disabled span.l-btn-left{
?background-position:top left;
}

?

?

页面引用CSS文件和easyui JS文件,调用方式:

?

?

<div id="menudiv"style="width:100px;overflow:hidden;margin:0px;padding:0px;"class="opt_normal">
???????<a href="javascript:void(0)" id="mb1" class="easyui-menubutton" menu="#mm1" >更多记录</a>
?</div>
?<div id="mm1" style="width:100px;overflow:hidden;backgroundcolor:black;margin:0px;padding:0px;">
???????????????<div? style="width:100px;border-color:black;" >Copy</div>
?????????????? <div style="width:100px;border-color:black;">Cut</div>????
?</div>

?

?

若在ie6下会被Select下拉框遮挡在DIV中加入

<iframe style="position:absolute;z-index:-1;width:100%;height:100%;left:0;top:0;" frameborder="0" scrolling="no" src="about:blank"></iframe>?

?

  相关解决方案