弹性十足的垂直下拉菜单特效源码

作者：秋了秋发表时间：2014年10月21日

这是一个非常美观，体验性能极强的垂直下拉菜单，它的效果就如同精美的flash动画，轻松实现上下弹拨的特效。而且它的实现不用借助jquery库。具体放什么内容，css如何美化就靠自己定义了，这只是我做的一个简单事例页面，可根据自己的需求自定义菜单。

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>模仿Flash效果的导航菜单netblog.cn</title></p> <style type="text/css"> .tanxing{border:1px #000 solid;width:222px;height:302px;position:absolute;}</p> <p>#hor1,#hor2,#hor3,#hor4,#hor5{height:20px;position:absolute;width:220px; background-color: #ECAD3C;color:#007500;border:1px #000 solid;cursor:pointer;} #hor1:hover,#hor2:hover,#hor3:hover,#hor4:hover,#hor5:hover{background:#ace;} #board1,#board2,#board3,#board4{height:200px;position:absolute;width:222px;visibility: hidden;background-color: #333333;color:#fff;overflow:hidden;} .tanxing li{border-bottom:1px green solid;} .tanxing li a,.tanxing li{width:200px;color:#ccc;height:19px;line-height:18px;text-decoration:none;margin-left:10px;font-size:12px;padding-right:5px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}.tanxing li a:hover{color:#007500;}</p> <p>#hor1 {top:0;z-index:201;} #board1 {top:20px;z-index:103;}</p> <p>#hor2 {top:20px;z-index:202;} #board2 {top:40px;z-index:104;}</p> <p>#hor3 {top:40px;z-index:203;} #board3 {top:60px;z-index:105;}</p> <p>#hor4 {top:60px;z-index:204;} #board4 {top:80px;z-index:106;}</p> <p>#hor5 {top:280px;z-index:204;}</p> <p>body { background-color: #666666; } </style> <p><script type="text/javascript">(function(){ function re(menu_no){ lastNo=0 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(cc=2;cc<=4;cc++){ document.getElementById("hor"+cc).style.top=20*cc-20; document.getElementById("board"+cc).style.visibility="hidden" } menu_num=4; act=1 height=200+20 speed=0; posY=0; } function huke(){ if(act==1&&cur<100){ speed=(height-posY)*0.69+speed*0.6 posY+=speed for(cc=cur;cc<=menu_num;cc++){ document.getElementById("hor"+cc).style.top=posY+(cc-2)*20 } if(Math.abs(height-posY)<0.5){ for(cc=cur;cc<=menu_num;cc++){ document.getElementById("hor"+cc).style.top=height+(cc-2)*20 } act=0 } setTimeout("huke()",50) } } })();</script> </head> <body></p> <div class="tanxing"> <div id="hor1" onclick="re(1);huke()">最新文章</div> <div id="hor2" onclick="re(2);huke()">分类目录</div> <div id="hor3" onclick="re(3);huke()">推荐阅读</div> <div id="hor4" onclick="re(4);huke()">热评文章</div> <div id="hor5">打底线</div> <div id="board1"> <li><a href="//netblog.cn/blog/146.html" target="_blank">1.wordpress依照会员等级显示不同的內容</a></li> <li><a href="//netblog.cn/blog/146.html" target="_blank">2.简单实现wordpress评论添加@评论回复</a></li> <li><a href="//netblog.cn/blog/146.html" target="_blank">3.兼容各浏览器实现CSS溢出内容自动换行</a></li> <li><a href="//netblog.cn/blog/146.html" target="_blank">4.自适应网页字体大小的设置</a></li> <li><a href="//netblog.cn/blog/146.html" target="_blank">5.wordpress依照会员等级显示不同的內容</a></li> <li><a href="//netblog.cn/blog/146.html" target="_blank">6.简单实现wordpress评论添加@评论回复</a></li> <li><a href="//netblog.cn/blog/146.html" target="_blank">7.兼容各浏览器实现CSS溢出内容自动换行</a></li> <li><a href="//netblog.cn/blog/146.html" target="_blank">8.自适应网页字体大小的设置</a></li> <li><a href="//netblog.cn/blog/146.html" target="_blank">9.兼容各浏览器实现CSS溢出内容自动换行</a></li> <li><a href="//netblog.cn/blog/146.html" target="_blank">10.自适应网页字体大小的设置</a></li> </div> <div id="board2"> <li><a href="//netblog.cn/blog/146.html" target="_blank">wordpress依照会员等级显示不同的內容</a></li> <li><a href="//netblog.cn/blog/146.html" target="_blank">简单实现wordpress评论添加@评论回复</a></li> <li><a href="//netblog.cn/blog/146.html" target="_blank">兼容各浏览器实现CSS溢出内容自动换行</a></li> <li><a href="//netblog.cn/blog/146.html" target="_blank">自适应网页字体大小的设置</a></li> </div> <div id="board3"> <li><a href="//netblog.cn/blog/146.html" target="_blank">wordpress依照会员等级显示不同的內容</a></li> <li><a href="//netblog.cn/blog/146.html" target="_blank">简单实现wordpress评论添加@评论回复</a></li> <li><a href="//netblog.cn/blog/146.html" target="_blank">兼容各浏览器实现CSS溢出内容自动换行</a></li> <li><a href="//netblog.cn/blog/146.html" target="_blank">自适应网页字体大小的设置</a></li> </div> <div id="board4"> <li><a href="//netblog.cn/blog/146.html" target="_blank">wordpress依照会员等级显示不同的內容</a></li> <li><a href="//netblog.cn/blog/146.html" target="_blank">简单实现wordpress评论添加@评论回复</a></li> <li><a href="//netblog.cn/blog/146.html" target="_blank">兼容各浏览器实现CSS溢出内容自动换行</a></li> <li><a href="//netblog.cn/blog/146.html" target="_blank">自适应网页字体大小的设置</a></li> </div> </div> <p></body> </html>

提示：可以先修改部分代码再运行

文章作者： “秋了秋”个人博客，本站鼓励原创。

转载请注明本文地址：http://netblog.cn/blog/149.html

目录: 网页特效标签: 源码,垂直菜单,特效下拉,弹性菜单 21267次阅读

弹性十足的垂直下拉菜单特效源码

作者：秋了秋 发表时间：2014年10月21日

作者：秋了秋发表时间：2014年10月21日