网页右键菜单设计-优快云博客

右键菜单在web交互设计里并不是很常用的东西，因为普通用户在浏览网页时很少会想到能用右键来操作，就像他们很难习惯拖拽一样，但在某些环境中，拖拽会成为很自然的操作——其实都跟桌面软件的操作习惯有关。所以右键菜单在某些情况下也是很有用的，抓虾的feed列表里就可以使用右键菜单，如果网页里调用了google maps，而且占据了很大的客户端面积，用右键菜单也会更方便。最近做的项目里就要用到这个，我写了一个简单的右键菜单，并且学习把它封装成一个类。

以下是html形式的代码：

<div id="mousemenu" style="display: none; width: 200px;">
<divclass="mousemenumain">
<ul id="allitems">
<li><ahref=""><span>菜单项目1</span></a></li>
<li><ahref=""><span>菜单项目2</span></a></li>
<li><ahref=""><span>菜单项目3</span></a></li>
<li><ahref=""><span>菜单项目4长度超出长度超出长度超出长度超出长度超出长度超出</span></a></li>
<li><ahref=""><span>菜单项目5</span></a></li>
<li><ahref=""><span>菜单项目6</span></a></li>
<li><ahref=""><span>菜单项目7</span></a></li>
<li><ahref=""><span>菜单项目8</span></a></li>
</ul>
</div>
</div>

菜单的CSS：

#mousemenu{
position:absolute;
background:url(leftbg.jpg) no-repeat;
}
.mousemenumain{
width:100%;
float:left;
margin:0px5px 0px 22px;
background:url(tempbg.jpg);
border:1pxsolid #999;
border-left:none;
}
*:first-child+html.mousemenumain{margin:0px 5px 0px 11px;} * html .mousemenumain{margin:0px 5px 0px 11px;}
.mousemenumainul{
padding:0px;
margin:0px0px 0px 0px;
list-style:none;
width:100%;
}
.mousemenumainul li{
width:100%;
}
.mousemenumainul li a{
display:block;
text-decoration:none;
color:#000000;
margin:0px0px 0px 0px;
height:20px;
line-height:20px;
overflow-x:hidden;
width:200px;
}
.mousemenumainul li a:hover{
background:#0000ee;
border:0pxsolid #00ccff;
text-decoration:none;
color:#fff;
cursor:pointer;
}
.mousemenumainul li span{
margin:0px15px;
display:block;
}

控制菜单弹出位置的JS程序：

document.oncontextmenu = ShowMenu;
functionShowMenu(ev){
var obj=document.getElementById('mousemenu');
obj.style.display='none';
ev = ev || window.event;
var showplace=GetMousexy(ev);
obj.style.top=showplace.y+"px";
obj.style.left=showplace.x+"px";
var menuplaceX=parseInt(obj.style.left)+parseInt(obj.style.width)+document.body.scrollLeft; //获得菜单右边缘的坐标
var j=0;
for(var i=0;i<document.getElementById('allitems').childNodes.length;i++){ //获得菜单项的数量
if(document.getElementById('allitems').childNodes.item(i).tagName=="LI"){j++;}
}
var menuplaceY=parseInt(obj.style.top)+20*j-document.body.scrollTop; //获得菜单下边缘的坐标
if(menuplaceX>document.body.clientWidth){ //如果菜单右边缘超出浏览器边框,则让菜单出现在鼠标左侧
obj.style.left=(showplace.x-parseInt(obj.style.width)-26)+"px";
}
if(menuplaceY>document.documentElement.clientHeight){ //如果菜单下边缘超出浏览器边框,则让菜单出现在鼠标上侧
obj.style.top=(showplace.y-20*j)+"px";
}
obj.style.display='';
return false; //阻止原来的右键菜单出现
}
functionGetMousexy(ev){ //获取鼠标坐标
if(ev.pageX || ev.pageY){
return{x:ev.pageX, y:ev.pageY}; //适用于FIREFOX
}return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft, //适用于IE
y:ev.clientY + document.body.scrollTop - document.body.clientTop
}
}

需要注意的就是不能让菜单超出浏览器边缘，产生滚动条。

最后的效果：点这里

但是这样做的话，就必须把菜单的HTML代码写在网页面文件里，不能随时调用，如果一个页面里会出现多个菜单的话，就要每个都写一套HTML代码。如果用JS来创建菜单，并且把CSS和程序都封装到一个类里面，每次要用菜单的时候就只需要写很少的代码创建一个实例，虽然第一次比较麻烦，但以后就很方便了：

/**********************************************
* Name: context menu class
* Author: Dexter.Yy (dexter.yy@gmail.com)
* Author URI: http://www.limboy.com/
* Version: 2006.10.22
**********************************************/
functionRightMenu()
{
varMainMenu; //主菜单
varInLineUl;
varMenuItem; //菜单项
this.MainMenuPosition = "absolute";
this.MainMenuLeftBackground = "url(leftbg.jpg) no-repeat"; //主菜单右边文字
this.MainMenuWidth = "200px";
this.MainMenuHeight = "0px";
this.MainMenuRightBackground = "url(tempbg.jpg)"; //主菜单内容部分的背景
this.createMainMenu();
}
RightMenu.prototype.createMainMenu = function() //创建主菜单
{
this.InLineUl = document.createElement("ul");
this.InLineUl.style.padding = "0px";
this.InLineUl.style.margin = "0px 0px 0px 0px";
this.InLineUl.style.listStyle = "none";
this.InLineUl.style.width = "100%";
this.InLineUl.id="allitems";
InLineDiv = document.createElement("div");
InLineDiv.style.width = "100%"; //整个菜单的样式
InLineDiv.style.margin = "0px 5px 0px 22px";
InLineDiv.style.background = this.MainMenuRightBackground;
InLineDiv.style.border = "2px solid #0033ff";
InLineDiv.style.borderLeft = "none";
InLineDiv.appendChild(this.InLineUl.cloneNode(true));
this.MainMenu = document.createElement("div");
this.MainMenu.style.position = this.MainMenuPosition;
this.MainMenu.style.background = this.MainMenuLeftBackground;
this.MainMenu.style.width = this.MainMenuWidth;
this.MainMenu.appendChild(InLineDiv);
this.MainMenu.style.display = "none";
document.body.appendChild(this.MainMenu);
}
RightMenu.prototype.appendMenuItem = function(MenuItems) //添加菜单项
{
if(MenuItems=='')return;
if(this.MainMenu.firstChild.firstChild)
{
this.MainMenuHeight = "0px";
this.MainMenu.firstChild.replaceChild(this.InLineUl.cloneNode(true),this.MainMenu.firstChild.firstChild);
}
for(varitem in MenuItems)
{
MenuItemSpan = document.createElement("span");
MenuItemSpan.style.margin = "0px 15px";
MenuItemSpan.style.height = "28px";
MenuItemSpan.style.lineHeight = "28px";
MenuItemSpan.style.display = "block";
MenuItemSpan.innerHTML = MenuItems[item][0];
MenuItemSpan.setAttribute("hasmenu",1);
MenuItemSpan.oncontextmenu = function(){return false;}
MenuItemA = document.createElement("a");
MenuItemA.setAttribute('href',MenuItems[item][2]);
MenuItemA.target = MenuItems[item][1];
MenuItemA.onmouseout = function() //每个菜单项的样式
{
this.style.background = "";
this.style.display = "block";
this.style.textDecoration = "none";
this.style.color = "#000000";
this.style.margin = "0px 0px 0px 0px";
this.style.width = "200px";
this.style.height = "28px";
this.style.lineHeight = "28px";
this.style.fontSize = "12px";
this.style.overflowX = "hidden";
}
MenuItemA.onmouseout();
MenuItemA.onmouseover = function() //鼠标滑过时菜单项的样式
{
this.style.background = "#0000ee";
this.style.border = "0px solid #00ccff";
this.style.textDecoration = "none";
this.style.color = "#fff";
this.style.cursor = "pointer";
}
MenuItemA.appendChild(MenuItemSpan);
MenuItemLi = document.createElement("li");
MenuItemLi.style.width = "100%";
MenuItemLi.appendChild(MenuItemA);
this.MainMenuHeight =(parseInt(this.MainMenuHeight)+parseInt(MenuItemSpan.style.height))+"px";
this.MainMenu.firstChild.firstChild.appendChild(MenuItemLi);
}
}
RightMenu.prototype.GetMousexy = function(ev)
{
if(ev.pageX || ev.pageY)
{
return{x:ev.pageX, y:ev.pageY};
}
return{
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
}
}
RightMenu.prototype.ShowMenu = function(ev,MenuItems)
{
this.appendMenuItem(MenuItems);
this.MainMenu.style.display='none';
ev = ev || window.event;
varshowplace=this.GetMousexy(ev);
this.MainMenu.style.top=showplace.y+"px";
this.MainMenu.style.left=showplace.x+"px";
varmenuplaceX=parseInt(this.MainMenu.style.left)+parseInt(this.MainMenu.style.width)+document.body.scrollLeft;
if(menuplaceX>document.body.clientWidth)
{
this.MainMenu.style.left=(showplace.x-parseInt(this.MainMenu.style.width)-26)+"px";
}
varmenuplaceY=parseInt(this.MainMenu.style.top)+parseInt(this.MainMenuHeight)-document.body.scrollTop;
if(menuplaceY>document.documentElement.clientHeight)
{
this.MainMenu.style.top=(showplace.y-parseInt(this.MainMenuHeight))+"px";
}
this.MainMenu.style.display='';
returnfalse;
}