类似易趣里"我的易趣"中的那些小的下拉菜单.
用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>