自己写的一个JS菜单函数.
此函数可对h1,h2..h6标签自动解析生成右击菜单,并产生标记,对于很长的网页需要菜单导航之时可以用~~~~~~~~~~~~
有不足之处还请谅解!!!
var divmbgcolor="004D99"; //鼠标移到菜单上的显示背景色
var divmcolor="FFFFFF"; //鼠标移动菜单上的显示前景色
var h5color="000000"; //h5标签标题的前景色
var h2color="000000"; //h2标签标题的前景色
var menuwidth=200; //菜单的宽度
var menuheight=280; //菜单的高度
var mborderstyle="solid"; //菜单边框类型
var mborderwidth=1; //菜单边框宽度
var mbordercolor="C0C0C0" //菜单边框颜色
var mbgcolor="ffffff"; //菜单背景颜色
var pad="3" //菜单的内容与边框的宽度
var mscrollbararrowColor="F0F0F0"; //菜单滚动条方向箭头的颜色
var scrollbarbasecolor="F0F0F0"; //菜单滚动条的基准颜色
var mscrollbdscolor=""; //菜单滚动条的暗边框颜色
var mscrollbscolor="FFFFFF";//菜单滚动条3D界面的暗边
var tagh1="h2"; //设置脚本提取菜单项的基准标签,该标签要求是格式标签,注意:提取有的标签时会出错,h1..h5,em,b,i等类似标签没问题
var tagh2="h5"; //设置脚本提取菜单项的基准标签,该标签要求是格式标签,注意:提取有的标签时会出错,h1..h5,em,b,i等类似标签没问题
function addmenu(){
var oh2=document.all.tags(tagh1);
var oh5=document.body.all.tags(tagh2);
var str2,str5;
var od=document.createElement("DIV");
od.style.width=menuwidth;
od.style.height=menuheight;
od.style.overflow="auto";
od.style.scrollbarShadowColor=mscrollbscolor;
od.style.scrollbarDarkShadowColor=mscrollbdscolor;
od.style.borderStyle=mborderstyle;
od.style.borderWidth=mborderwidth;
od.style.borderColor=mbordercolor;
od.style.scrollbarArrowColor=mscrollbararrowColor;
od.style.scrollbarBaseColor=scrollbarbasecolor;
od.style.zIndex=100;
od.style.backgroundColor=mbgcolor;
od.style.position="absolute";
od.style.padding=pad;
var odhr="<hr width=90% size=1 align=center color=#COCOCO>";
od.innerHTML=odhr;
document.body.appendChild(od);
for(var i=0;i<oh2.length;i++){
str2=oh2.item(i).outerText;
str2=str2.anchor("name"+i);
oh2.item(i).innerHTML=str2;
var oh2text="<span style='width:100%;height:15;font:9pt;cursor:hand' onmousemove=/"this.style.backgroundColor='"+divmbgcolor+"';this.style.color='"+divmcolor+"';/" onmouseout=/"this.style.backgroundColor='';this.style.color='';/">"+oh2.item(i).outerText+"</span>";
od.innerHTML+=oh2text.fontcolor(h2color).link("#name"+i)+"<br>";
od.innerHTML=od.innerHTML;
}
od.innerHTML+=odhr;
for(var i=0;i<oh5.length;i++){
j=i+oh2.length+1;//第二部分标签的<a name=..>属性和<a href..>属性要以第一部分的(h2)的集合长度加1开始
str5=oh5.item(i).outerText;
str5=str5.anchor("name"+j);
oh5.item(i).innerHTML=str5;
var oh5text="<span style='width:100%;height:15;font:10pt;cursor:hand' onmousemove=/"this.style.backgroundColor='"+divmbgcolor+"';this.style.color='"+divmcolor+"';/" onmouseout=/"this.style.backgroundColor='';this.style.color='';/">"+oh5.item(i).outerText.replace(/[/d/. ]/gi,"")+"</span>"; //根据本人的需求需替换h5内容的数字,空格和"."
od.innerHTML+=oh5text.fontcolor(h5color).link("#name"+j)+"<br>";
}
od.innerHTML+=odhr;
od.style.display="none";
}
function menu(){
event.returnValue=false;
var dojI=document.all.tags("div").length; //菜单的引用对象等于div集合的最后一项,因为body.appendChild添加对象时添加到body的最后一个元素.
var doj=document.all.tags("div").item(dojI-1);
var clientwidth_clientx=document.body.clientWidth-event.clientX;
var clientheight_clienty=document.body.clientHeight-event.clientY;
var ojwidth=doj.offsetWidth;
var ojheight=doj.offsetHeight;
if(ojwidth>clientwidth_clientx) doj.style.left=document.body.scrollLeft+event.clientX-ojwidth;
else doj.style.left=document.body.scrollLeft+event.clientX;
if(ojheight>clientheight_clienty) doj.style.top=document.body.scrollTop+event.clientY-ojheight;
else doj.style.top=document.body.scrollTop+event.clientY;
doj.style.display="block";
}
function hidmenu(){
var dojI=document.all.tags("div").length;
var doj=document.all.tags("div").item(dojI-1).style.display="none";
//menu.style.display="none";
}
document.onload=addmenu();
document.oncontextmenu=menu;
document.onclick=hidmenu;