这不是我做的，是YQ君做的，在这里http://yqjun.tk/javascript/javascript-left-key-menu/ 我只是收集过来而已
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>自定义右键菜单</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
/*global*/
html, body, div, ul, li, a {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
overflow: hidden;
font: 13px/1.5 "Microsoft YaHei";
}
ul {
list-style: none;
}
a {
outline: ;
}
/*菜单君*/
#left_key_main_menu {
display: none;
position: absolute;
width: 100px;
}
#left_key_menu_outer li a{
display: block;
height: 30px;
font-size: 12px;
color: #444;
line-height: 30px;
text-align: center;
text-decoration: none;
}
.left_key_menu_btn_current {
color: #FFFFFF;
background: #348CCC;
}
.left_key_main_manu_btn_to_secondary_menu a{
border-left: 3px solid #348CCC;
}
/*二级什么的*/
#left_key_secondary_menu_id {
display: none;
}
.left_key_secondary_menu {
display: none;
position: absolute;
width: 120px;
}
/*我不是阴影*/
.shadow_out, .shadow_mid, .shadow_in {
padding: 1px;
border:1px solid #FFF;
}
.shadow_in {
padding: 3px;
background: #FFF;
border-color: #BBBBBB;
}
.shadow_mid {
background: #D8D8D8;
border-color: #E8E8E8;
}
.shadow_out {
background: #F3F3F3;
border-color: #FBFBFB;
}
</style>
<script type="text/javascript">
window.onload = function()
{
fuLeftKeyMenu();
};
var fuLeftKeyMenu = function()
{
var oLeftKeyMainMenu = document.getElementById("left_key_main_menu");
var aLeftKeyMainMenuBtn = oLeftKeyMainMenu.getElementsByTagName("a");
var aLeftKeyMainMenuBtnToSecondaryMenu = new Array();
var aLeftKeyMainMenuBtnToSecondaryMenu = myGetElementsByClassName("left_key_main_manu_btn_to_secondary_menu", "left_key_main_menu", "li");
//初始化 SecondaryMenu 数组
var aLeftKeySecondaryMenu = new Array();
var aLeftKeySecondaryMenu = myGetElementsByClassName("left_key_secondary_menu", "left_key_secondary_menu_box", "div");
var totalLeftKeyMenuBtn = document.getElementsByTagName("a");
var iMainMenuNewLeft = iMainMenuNewTop = 0;
var bSecondaryMenuIsOvered = new Array();
var aSecondaryMenuTop = new Array();//记录 aLeftKeyMainMenuBtn 高度
var aSecondaryMenuTop = getSecondaryMenuTop(aLeftKeyMainMenuBtn);
//鼠标右键显示 oLeftKeyMainMenu ，点击其他键则隐藏
document.onmousedown = function(event)
{
var event = event || window.event; //前者用于非IE，后者为IE而写
stopDefaultLeftKey(event);
if (event.button != 2)
{
hideLeftKeyMainMenu();
}
else
{
showLeftKeyMainMenu(event);
}
};
//totalLeftKeyMenuBtn样式
for (var i = 0; i < totalLeftKeyMenuBtn.length; i++)
{
//鼠标点击or覆盖 totalLeftKeyMenuBtn ，改变 totalLeftKeyMenuBtn 样式
totalLeftKeyMenuBtn[i].onmousedown = totalLeftKeyMenuBtn[i].onmouseover = function()
{
for(var elem in totalLeftKeyMenuBtn)
{
totalLeftKeyMenuBtn[elem].className = "";
}
this.className = "left_key_menu_btn_current";
};
//鼠标离开 totalLeftKeyMenuBtn ，恢复 totalLeftKeyMenuBtn 样式
totalLeftKeyMenuBtn[i].onmouseout = function()
{
this.className = "";
};
}
//鼠标覆盖 aLeftKeyMainMenuBtnToSecondaryMenu[i] or aLeftKeySecondaryMenu[i] ，显示 aLeftKeySecondaryMenu[i]
for (var i = 0; i < aLeftKeyMainMenuBtnToSecondaryMenu.length; i++)
{
aLeftKeyMainMenuBtnToSecondaryMenu[i].index = aLeftKeySecondaryMenu[i].index = i;
aLeftKeyMainMenuBtnToSecondaryMenu[i].onmouseover = aLeftKeyMainMenuBtnToSecondaryMenu[i].onmousedown = aLeftKeySecondaryMenu[i].onmouseover = function(event)
{
var event = event || window.event;
showLeftKeySecondaryMenu(this.index);
};
}
//鼠标离开 aLeftKeySecondaryMenu[i] or aLeftKeyMainMenuBtnToSecondaryMenu[i] or 点击aLeftKeySecondaryMenu[i] ,隐藏 aLeftKeySecondaryMenu[i]
for (var i = 0; i < aLeftKeyMainMenuBtnToSecondaryMenu.length; i++)
{
aLeftKeyMainMenuBtnToSecondaryMenu[i].index = aLeftKeySecondaryMenu[i].index = i;
aLeftKeySecondaryMenu[i].onmouseout = aLeftKeySecondaryMenu[i].onmousedown = aLeftKeyMainMenuBtnToSecondaryMenu[i].onmouseout = function()
{
hideLeftKeySecondaryMenu(this.index);
};
}
//禁止 defalutLeftMenu 函数
var stopDefaultLeftKey = function(event)
{
if (event.button == 2)
{
document.oncontextmenu = function()
{
return false;
}
}
};
//显示 oLeftKeyMainMenu 函数
var showLeftKeyMainMenu = function(event)
{
oLeftKeyMainMenu.style.display = "block";
iMainMenuNewTop = (event.clientY + oLeftKeyMainMenu.offsetHeight >= document.body.clientHeight) ? (event.clientY - oLeftKeyMainMenu.offsetHeight) : (event.clientY);
iMainMenuNewLeft = (event.clientX + oLeftKeyMainMenu.offsetWidth >= document.body.clientWidth) ? (event.clientX - oLeftKeyMainMenu.offsetWidth) : (event.clientX);
oLeftKeyMainMenu.style.left = iMainMenuNewLeft + "px";
oLeftKeyMainMenu.style.top = iMainMenuNewTop + "px";
};
//隐藏 oLeftKeyMainMenu 函数
var hideLeftKeyMainMenu = function()
{
oLeftKeyMainMenu.style.display = "none";
};
//显示 aLeftKeySecondaryMenu[index] 函数
var showLeftKeySecondaryMenu = function(index)
{
aLeftKeySecondaryMenu[index].style.display = "block";
aLeftKeySecondaryMenu[index].style.left = (iMainMenuNewLeft + oLeftKeyMainMenu.offsetWidth + aLeftKeySecondaryMenu[index].offsetWidth >= document.body.clientWidth) ? (iMainMenuNewLeft - aLeftKeySecondaryMenu[index].offsetWidth + "px") : (iMainMenuNewLeft + oLeftKeyMainMenu.offsetWidth + "px");
aLeftKeySecondaryMenu[index].style.top = iMainMenuNewTop + aSecondaryMenuTop[index] * aLeftKeyMainMenuBtn[0].offsetHeight +"px";
bSecondaryMenuIsOvered[index] = true;
aLeftKeyMainMenuBtnToSecondaryMenu[index].getElementsByTagName("a")[0].className = "left_key_menu_btn_current";
};
// 隐藏 aLeftKeySecondaryMenu[index] 函数
var hideLeftKeySecondaryMenu = function(index)
{
var sleep = function()
{
if (bSecondaryMenuIsOvered[index] == false)
{
aLeftKeySecondaryMenu[index].style.display = "none";
}
}
setTimeout(sleep, 200);
bSecondaryMenuIsOvered[index] = false;
aLeftKeyMainMenuBtnToSecondaryMenu[index].getElementsByTagName("a")[0].className = "";
}
};
var myGetElementsByClassName = function(className, id, node)
{
var aResult = new Array();
var oBoxId = document.getElementById(id);//范围
var aNode = oBoxId.getElementsByTagName(node);//范围内标签
for (var i = 0; i < aNode.length; i++)
{
if (aNode[i].className == className )
{
aResult[aResult.length] = aNode[i];
}
}
return aResult;
}
var getSecondaryMenuTop = function ()
{
var aResult = new Array();
var aBtnLi = document.getElementById("left_key_menu_outer").getElementsByTagName("li");
for (var i = 0; i < aBtnLi.length; i++)
{
if(aBtnLi[i].className.indexOf("left_key_main_manu_btn_to_secondary_menu") != -1)
{
aResult[aResult.length] = i;
}
}
return aResult;
}
</script>
</script>
</head>
<body>
<div id="left_key_menu_outer">
<div id="left_key_main_menu" class="shadow_out">
<div class="shadow_mid">
<div class="shadow_in">
<ul>
<li><a href="javascript:;">菜单什么的</a></li>
<li><a href="javascript:;">菜单什么的</a></li>
<li class="left_key_main_manu_btn_to_secondary_menu"><a href="javascript:;">二级什么的</a></li>
<li><a href="javascript:;">菜单什么的</a></li>
<li><a href="javascript:;">菜单什么的</a></li>
<li class="left_key_main_manu_btn_to_secondary_menu"><a href="javascript:;">二级二号XD</a></li>
</ul>
</div>
</div>
</div>
<div id="left_key_secondary_menu_box">
<div class="left_key_secondary_menu" class="shadow_out">
<div class="shadow_mid">
<div class="shadow_in">
<ul>
<li><a href="javascript:;">人家才不是二级</a></li>
<li><a href="javascript:;">人家才不是二级</a></li>
<li><a href="javascript:;">人家才不是二级</a></li>
</ul>
</div>
</div>
</div>
<div class="left_key_secondary_menu" class="shadow_out">
<div class="shadow_mid">
<div class="shadow_in">
<ul>
<li><a href="javascript:;">又一个二级卖萌</a></li>
<li><a href="javascript:;">又一个二级卖萌</a></li>
<li><a href="javascript:;">又一个二级卖萌</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>