收藏本站 |切换到宽版 | 更换论坛皮肤
 找回密码  忘记邮箱  QQ快速登录  快速登录  快速注册

卡饭»论坛 › 软件区 › 解疑答难区 › 网页设计！关于下弹菜单~~！
返回列表 发新帖
查看: 1538|回复: 5
收起左侧

网页设计！关于下弹菜单~~！

[复制链接]
达特
发表于 2007-3-18 09:58:09 | 显示全部楼层 |阅读模式
我在网上找了个下弹菜单的代码，想做成有6个母菜单，然后每个母菜单下面都可以包含4个以上的子菜单。我自己试着改了，但是不能成功！

所有想请教下达人，应该怎么来改？？
回复

举报

达特
 楼主| 发表于 2007-3-18 09:58:29 | 显示全部楼层
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="JavaScript">


var currTimerlinePoint = 0;
var totalTimerlineFrames = 2;
var timerlineTimer;
var leftLine = 50;
var timerIn;
var timerOut;


var timerlineArray = new Array();
timerlineArray[0]='';
timerlineArray[1]='menuItemOut()';



function runTimerline()
{
//if (totalTimerlineFrames > currTimerlinePoint)
// {
// eval( timerlineArray[currTimerlinePoint]);
// currTimerlinePoint ++;
// }
//else {currTimerlinePoint = 0; clearTimeout(window.timerlineTimer); return false;}

//window.timerlineTimer = setTimeout('runTimerline()',1000);

window.timerlineTimer = setTimeout('menuItemOut()',500);

}

function stopTimerline()
{
clearTimeout(window.timerlineTimer);
//currTimerlinePoint = 0;
}



function menuItemIn()
{
if( leftLine != 150)
{
item11.style.pixelLeft += 20; item11.filters.alpha.opacity += 20;
item12.style.pixelLeft -= 20; item12.filters.alpha.opacity += 20;
item13.style.pixelLeft += 20; item13.filters.alpha.opacity += 20;
item14.style.pixelLeft -= 20; item14.filters.alpha.opacity += 20;
leftLine += 20;
}
else
{
clearTimeout(window.timerIn);
return false;
}
timerIn=window.setTimeout('menuItemIn()',1);
}

function menuItemOut()
{
clearTimeout(window.timerIn);
if (leftLine != 50)
{
item11.style.pixelLeft -= 20; item11.filters.alpha.opacity -= 20;
item12.style.pixelLeft += 20; item12.filters.alpha.opacity -= 20;
item13.style.pixelLeft -= 20; item13.filters.alpha.opacity -= 20;
item14.style.pixelLeft += 20; item14.filters.alpha.opacity -= 20;

leftLine -= 20;
}
else
{
clearTimeout(window.timerOut);
return false;
}
timerOut=window.setTimeout("menuItemOut()",1);
}
</script>
<script language="JavaScript">


var currTimerlinePoint = 0;
var totalTimerlineFrames = 2;
var timerlineTimer;
var leftLine = 50;
var timerIn;
var timerOut;


var timerlineArray = new Array();
timerlineArray[0]='';
timerlineArray[1]='menuItemOut()';



function runTimerline()
{
//if (totalTimerlineFrames > currTimerlinePoint)
// {
// eval( timerlineArray[currTimerlinePoint]);
// currTimerlinePoint ++;
// }
//else {currTimerlinePoint = 0; clearTimeout(window.timerlineTimer); return false;}

//window.timerlineTimer = setTimeout('runTimerline()',1000);

window.timerlineTimer = setTimeout('menuItemOut()',500);

}

function stopTimerline()
{
clearTimeout(window.timerlineTimer);
//currTimerlinePoint = 0;
}



function menuItemIn()
{
if( leftLine != 150)
{
item21.style.pixelLeft += 20; item21.filters.alpha.opacity += 20;
item22.style.pixelLeft -= 20; item22.filters.alpha.opacity += 20;
leftLine += 20;
}
else
{
clearTimeout(window.timerIn);
return false;
}
timerIn=window.setTimeout('menuItemIn()',1);
}

function menuItemOut()
{
clearTimeout(window.timerIn);
if (leftLine != 50)
{
item21.style.pixelLeft -= 20; item21.filters.alpha.opacity -= 20;
item22.style.pixelLeft += 20; item22.filters.alpha.opacity -= 20;
leftLine -= 20;
}
else
{
clearTimeout(window.timerOut);
return false;
}
timerOut=window.setTimeout("menuItemOut()",1);
}
</script>
回复

举报

达特
 楼主| 发表于 2007-3-18 09:59:06 | 显示全部楼层
</head>
<body bgcolor="#FFFFFF" text="#000000">
<div style="position:absolute; left:120px; top:180px"><div align=center id="menu01" style="position:absolute; left:150px; top:33px; width:100px; height:19px; z-index:1; background-color: #000099; layer-background-color: #000099; border: 1px none #000000;padding-top:3;cursor:hand;font-size:9pt" onmouseover='stopTimerline();menuItemIn()' onmouseout='runTimerline()'><a href="about.asp?id=4"><font color=#FFFFFF>市场篇</a></div>
<div align=center id="item11" style="position:absolute; left:50px; top:55px; width:99px; height:19px; z-index:2; background-color: #0099CC; layer-background-color: #0099CC; border: 1px none #000000; filter:alpha(opacity=0);padding-top:4;cursor:hand;font-size:9pt"
onmouseover="this.style.backgroundColor= '#006699';stopTimerline()"
onmouseout="this.style.backgroundColor= '#0099cc';runTimerline()"><a href="about.asp?id=4">海天汽配</a></div>
<div align=center id="item12" style="position:absolute; left:250px; top:77px; width:99px; height:19px; z-index:2; background-color: #0099CC; layer-background-color: #0099CC; border: 1px none #000000; filter:alpha(opacity=0);padding-top:3;cursor:hand;font-size:9pt"
onmouseover="this.style.backgroundColor= '#006699';stopTimerline()"
onmouseout="this.style.backgroundColor= '#0099cc';runTimerline()"><a href="about.asp?id=50">农资</a></div>
<div align=center id="item13" style="position:absolute; left:50px; top:99px; width:99px; height:19px; z-index:2; background-color: #0099CC; layer-background-color: #0099CC; border: 1px none #000000; filter:alpha(opacity=0);padding-top:3;cursor:hand;font-size:9pt"
onmouseover="this.style.backgroundColor= '#006699';stopTimerline()"
onmouseout="this.style.backgroundColor= '#0099cc';runTimerline()"><a href="about.asp?id=51">汽车批发</a></div>
<div align=center id="item14" style="position:absolute; left:250px; top:121px; width:99px; height:19px; z-index:2; background-color: #0099CC; layer-background-color: #0099CC; border: 1px none #000000; filter:alpha(opacity=0);padding-top:3;cursor:hand;font-size:9pt"
onmouseover="this.style.backgroundColor= '#006699';stopTimerline()"
onmouseout="this.style.backgroundColor= '#0099cc';runTimerline()"><a href="about.asp?id=52">建材</a></div></div>
<div style="position:absolute; left:220px; top:180px"><div align=center id="menu02" style="position:absolute; left:150px; top:33px; width:100px; height:19px; z-index:3; background-color: #000099; layer-background-color: #000099; border: 1px none #000000;padding-top:3;cursor:hand;font-size:9pt" onmouseover='stopTimerline();menuItemIn()' onmouseout='runTimerline()'><a href="about.asp?id=53"><font color=#FFFFFF>物流篇</a></div>
  <div align=center id="item21" style="position:absolute; left:150px; top:55px; width:99px; height:19px; z-index:4; background-color: #0099CC; layer-background-color: #0099CC; border: 1px none #000000; filter:alpha(opacity=0);padding-top:4;cursor:hand;font-size:9pt"
onmouseover="this.style.backgroundColor= '#006699';stopTimerline()"
onmouseout="this.style.backgroundColor= '#0099cc';runTimerline()"><a href="about.asp?id=53">正达</a></div>
<div align=center id="item22" style="position:absolute; left:350px; top:77px; width:99px; height:19px; z-index:4; background-color: #0099CC; layer-background-color: #0099CC; border: 1px none #000000; filter:alpha(opacity=0);padding-top:3;cursor:hand;font-size:9pt"
onmouseover="this.style.backgroundColor= '#006699';stopTimerline()"
onmouseout="this.style.backgroundColor= '#0099cc';runTimerline()"><a href="about.asp?id=54">世通</a></div></div>
<div style="position:absolute; left:320px; top:180px"><div align=center id="menu03" style="position:absolute; left:150px; top:33px; width:100px; height:19px; z-index:5; background-color: #000099; layer-background-color: #000099; border: 1px none #000000;padding-top:3;cursor:hand;font-size:9pt" onmouseover='stopTimerline();menuItemIn()' onmouseout='runTimerline()'><a href="about.asp?id=55"><font color=#FFFFFF>工业篇</a></div>
<div align=center id="item31" style="position:absolute; left:50px; top:55px; width:99px; height:19px; z-index:6; background-color: #0099CC; layer-background-color: #0099CC; border: 1px none #000000; filter:alpha(opacity=0);padding-top:4;cursor:hand;font-size:9pt"
onmouseover="this.style.backgroundColor= '#006699';stopTimerline()"
onmouseout="this.style.backgroundColor= '#0099cc';runTimerline()"><a href="about.asp?id=55">化工</a></div></div>
<div style="position:absolute; left:420px; top:180px"><div align=center id="menu04" style="position:absolute; left:150px; top:33px; width:100px; height:19px; z-index:7; background-color: #000099; layer-background-color: #000099; border: 1px none #000000;padding-top:3;cursor:hand;font-size:9pt" onmouseover='stopTimerline();menuItemIn()' onmouseout='runTimerline()'><a href="about.asp?id=56"><font color=#FFFFFF>房地产篇</a></div>
<div align=center id="item41" style="position:absolute; left:50px; top:55px; width:99px; height:19px; z-index:8; background-color: #0099CC; layer-background-color: #0099CC; border: 1px none #000000; filter:alpha(opacity=0);padding-top:4;cursor:hand;font-size:9pt"
onmouseover="this.style.backgroundColor= '#006699';stopTimerline()"
onmouseout="this.style.backgroundColor= '#0099cc';runTimerline()"><a href="about.asp?id=56">置业</a></div></div>
<div style="position:absolute; left:520px; top:180px"><div align=center id="menu05" style="position:absolute; left:150px; top:33px; width:100px; height:19px; z-index:9; background-color: #000099; layer-background-color: #000099; border: 1px none #000000;padding-top:3;cursor:hand;font-size:9pt" onmouseover='stopTimerline();menuItemIn()' onmouseout='runTimerline()'><a href="about.asp?id=57"><font color=#FFFFFF>农业篇</a></div>
<div align=center id="item51" style="position:absolute; left:50px; top:55px; width:99px; height:19px; z-index:10; background-color: #0099CC; layer-background-color: #0099CC; border: 1px none #000000; filter:alpha(opacity=0);padding-top:4;cursor:hand;font-size:9pt"
onmouseover="this.style.backgroundColor= '#006699';stopTimerline()"
onmouseout="this.style.backgroundColor= '#0099cc';runTimerline()"><a href="about.asp?id=57">金蟹</a></div></div>
<div style="position:absolute; left:620px; top:180px">
  <div align=center id="menu06" style="position:absolute; left:150px; top:33px; width:100px; height:19px; z-index:11; background-color: #000099; layer-background-color: #000099; border: 1px none #000000;padding-top:3;cursor:hand;font-size:9pt" onMouseOver='stopTimerline();menuItemIn()' onMouseOut='runTimerline()'><a href="about.asp?id=58"><font color=#FFFFFF>广告篇</a></div>
  <font color=#FFFFFF><div align=center id="item61" style="position:absolute; left:50px; top:55px; width:99px; height:19px; z-index:12; background-color: #0099CC; layer-background-color: #0099CC; border: 1px none #000000; filter:alpha(opacity=0);padding-top:4;cursor:hand;font-size:9pt"
onMouseOver="this.style.backgroundColor= '#006699';stopTimerline()"
onMouseOut="this.style.backgroundColor= '#0099cc';runTimerline()"><a href="about.asp?id=58">海丰</a></div></div>
</body>
</html>
回复

举报

达特
 楼主| 发表于 2007-3-18 10:01:13 | 显示全部楼层
我知道是JSP 没有设置正确~
但是我确实不知道问题出在哪？

  请教达人，我这个究竟应该怎么改，才能实现下弹菜单的效果？！

    因本人为菜鸟，所以希望解答能尽量详细！
回复

举报

无敌敏敏
发表于 2007-3-18 10:24:24 | 显示全部楼层
3楼的代码修改一下~

只有[工业篇]显示下拉菜单~
回复

举报

达特
 楼主| 发表于 2007-3-18 10:37:01 | 显示全部楼层
是啊~
这段代码是这样显示的
  但是不知道该怎么改~~

而且我个人觉得是<script language="JavaScript"> 这个里面的定义有问题的说~
    因为只有一个层会显示，所以我觉得是JS 里面只定义了一个层的属性的原因~~~

   所有我很想知道该怎么去解决~~~
回复

举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 快速注册

本版积分规则

手机版|杀毒软件|软件论坛| 卡饭论坛

Copyright © KaFan  KaFan.cn All Rights Reserved.

Powered by Discuz! X3.4( 沪ICP备2020031077号-2 ) GMT+8, 2024-11-24 15:22 , Processed in 0.117033 second(s), 17 queries .

卡饭网所发布的一切软件、样本、工具、文章等仅限用于学习和研究，不得将上述内容用于商业或者其他非法用途，否则产生的一切后果自负，本站信息来自网络，版权争议问题与本站无关，您必须在下载后的24小时之内从您的电脑中彻底删除上述信息，如有问题请通过邮件与我们联系。

快速回复 客服 返回顶部 返回列表