自己写的一个JS菜单函数.

博客介绍了一个自己编写的JS菜单函数,该函数可对h1 - h6等标签自动解析生成右击菜单并产生标记,适用于长网页的菜单导航。文中给出了菜单的样式设置参数及函数的具体代码实现,包括菜单创建、显示和隐藏等功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

自己写的一个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;

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值