logo

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

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

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

image

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

首先还是来分析一下HTML吧

1:一级菜单(每一组菜单)即是一个独立的div容器

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

image菜单项/菜单组    image 分割线

这里一个要注意的地方就是多级菜单其实在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; }

CSS中会用到的所有图片 m_arrow m_item m_splitLine menu_bg  注意有四张图片哦。


文章分页123
标签:JQuery右键菜单
100%
  • wyjsxdt 2010-12-21 12:11:13 回复
    怎么不能下载页不能另存,能否给我发一份到我邮箱,不胜感激。wyjsxdt@163.com
  • [1]

回复:非常漂亮网页右键菜单,JQuery实现右键菜单

0 / 5000