类似易趣里"我的易趣"中的那些小的下拉菜单.
用javascirpt 实现,
支持多浏览器,(在IE6和FireFox中调试成功)
以下是menu.js中的代码
var aryMenu=new Array();
var vView;
var vHide;
var menudiv;
if(window.navigator.appName.indexOf("icrosoft")>=1){
vHide="hidden";
vView="visible";
}
else{
vHide="hide";
vView="show";
}
function addMenu(menuID){
aryMenu[menuID]=new Array();
}
function addLink(menuID,strLink,strText){
addMenuHtml(menuID,strLink,"<a href=\""+strLink+"\">"+strText+"</a>");
}
function addMenuHtml(menuID,strLink,strHtml){
aryMenu[menuID][strLink]=strHtml;
}
function menuView(menuID,thisevt){
if(document.all){
menudiv=document.all["menuLayer"];
}
else{
menudiv=document.getElementById("menuLayer");
}
var strHtml="<table width='100%' bgcolor='#FFCC99'>"
for(var strLink in aryMenu[menuID]){
strHtml=strHtml+"<tr><td>"+aryMenu[menuID][strLink]+"</td></tr>";
}
strHtml=strHtml+"</table>";
menudiv.innerHTML=strHtml;
divView(thisevt);
}
function check_mouse(thisevt){
var cx;
var cy;
var divobj;
if(document.all){
cx=document.body.scrollLeft+window.event.clientX;
cy=document.body.scrollTop+window.event.clientY;
}
else{
cx=thisevt.pageX;
cy=thisevt.pageY;
}
if(cx<menudiv.offsetLeft || cx>menudiv.offsetLeft+menudiv.offsetWidth || cy<menudiv.offsetTop || cy>menudiv.offsetTop+menudiv.offsetHeight){
if(menudiv.style){divobj=menudiv.style;vHide="hidden";}else{divobj=menudiv;vHide="hide";}
divobj.visibility="hidden";
document.onmousemove=null;
}
}
function divView(thisevt){
var cx;
var cy;
var divobj;
if(document.all){
cx=document.body.scrollLeft+window.event.clientX-80;
cy=document.body.scrollTop+window.event.clientY-10;
}
else{
cx=thisevt.pageX-80;
cy=thisevt.pageY-10;
}
while(cx<document.body.scrollLeft){cx++;}
while(cy<document.body.scrollTop){cy++;}
while(cy>document.body.offsetHeight+document.body.scrollTop-menudiv.offsetHeight){cy--}
if(menudiv.style){divobj=menudiv.style;vView="visible";}else{divobj=menudiv;vView="show";}
divobj.left=cx;
divobj.top=cy;
divobj.visibility=vView;
document.onmousemove=check_mouse;
}
addMenuBTN(menuID){
document.writeln("<img src=\"/menu.gif\" style=\"cursor:hand\" onclick=\"menuView("+menuID+",event);\">");
}
document.writeln("<div id=\"menuLayer\" style=\"visibility:"+vHide+";BORDER-RIGHT: #000000 1px; BORDER-TOP: #000000 1px; Z-INDEX: 1;WIDTH:140px; LEFT: 53px; OVERFLOW: auto; BORDER-LEFT: #000000 1px; BORDER-BOTTOM: #000000 1px; POSITION: absolute; TOP: 70px; BACKGROUND-COLOR: #f5f5f5; layer-background-color: #F5F5F5\"></div>");
在需要使用的网页的<body></body>之间加入<script language=javscript src=menu.js></script>
然后
<script>
addMenu(1098); //添加一个菜单.
addLink(1098,“http://www.baidu.com“,“百度“);//在1098菜单中添加一个链接
addLink(1098,“http://www.sohu.com“,“搜狐“);//在1098菜单中添加一个链接
addLink(1098,“http://www.sina.com.com“,“新浪“);//在1098菜单中添加一个链接
addLink(1098,“http://www.163.com“,“网易“);//在1098菜单中添加一个链接
addLink(1098,“http://www.csdn.net“,“CSDN“);//在1098菜单中添加一个链接
addMenuBTN(1098);//在当前位置显示一个图片按钮,点击这个安钮时,显示1098这个菜单
</script>
