很独特的弹性下拉导航菜单

2024-09-05 12:19:19

字体：大中小

来源：转载

供稿：网友

弹性十足的个性化导航菜单，鼠标点击后像弹簧一样弹开，缓慢稳定结束，菜单里可以放上图片和文字，或者是列表内容，基于CSS+JS实现，比较实用。

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>弹性导航菜单</title> <style type="text/css">  </style> <script type="text/javascript"> lastNo=0 function re(menu_no){ if(lastNo!=menu_no){ cur=menu_no+1 lastNo=menu_no rest() }else{ cur=100 } document.getElementById("board"+menu_no).style.visibility="visible" } function rest(){ for(i=1;i<=4;i++){ document.getElementById("hor"+i).style.top=20*i; document.getElementById("board"+i).style.visibility="hidden" } menu_num=4;  act=1  height=120+20  speed=0;  posY=0; } function huke(){ if(act==1 && cur<100){ speed=(height-posY)*0.69+speed*0.6 posY+=speed for(i=cur;i<=menu_num;i++){ document.getElementById("hor"+i).style.top=posY+(i-2)*20 } if(Math.abs(height-posY)<0.5){ for(i=cur;i<=menu_num;i++){ document.getElementById("hor"+i).style.top=height+(i-2)*20 } act=0 } setTimeout("huke()",50) } } </script> </head> <body> <div id="hor1" onclick="re(1);huke()">ASP</div> <div id="hor2" onclick="re(2);huke()">PHP</div> <div id="hor3" onclick="re(3);huke()">DELPHI</div> <div id="hor4" onclick="re(4);huke()">AJAX</div> <div id="board1">本栏提供精品ASP源码下载。</div> <div id="board2">你难道不喜欢Ajax吗？</div> <div id="board3">网站与老婆有什么不同？</div> <div id="board4">Ajax是一种新型的WEB编程脚本，大家都很喜欢啊……</div> </body> </html>

上一篇：红白色配合的CSS菜单

下一篇：简洁的滑出菜单