首页 → 网站编程 → JavaScript → 非常漂亮网页右键菜单，JQuery实现右键菜单

非常漂亮网页右键菜单，JQuery实现右键菜单

时间:2009-12-3 13:54:45 来源:www.cnblogs.com 作者:Xuanye's blog

先看下这个右键菜单效果图：

下面来开始讲解制作这个漂亮右键菜单的方法：

首先还是来分析一下HTML吧

1：一级菜单（每一组菜单）即是一个独立的div容器

2：每一项又是div，嵌套一个nobr（可用div代替不过要额外写个class）的标签，里面是图标和span包裹的位置内容

菜单项/菜单组分割线

这里一个要注意的地方就是多级菜单其实在HTMl结构是分离的，只是通过显示的位置在视觉上给人连载一起（另外就是箭头图标了）

第二接着是CSS了（是修改过的）

CSS非常简单,因为HTML结构本身也不复杂

CSS Code [http://www.xueit.com]

.b-m-mpanel {
    background: #F0F0F0 url(images/contextmenu/menu_bg.gif) left repeat-y;
    border: 1px solid #718BB7;
    padding: 2px 0;
    position: absolute;
    z-index: 99997;
}
.b-m-split {
    height: 6px;
    background: url(images/contextmenu/m_splitLine.gif) center repeat-x;
    font-size: 0px;
    margin: 0 2px;
}
.b-m-item, .b-m-idisable
{
    padding: 4px 2px;
    margin: 0 2px 0 3px;
    cursor: normal;
    line-height:100%;
}
.b-m-idisable
{
    color:#808080;
}
.b-m-ibody, .b-m-arrow {
    overflow: hidden;
    text-overflow: ellipsis;
    
}
.b-m-arrow {
    background: url(images/contextmenu/m_arrow.gif) right  no-repeat;    
}
.b-m-idisable .b-m-arrow
{
    background:none;
}
.b-m-item img, .b-m-ifocus img, .b-m-idisable img {
    margin-right: 8px;
}
.b-m-ifocus {
    background: url(images/contextmenu/m_item.gif) repeat-x bottom;
    border: 1px solid #AACCF6;
    padding: 3px 1px ;
    margin: 0 2px 0 3px;
    cursor: normal;
    line-height:100%;
}
.b-m-idisable img {
    visibility:hidden;
}