`
CL315917525
  • 浏览: 230394 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

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> 

 

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics