求一种导航菜单特效

dugupiaoyun 2008-08-01 02:44:03
一种导航菜单特效：
1.菜单呈竖排形式如:
菜单一
菜单二
菜单三
菜单四
2.当点击一级菜单则展开显示出二级菜单并且3级菜单非树型，而是伸展就像QQ的一样
菜单一
子菜单一
子菜单二
子菜单三
菜单二
菜单三
菜单四
3.同样当点击二级菜单则展开显示出三级菜单并且3级菜单非树型，而是伸展就像QQ的一样；另外三级四级...多级亦是一样。
菜单一
子菜单一
子菜单二
子菜单A
子菜单B
子菜单三
菜单二
菜单三
菜单四
4.最后一级子菜单为一种类似弹出菜单，在它上一级菜单的右侧显示，也是纵向显示。
菜单一
子菜单一
子菜单二
子菜单A
子菜单B -> 菜单a
子菜单三 菜单b
菜单二 菜单c
菜单三
菜单四
...全文
592 5 打赏 收藏 转发到动态 举报
写回复
用AI写文章
5 条回复
切换为时间正序
请发表友善的回复…
发表回复
ganggang4321 2008-08-02
  • 打赏
  • 举报
 回复
<div id="menu1" style="position:absolute;top:24px;left:96px; z-index:1; visibility: hidden; width: 105" onMouseOver=this.style.visibility='visible' onMouseOut=this.style.visibility='hidden' class="menuv">
<table cellspacing=2 width=100 border=0 style="BORDER:#999999 1px solid;cursor:hand" cellpadding="0" bgcolor="F4F4F4" align="right">
<tr><td class=normal onMouseDown="this.className='down'"
onMouseOver="this.className='up',high(this)" onMouseOut="this.className='normal',low(this)" style="filter:alpha(opacity=50)" onMouseUp="this.className='up'">
<div align="center"><a href="http://www.aosky.net/jspghost/jspghost.htm" target="_blank"></a></div></td></tr>
<tr><td class=normal onMouseDown="this.className='down'"
onMouseOver="this.className='up',high(this)" onMouseOut="this.className='normal',low(this)" style="filter:alpha(opacity=50)" onMouseUp="this.className='up'">
<div align="center"><a href="http://www.aosky.net/supercash/supercash.htm" target="_blank">超级赚钱器</a></div></td></tr>
<tr><td class=normal onMouseDown="this.className='down'"
onMouseOver="this.className='up',high(this)" onMouseOut="this.className='normal',low(this)" style="filter:alpha(opacity=50)" onMouseUp="this.className='up'">
<div align="center"><a href="http://www.aosky.net/mailreg/mailreg.htm" target="_blank">邮箱注册器</a></div></td></tr>
<tr><td class=normal onMouseDown="this.className='down'"
onMouseOver="this.className='up',high(this)" onMouseOut="this.className='normal',low(this)" style="filter:alpha(opacity=50)" onMouseUp="this.className='up'">
<div align="center"><a href="mailto:aosky2003@yahoo.com" target="_top">咨询信箱</a></div></td></tr>
</table></div>
<div id="menu2" style="position:absolute;top:44px;left:96px; z-index:1; visibility: hidden; width: 105" onMouseOver=this.style.visibility='visible' onMouseOut=this.style.visibility='hidden' class="menuv">
<table cellspacing=2 width=100 border=0 style="BORDER:#999999 1px solid;cursor:hand" cellpadding="0" bgcolor="F4F4F4" align="right">
<tr><td class=normal onMouseDown="this.className='down'"
onMouseOver="this.className='up',high(this)" onMouseOut="this.className='normal',low(this)" style="filter:alpha(opacity=50)" onMouseUp="this.className='up'">
<div align="center"><a href="http://www.aodufilm.net/xj/xj01.htm" target="_blank">喜剧片</a></div></td></tr>
<tr><td class=normal onMouseDown="this.className='down'"
onMouseOver="this.className='up',high(this)" onMouseOut="this.className='normal',low(this)" style="filter:alpha(opacity=50)" onMouseUp="this.className='up'">
<div align="center"><a href="http://www.aodufilm.net/dz/dz01.htm" target="_blank">动作片</a></div></td></tr>
<tr><td class=normal onMouseDown="this.className='down'"
onMouseOver="this.className='up',high(this)" onMouseOut="this.className='normal',low(this)" style="filter:alpha(opacity=50)" onMouseUp="this.className='up'">
<div align="center"><a href="http://www.aodufilm.net/kh/kh01.htm" target="_blank">科幻片</a></div></td></tr>
<tr><td class=normal onMouseDown="this.className='down'"
onMouseOver="this.className='up',high(this)" onMouseOut="this.className='normal',low(this)" style="filter:alpha(opacity=50)" onMouseUp="this.className='up'">
<div align="center"><a href="http://www.aodufilm.net/aq/aq01.htm" target="_blank">爱情片</a></div></td></tr>
<tr><td class=normal onMouseDown="this.className='down'"
onMouseOver="this.className='up',high(this)" onMouseOut="this.className='normal',low(this)" style="filter:alpha(opacity=50)" onMouseUp="this.className='up'">
<div align="center"><a href="http://www.aodufilm.net/kb/kb01.htm" target="_blank">恐怖片</a></div></td></tr>
<tr><td class=normal onMouseDown="this.className='down'"
onMouseOver="this.className='up',high(this)" onMouseOut="this.className='normal',low(this)" style="filter:alpha(opacity=50)" onMouseUp="this.className='up'">
<div align="center"><a href="http://www.aodufilm.net/zn/zn01.htm" target="_blank">灾难片</a></div></td></tr>
<tr><td class=normal onMouseDown="this.className='down'"
onMouseOver="this.className='up',high(this)" onMouseOut="this.className='normal',low(this)" style="filter:alpha(opacity=50)" onMouseUp="this.className='up'">
<div align="center"><a href="http://www.aodufilm.net/zz/zz01.htm" target="_blank">战争片</a></div></td></tr>
</table></div>
<div id="menu3" style="position:absolute;top:64px;left:96px; z-index:1; visibility: hidden; width: 105" onMouseOver=this.style.visibility='visible' onMouseOut=this.style.visibility='hidden' class="menuv">
<table cellspacing=2 width=100 border=0 style="BORDER:#999999 1px solid;cursor:hand" cellpadding="0" bgcolor="F4F4F4" align="right">
<tr><td class=normal onMouseDown="this.className='down'"
onMouseOver="this.className='up',high(this)" onMouseOut="this.className='normal',low(this)" style="filter:alpha(opacity=50)" onMouseUp="this.className='up'">
<div align="center"><a href="http://www.sina.com.cn" target="_blank">新浪网</a></div></td></tr>
<tr><td class=normal onMouseDown="this.className='down'"
onMouseOver="this.className='up',high(this)" onMouseOut="this.className='normal',low(this)" style="filter:alpha(opacity=50)" onMouseUp="this.className='up'">
<div align="center"><a href="http://www.netease.com" target="_blank">网易</a></div></td></tr>
<tr><td class=normal onMouseDown="this.className='down'"
onMouseOver="this.className='up',high(this)" onMouseOut="this.className='normal',low(this)" style="filter:alpha(opacity=50)" onMouseUp="this.className='up'">
<div align="center"><a href="http://www.sohu.com" target="_blank">搜狐</a></div></td></tr>
<tr><td class=normal onMouseDown="this.className='down'"
onMouseOver="this.className='up',high(this)" onMouseOut="this.className='normal',low(this)" style="filter:alpha(opacity=50)" onMouseUp="this.className='up'">
<div align="center"><a href="http://www.newhua.com.cn" target="_blank">华军软件园</a></div></td></tr>
<tr><td class=normal onMouseDown="this.className='down'"
onMouseOver="this.className='up',high(this)" onMouseOut="this.className='normal',low(this)" style="filter:alpha(opacity=50)" onMouseUp="this.className='up'">
<div align="center"><a href="http://www.aodufilm.net/bbs" target="_blank">奥都论坛</a></div></td></tr>
</table></div>

</div>
<body>













看看吧这个非常好


不行再说我还有
ganggang4321 2008-08-02
  • 打赏
  • 举报
 回复
<head>
<style>
body,td,a {font-size:9pt;color:#000000;text-decoration:none}
.normal {padding:2px}
.up {padding:1px;border:#999999 1px solid;background:#CCCCCC}
.down {padding:1px;border:dbdbdb 1px solid;background:dbdbdb}
.menuv {filter: revealTrans(transition=23,duration=0.5);padding:2px}
</style>
</head>

<body onmousemove="move()" onload=bodyload()>
<script>
//闪烁的表格边框
function flashit(){if(!document.all)return;if (td123.style.borderColor=="black")td123.style.borderColor="#999999";else td123.style.borderColor="black"}setInterval("flashit()",500)
//渐入的效果,改变alpha值
function high(image){theobject=image,highlighting=setInterval("highlightit(theobject)",100)}function low(image){clearInterval(highlighting),image.filters.alpha.opacity=50}function highlightit(cur2){if (cur2.filters.alpha.opacity<100)cur2.filters.alpha.opacity+=20;else if(window.highlighting)clearInterval (highlighting)}
//拖动层的js
var over=false,down=false,divleft,divtop;function move(){if(down){plane.style.left=event.clientX-divleft;plane.style.top=event.clientY-divtop;}}
//滑动层
function bodyload()
{
if(plane.style.pixelTop!=0)
{
plane.style.pixelTop-=10
setTimeout('bodyload()',1)
}
}
//渐变显示层
function Show(divid) {
divid.filters.revealTrans.apply();
divid.style.visibility = "visible";
divid.filters.revealTrans.play();
}
function Hide(divid) {
divid.filters.revealTrans.apply();
divid.style.visibility = "hidden";
divid.filters.revealTrans.play();
}

</script>
<div style="position:absolute;z-index:1;width:1;height:1; left: 0; top: 500" ID=plane onmousedown="down=true;divleft=event.clientX-parseInt(plane.style.left);divtop=event.clientY-parseInt(plane.style.top)" onmouseup="down=false">
<table id="td123" cellspacing=2 width=100 border=0 style="BORDER:#999999 1px solid;cursor:hand" cellpadding="0" bgcolor="F4F4F4">
<tr>
<td bgcolor="#CCCCCC" height="20" style="BORDER:#999999 1px solid;cursor:move">
<div align="center"><font color="#000000">多级滑动菜单</font></div>
</td>
</tr>
<tr><td class=normal onMouseDown="this.className='down'" onMouseOver="this.className='up',high(this),Show(menu1)" onMouseOut="this.className='normal',low(this),menu1.style.visibility='hidden'" style="filter:alpha(opacity=50)" onMouseUp="this.className='up'"><div align="center">奥天软件</div></td></tr>
<tr><td class=normal onMouseDown="this.className='down'" onMouseOver="this.className='up',high(this),Show(menu2)" onMouseOut="this.className='normal',low(this),menu2.style.visibility='hidden'" style="filter:alpha(opacity=50)" onMouseUp="this.className='up'"><div align="center">奥都影城</div></td></tr>
<tr><td class=normal onMouseDown="this.className='down'" onMouseOver="this.className='up',high(this),Show(menu3)" onMouseOut="this.className='normal',low(this),menu3.style.visibility='hidden'" style="filter:alpha(opacity=50)" onMouseUp="this.className='up'"><div align="center">喜欢的网站</div></td></tr>
<tr><td class=normal onMouseDown="this.className='down'" onMouseOver="this.className='up',high(this)" onMouseOut="this.className='normal',low(this)" style="filter:alpha(opacity=50)"onMouseUp="this.className='up'"><div align="center"><a href="mailto:aosky2003@yahoo.com" target="_top">咨询信箱</a></div></td></tr>
</table>

接下
gaocctv 2008-08-01
  • 打赏
  • 举报
 回复
<script language="Javascript">
<!--
var m=5; //声明一个存放子菜单图层数的变量，当子菜单图层数不是5时，要改变这个变量的值
var can=new Array(); //声明一个数组，存放是否拉出子菜单的控制代码
var newdivleft=new Array() //声明一个数组，存放各图层新的“left”参数值
var olddivleft=new Array() //声明一个数组，存放初始的各图层“left”参数值
var margeleft=parseInt(document.all.div0.style.left); //声明存放拉出子菜单的左边距变量
for (i=0;i<=m;i++){ //获取上面声明的数组的初始值
objname=eval("document.all.div"+(i)+".style");
newdivleft[i]=parseInt(objname.left);
olddivleft[i]=newdivleft[i];
can[i]=0;}
function canout(x){ //设置子菜单是拉出还是推入的控制代码，为1时拉出，为0时推入。
if (can[x]==1) can[x]=0;else can[x]=1;
}
function moveout(x){
k=x;
if (can[x]==1) { //开始拉出子菜单
newdivleft[x]+=6; //设置每次拉出6个像素
if (newdivleft[x]<(margeleft+6)) { //如果没有拉到位，可继续拉。
thisdiv=eval("document.all.div"+(x)+".style");
thisdiv.left=newdivleft[x]; //拉一次子菜单
t1=setTimeout("moveout(k)",10); //每10毫秒拉动一次子菜单
}
else
{thisdiv.left=olddivleft[0];
clearTimeout(t1);} //如果子菜单已拉到位，则清除定时函数，停止拉动子菜单。
}
else
{
if (can[x]==0){ //开始推入子菜单，方法与拉出子菜单时相同，只是方向相反。
newdivleft[x]-=6;
if (newdivleft[x]>(olddivleft[x]-5)) {
thisdiv=eval("document.all.div"+(x)+".style");
thisdiv.left=newdivleft[x];
t2=setTimeout("moveout(k)",10)} else
{clearTimeout(t2);}
}
}}
-->
</script>
wwtdan 2008-08-01
  • 打赏
  • 举报
 回复
可以去下这样的flash导航条，
pzhuyy 2008-08-01
  • 打赏
  • 举报
 回复
帮顶一下.
jQuery实现23种Bootstrap导航菜单布局特效源码.zip
该插件集成了23种Bootstrap导航菜单效果，有下拉菜单，大型菜单，侧边栏菜单，购物车菜单等，可以满足大部分网页导航菜单设计的需求。本代码适用浏览器：搜狗、360、FireFox、Chrome、Safari、Opera、傲游、世界之窗...
6款html5手机导航菜单特效.zip
6款html5手机导航菜单特效是一款共有6种不同的效果，基于jQuery跟CSS3实现的，当用户点击汉堡包菜单按钮时，会以不同的方式来显示全屏的导航菜单。
Web前端开发第三季：CSS特效
不管哪一种，这些案例中的技术都值得我们去探究和学习。 课程介绍： 本季课程为CSS特效篇，着重介绍了使用CSS使用页面的特效以实现页面的美化。 内容包含： ◆ 绘制各种图形 ◆ 设置容器的背景图片 ◆&...
html5+css3页面3d翻转展现导航菜单特效
一款超级绚丽的html5、css3页面3d翻转展现导航菜单特效。点击导航按钮后，整个页面出现3d翻转动画，之后导航菜单出现。共6种效果。
6种移动手机导航菜单UI设计效果
这是一组效果很酷的移动手机导航菜单UI设计效果。这组手机导航菜单设计共有6种不同的效果，均使用CSS3和少量的jQuery代码来完成。在用户点击汉堡包菜单按钮时，会以不同的方式来显示全屏的导航菜单。
JavaScript

87,910

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章