jQuery实现自定义右键菜单的树状菜单效果实现自定义右键菜单的树状菜单效果
主要介绍了jQuery实现自定义右键菜单的树状菜单效果,涉及jquery鼠标事件及页面元素操作的相关技巧,具有一定
参考借鉴价值,需要的朋友可以参考下
本文实例讲述了jQuery实现自定义右键菜单的树状菜单效果。分享给大家供大家参考。具体如下:
这是一款基于jQuery的自定义右键菜单,在树状结构的子节点(下级没有节点)上单击右键才会弹出自定义菜单,而且菜单是自
动根据鼠标位置来定位的。当鼠标在菜单以外的任意空白处单击一下后会自动消失。这里想特别说明一点所谓的“菜单以外”,可
以有两种解剖方式——1、除了鼠标在菜单区域内的所有位置;2、如下图所示的A、B、C、D四个区域。显然用第一种方法来
剖析会更简单直接一点。源码中的!IsInArea就表示此方法。
运行效果截图如下:
在线演示地址如下:
http://demo.jb51.net/js/2015/jquery-zdy-right-button-menu-style-codes/
具体代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jQuery自定义右键菜单</title>
<style type="text/css">
body {
font-size: 12px;
margin: 0px;
padding: 0px;
}
form,div,ul,li {
margin: 0px;
padding: 0px;
list-style-type: none;
overflow: hidden;
}
h1,h2,h3,h4,h5 {
font-size: 12px;
margin: 0px;
padding: 0px;
}
a {
text-decoration: none;
}
.layout {
width: 993px;
clear: both;
margin-right: auto;
margin-left: auto;
border-top-width: 0px;
border-right-width: 4px;
border-bottom-width: 0px;
border-left-width: 4px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;
overflow: hidden;
}
.layout2 {
width: 942px;
margin-right: auto;
margin-left: auto;
}
.Content {
background-color: #376285;
}
.contentBg {
background-color: #173043;
}
div, ul, li {