仿DVBBS下拉菜单效果 jb51修正无错
程序员文章站
2023-12-30 11:04:04
1、将存为menu.htm格式文件 以下为代码内容： 复制代码 代码如下:
1、将存为menu.htm格式文件 以下为代码内容：
<html>
<head>
<style>
.menuskin {
border-right: #cbd7e9 1px solid; border-top: #cbd7e9 1px solid; background-image: url(image/menubg.gif); visibility: hidden; font: 12px tahoma, verdana; border-left: #cbd7e9 1px solid; border-bottom: #cbd7e9 1px solid; position: absolute; background-color: #ffffff
}
.menuskin a {
padding-right: 10px; padding-left: 25px; color: #3a4273; text-decoration: none
}
#mouseoverstyle {
border-right: #597db5 1px solid; padding-right: 0px; border-top: #597db5 1px solid; padding-left: 0px; padding-bottom: 0px; margin: 2px; border-left: #597db5 1px solid; padding-top: 0px; border-bottom: #597db5 1px solid; background-color: #c9d5e7
}
#mouseoverstyle a {
color: black
}
.menuitems {
padding-right: 1px; padding-left: 1px; padding-bottom: 1px; margin: 2px; word-break: keep-all; padding-top: 1px
}
</style>
<script type="text/javascript" src="menu.js"></script>
</head>
<body vlink='#333333' link='#333333'>
<div class=menuskin id=popmenu onmouseover="clearhidemenu();highlightmenu(event,'on')" onmouseout="highlightmenu(event,'off');dynamichide(event)" style="z-index:100"></div>
<center>
<a href="###" onmouseover="showmenu(event,'<div class=menuitems><a href=http://www.gyct.cn/article/index.asp>网络文摘</a></div><div class=menuitems><a href=http://www.gyct.cn/article/index.asp>网络文摘</a></div>')"> 思客秀</a>
</center>
</body>
</html>
2、将下面代码存为menu.js文件，并与menu.htm放到同级目录下
//pop-it menu- by dynamic drive - modified by wbird
//for full source code and more dhtml scripts, visit http://www.gyct.cn
//this credit must stay intact for use
var menuoffx=0 //菜单距连接文字最左端距离
var menuoffy=18 //菜单距连接文字顶端距离
var vbobjects = new array();
var fo_shadows=new array();
////no need to edit beyond here
var ie4=document.all&&navigator.useragent.indexof("opera")==-1
var ns6=document.getelementbyid&&!document.all
var ns4=document.layers
function mm_findobj(n, d) {
var p,i,x; if(!d) d=document; if((p=n.indexof("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=mm_findobj(n,d.layers.document);
if(!x && d.getelementbyid) x=d.getelementbyid(n); return x;
}
function fetch_object(idname, forcefetch)
{
if (typeof(vbobjects[idname]) == "undefined")
{
vbobjects[idname] = mm_findobj(idname);
}
return vbobjects[idname];
}
//showmenu vmenu:内容，允许为空,vmenuobj div数据id，mod 0=关闭浏览器自适应，用于版面导航菜单
function showmenu(e,vmenu,vmenuobj,mod){
if (!document.all&&!document.getelementbyid&&!document.layers)
return
var which=vmenu;
if (vmenuobj)
{
var menuobj = fetch_object(vmenuobj);
if (menuobj)
{
which = menuobj.innerhtml;
}
}
if (!which)
{
return
}
clearhidemenu();
ie_clearshadow();
menuobj=ie4? document.all.popmenu : ns6? document.getelementbyid("popmenu") : ns4? document.popmenu : ""
menuobj.thestyle=(ie4||ns6)? menuobj.style : menuobj
if (ie4||ns6)
menuobj.innerhtml=which
else{
menuobj.document.write('<layer name=gui bgcolor="#e6e6e6" width="165" onmouseover="clearhidemenu()" onmouseout="hidemenu()">'+which+'</layer>')
menuobj.document.close()
}
menuobj.contentwidth=(ie4||ns6)? menuobj.offsetwidth : menuobj.document.gui.document.width
menuobj.contentheight=(ie4||ns6)? menuobj.offsetheight : menuobj.document.gui.document.height
eventx=ie4? event.clientx : ns6? e.clientx : e.x
eventy=ie4? event.clienty : ns6? e.clienty : e.y
var rightedge=ie4? document.body.clientwidth-eventx : window.innerwidth-eventx
var bottomedge=ie4? document.body.clientheight-eventy : window.innerheight-eventy
var getlength
if (rightedge<menuobj.contentwidth){
getlength=ie4? document.body.scrollleft+eventx-menuobj.contentwidth+menuoffx : ns6? window.pagexoffset+eventx-menuobj.contentwidth : eventx-menuobj.contentwidth
}else{
getlength=ie4? ie_x(event.srcelement)+menuoffx : ns6? window.pagexoffset+eventx : eventx
}
menuobj.thestyle.left=getlength+'px'
if (bottomedge<menuobj.contentheight&&mod!=0){
getlength=ie4? document.body.scrolltop+eventy-menuobj.contentheight-event.offsety+menuoffy-23 : ns6? window.pageyoffset+eventy-menuobj.contentheight-10 : eventy-menuobj.contentheight
} else{
getlength=ie4? ie_y(event.srcelement)+menuoffy : ns6? window.pageyoffset+eventy+10 : eventy
}
menuobj.thestyle.top=getlength+'px'
menuobj.thestyle.visibility="visible"
ie_dropshadow(menuobj,"#999999",3)
return false
}
function ie_y(e){
var t=e.offsettop;
while(e=e.offsetparent){
t+=e.offsettop;
}
return t;
}
function ie_x(e){
var l=e.offsetleft;
while(e=e.offsetparent){
l+=e.offsetleft;
}
return l;
}
function ie_dropshadow(el, color, size)
{
var i;
for (i=size; i>0; i--)
{
var rect = document.createelement('div');
var rs = rect.style
rs.position = 'absolute';
rs.left = (el.style.posleft + i) + 'px';
rs.top = (el.style.postop + i) + 'px';
rs.width = el.offsetwidth + 'px';
rs.height = el.offsetheight + 'px';
rs.zindex = el.style.zindex - i;
rs.backgroundcolor = color;
var opacity = 1 - i / (i + 1);
rs.filter = 'alpha(opacity=' + (100 * opacity) + ')';
//el.insertadjacentelement('afterend', rect);
fo_shadows[fo_shadows.length] = rect;
}
}
function ie_clearshadow()
{
for(var i=0;i<fo_shadows.length;i++)
{
if (fo_shadows[i])
fo_shadows[i].style.display="none"
}
fo_shadows=new array();
}
function contains_ns6(a, b) {
while (b.parentnode)
if ((b = b.parentnode) == a)
return true;
return false;
}
function hidemenu(){
if (window.menuobj)
menuobj.thestyle.visibility=(ie4||ns6)? "hidden" : "hide"
ie_clearshadow()
}
function dynamichide(e){
if (ie4&&!menuobj.contains(e.toelement))
hidemenu()
else if (ns6&&e.currenttarget!= e.relatedtarget&& !contains_ns6(e.currenttarget, e.relatedtarget))
hidemenu()
}
function delayhidemenu(){
if (ie4||ns6||ns4)
delayhide=settimeout("hidemenu()",500)
}
function clearhidemenu(){
if (window.delayhide)
cleartimeout(delayhide)
}
function highlightmenu(e,state){
if (document.all)
source_el=event.srcelement
else if (document.getelementbyid)
source_el=e.target
if (source_el.classname=="menuitems"){
source_el.id=(state=="on")? "mouseoverstyle" : ""
}
else{
while(source_el.id!="popmenu"){
source_el=document.getelementbyid? source_el.parentnode : source_el.parentelement
if (source_el.classname=="menuitems"){
source_el.id=(state=="on")? "mouseoverstyle" : ""
}
}
}
}
if (ie4||ns6)
document.onclick=hidemenu
3、在menu.htm目录下建立image目录，制作背景图片
ps:事例效果:
以下为代码内容：
<div class=menuskin id=popmenu onmouseover=clearhidemenu() onmouseout=dynamichide(event) style="z-index:100;"></div>
<font color="#eeeeee"> <a href=### onmouseover="showmenu(event,'<div class=menuitems id=site_menu><a href=/common/skins.asp?action=skin_1>简约时尚</a><br /><a href=/common/skins.asp?action=skin_2>魔兽世界</a><br /><a href=/common/skins.asp?action=cookies_clear alt=清除您在本站所留的cookies信息>清除记录</a><br /></div>','site_menu')"><font color=#eeeeee>[选择皮肤]</font></a></font>
jb51修正无错
')">
[ctrl+a 全选 注:如需引入外部js需刷新才能执行]
复制代码 代码如下:
<html>
<head>
<style>
.menuskin {
border-right: #cbd7e9 1px solid; border-top: #cbd7e9 1px solid; background-image: url(image/menubg.gif); visibility: hidden; font: 12px tahoma, verdana; border-left: #cbd7e9 1px solid; border-bottom: #cbd7e9 1px solid; position: absolute; background-color: #ffffff
}
.menuskin a {
padding-right: 10px; padding-left: 25px; color: #3a4273; text-decoration: none
}
#mouseoverstyle {
border-right: #597db5 1px solid; padding-right: 0px; border-top: #597db5 1px solid; padding-left: 0px; padding-bottom: 0px; margin: 2px; border-left: #597db5 1px solid; padding-top: 0px; border-bottom: #597db5 1px solid; background-color: #c9d5e7
}
#mouseoverstyle a {
color: black
}
.menuitems {
padding-right: 1px; padding-left: 1px; padding-bottom: 1px; margin: 2px; word-break: keep-all; padding-top: 1px
}
</style>
<script type="text/javascript" src="menu.js"></script>
</head>
<body vlink='#333333' link='#333333'>
<div class=menuskin id=popmenu onmouseover="clearhidemenu();highlightmenu(event,'on')" onmouseout="highlightmenu(event,'off');dynamichide(event)" style="z-index:100"></div>
<center>
<a href="###" onmouseover="showmenu(event,'<div class=menuitems><a href=http://www.gyct.cn/article/index.asp>网络文摘</a></div><div class=menuitems><a href=http://www.gyct.cn/article/index.asp>网络文摘</a></div>')"> 思客秀</a>
</center>
</body>
</html>
2、将下面代码存为menu.js文件，并与menu.htm放到同级目录下
复制代码 代码如下:
//pop-it menu- by dynamic drive - modified by wbird
//for full source code and more dhtml scripts, visit http://www.gyct.cn
//this credit must stay intact for use
var menuoffx=0 //菜单距连接文字最左端距离
var menuoffy=18 //菜单距连接文字顶端距离
var vbobjects = new array();
var fo_shadows=new array();
////no need to edit beyond here
var ie4=document.all&&navigator.useragent.indexof("opera")==-1
var ns6=document.getelementbyid&&!document.all
var ns4=document.layers
function mm_findobj(n, d) {
var p,i,x; if(!d) d=document; if((p=n.indexof("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=mm_findobj(n,d.layers.document);
if(!x && d.getelementbyid) x=d.getelementbyid(n); return x;
}
function fetch_object(idname, forcefetch)
{
if (typeof(vbobjects[idname]) == "undefined")
{
vbobjects[idname] = mm_findobj(idname);
}
return vbobjects[idname];
}
//showmenu vmenu:内容，允许为空,vmenuobj div数据id，mod 0=关闭浏览器自适应，用于版面导航菜单
function showmenu(e,vmenu,vmenuobj,mod){
if (!document.all&&!document.getelementbyid&&!document.layers)
return
var which=vmenu;
if (vmenuobj)
{
var menuobj = fetch_object(vmenuobj);
if (menuobj)
{
which = menuobj.innerhtml;
}
}
if (!which)
{
return
}
clearhidemenu();
ie_clearshadow();
menuobj=ie4? document.all.popmenu : ns6? document.getelementbyid("popmenu") : ns4? document.popmenu : ""
menuobj.thestyle=(ie4||ns6)? menuobj.style : menuobj
if (ie4||ns6)
menuobj.innerhtml=which
else{
menuobj.document.write('<layer name=gui bgcolor="#e6e6e6" width="165" onmouseover="clearhidemenu()" onmouseout="hidemenu()">'+which+'</layer>')
menuobj.document.close()
}
menuobj.contentwidth=(ie4||ns6)? menuobj.offsetwidth : menuobj.document.gui.document.width
menuobj.contentheight=(ie4||ns6)? menuobj.offsetheight : menuobj.document.gui.document.height
eventx=ie4? event.clientx : ns6? e.clientx : e.x
eventy=ie4? event.clienty : ns6? e.clienty : e.y
var rightedge=ie4? document.body.clientwidth-eventx : window.innerwidth-eventx
var bottomedge=ie4? document.body.clientheight-eventy : window.innerheight-eventy
var getlength
if (rightedge<menuobj.contentwidth){
getlength=ie4? document.body.scrollleft+eventx-menuobj.contentwidth+menuoffx : ns6? window.pagexoffset+eventx-menuobj.contentwidth : eventx-menuobj.contentwidth
}else{
getlength=ie4? ie_x(event.srcelement)+menuoffx : ns6? window.pagexoffset+eventx : eventx
}
menuobj.thestyle.left=getlength+'px'
if (bottomedge<menuobj.contentheight&&mod!=0){
getlength=ie4? document.body.scrolltop+eventy-menuobj.contentheight-event.offsety+menuoffy-23 : ns6? window.pageyoffset+eventy-menuobj.contentheight-10 : eventy-menuobj.contentheight
} else{
getlength=ie4? ie_y(event.srcelement)+menuoffy : ns6? window.pageyoffset+eventy+10 : eventy
}
menuobj.thestyle.top=getlength+'px'
menuobj.thestyle.visibility="visible"
ie_dropshadow(menuobj,"#999999",3)
return false
}
function ie_y(e){
var t=e.offsettop;
while(e=e.offsetparent){
t+=e.offsettop;
}
return t;
}
function ie_x(e){
var l=e.offsetleft;
while(e=e.offsetparent){
l+=e.offsetleft;
}
return l;
}
function ie_dropshadow(el, color, size)
{
var i;
for (i=size; i>0; i--)
{
var rect = document.createelement('div');
var rs = rect.style
rs.position = 'absolute';
rs.left = (el.style.posleft + i) + 'px';
rs.top = (el.style.postop + i) + 'px';
rs.width = el.offsetwidth + 'px';
rs.height = el.offsetheight + 'px';
rs.zindex = el.style.zindex - i;
rs.backgroundcolor = color;
var opacity = 1 - i / (i + 1);
rs.filter = 'alpha(opacity=' + (100 * opacity) + ')';
//el.insertadjacentelement('afterend', rect);
fo_shadows[fo_shadows.length] = rect;
}
}
function ie_clearshadow()
{
for(var i=0;i<fo_shadows.length;i++)
{
if (fo_shadows[i])
fo_shadows[i].style.display="none"
}
fo_shadows=new array();
}
function contains_ns6(a, b) {
while (b.parentnode)
if ((b = b.parentnode) == a)
return true;
return false;
}
function hidemenu(){
if (window.menuobj)
menuobj.thestyle.visibility=(ie4||ns6)? "hidden" : "hide"
ie_clearshadow()
}
function dynamichide(e){
if (ie4&&!menuobj.contains(e.toelement))
hidemenu()
else if (ns6&&e.currenttarget!= e.relatedtarget&& !contains_ns6(e.currenttarget, e.relatedtarget))
hidemenu()
}
function delayhidemenu(){
if (ie4||ns6||ns4)
delayhide=settimeout("hidemenu()",500)
}
function clearhidemenu(){
if (window.delayhide)
cleartimeout(delayhide)
}
function highlightmenu(e,state){
if (document.all)
source_el=event.srcelement
else if (document.getelementbyid)
source_el=e.target
if (source_el.classname=="menuitems"){
source_el.id=(state=="on")? "mouseoverstyle" : ""
}
else{
while(source_el.id!="popmenu"){
source_el=document.getelementbyid? source_el.parentnode : source_el.parentelement
if (source_el.classname=="menuitems"){
source_el.id=(state=="on")? "mouseoverstyle" : ""
}
}
}
}
if (ie4||ns6)
document.onclick=hidemenu
3、在menu.htm目录下建立image目录，制作背景图片
ps:事例效果:
以下为代码内容：
<div class=menuskin id=popmenu onmouseover=clearhidemenu() onmouseout=dynamichide(event) style="z-index:100;"></div>
<font color="#eeeeee"> <a href=### onmouseover="showmenu(event,'<div class=menuitems id=site_menu><a href=/common/skins.asp?action=skin_1>简约时尚</a><br /><a href=/common/skins.asp?action=skin_2>魔兽世界</a><br /><a href=/common/skins.asp?action=cookies_clear alt=清除您在本站所留的cookies信息>清除记录</a><br /></div>','site_menu')"><font color=#eeeeee>[选择皮肤]</font></a></font>
jb51修正无错
')">
[ctrl+a 全选 注:如需引入外部js需刷新才能执行]