网页导航特效类似于Jquery的JS下拉菜单

2019-04-12

熬夜写的一个js下拉菜单类似jq效果个人觉得还行。 !DOCTYPEhtmlPUBLIC-//W3C////ENhttp:///TR/xhtml1/DTD/=http:///1999/xhtmlheadmetahttp-equiv=Content-Typecontent=text/html;charset=utf-8/titleanav/titlestyletype=text/css*{margin:0;padding:0;font-style:normal;font-family:宋体;}body{text-align:center;font-size:14px;}#content{margin:0auto;width:600px;}#content#nav{background:#006400;height:32px;margin-top:60px;}#content#navul{list-style:none;}#content#navulli{float:left;width:100px;line-height:32px;position:relative;}#navdiv{width:100px;position:absolute;left:0px;padding-bottom:0px;background:#006400;float:left;height:0;overflow:hidden;}#content#{text-decoration:none;color:#00CD00;line-height:32px;display:block;border-right:1pxsolid#009800;}#navdiva{text-decoration:none;color:#00CD00;line-height:26px;display:block;}#navdiva:hover{background:#005400;}/style/headbodydivid=contentdivid=navulid=supnavliahref=#class=a好好学习/adivahref=#好好学习/aahref=#好好学习/aahref=#好好学习/aahref=#好好学习/aahref=#好好学习/a/div/liliahref=#class=a好好学习/adivahref=#好好学习/aahref=#好好学习/aahref=#好好学习/aahref=#好好学习/aahref=#好好学习/aahref=#好好学习/aahref=#好好学习/aahref=#好好学习/a/div/liliahref=#class=a好好学习/adivahref=#好好学习/aahref=#好好学习/aahref=#好好学习/aahref=#好好学习/aahref=#好好学习/aahref=#好好学习/aahref=#好好学习/a/div/liliahref=#class=a好好学习/adivahref=#好好学习/aahref=#好好学习/aahref=#好好学习/aahref=#好好学习/aahref=#好好学习/aahref=#好好学习/aahref=#好好学习/aahref=#好好学习/aahref=#好好学习/a/div/liliahref=#class=a好好学习/adivahref=#好好学习/aahref=#好好学习/aahref=#好好学习/aahref=#好好学习/aahref=#好好学习/aahref=#好好学习/aahref=#好好学习/aahref=#好好学习/aahref=#好好学习/a/div/liliahref=#class=a好好学习/adivahref=#好好学习/aahref=#好好学习/aahref=#好好学习/aahref=#好好学习/a/div/li/ul/div/divscripttype=text/javascriptvarsupnav=(supnav);varnav=(nav);varbtns=(li);varsubnavs=(div);varpaddingbottom=20;vardefaultHeight=0;functiondrop(obj,ivalue){vara=;varspeed=()/8;a+=(speed);=a+px}=function(){for(vari=0;;i++){btns[i].index=i;btns[i].onmouseover=function(){varosubnav=subnavs[];varsublinks=(a);if(==undefined){varitarheight=parseInt([1].offsetHeight)*+paddingbottom;}else{varitarheight=parseInt()*+paddingbottom;}clearInterval();=setInterval(function(){drop(osubnav,itarheight);},30);}btns[i].onmouseout=function(){varosubnav=subnavs[];clearInterval();=setInterval(function(){drop(osubnav,defaultHeight);},30);}}}/script/body/html[Ctrl+A全部选择提示:你可先修改部分代码,再按运行]。

国家发展和改革委员会 | 国家工业和信息化部 | 国家住房和城乡建设部 | 国家科学技术部 | 中国电信 | 中国移动 | 中国联通