二级动态导航菜单特效

webcode

浏览: 5951971 次
性别:
来自: 上海

最近访客更多访客>>

ap950

u012363178

wangyy

ybfjavaeye

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (7533)

社区版块

存档分类

2013-02 ( 78)
2013-01 ( 83)
2012-12 ( 121)
更多存档...

F#JavaScript XHTML HTML

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312">
<style>
BODY{
FONT-SIZE:12px;MARGIN:0px;BACKGROUND-COLOR:#131d30
}
A:link{
COLOR:#7ea9bf;TEXT-DECORATION:none
}
A:visited{
COLOR:#7ea9bf;TEXT-DECORATION:none
}
A:hover{
COLOR:#ffffff;TEXT-DECORATION:underline
}
A:active{
COLOR:#ffffff;TEXT-DECORATION:none
}
.Defautl-Navigation{
FONT-SIZE:12px;FLOAT:left;COLOR:#7ea9bf;LINE-HEIGHT:23px;HEIGHT:23px;TEXT-ALIGN:center
}
</style>
<SCRIPTlanguage=javascript>
varf=0;
vary=0;
vardiv_obj
functionover(obj){
div_obj=obj
_f=0;
y=0;
document.getElementById(obj).innerHTML="";
document.getElementById(obj).style.width="0px";
document.getElementById(obj).style.height="1px";
document.getElementById(obj).style.display="";
timerDIV();
}
functionout(obj){
obj.style.display="none";
}
functionTout(){
document.getElementById(div_obj).style.display="none";
}
functionTover(){
document.getElementById(div_obj).style.display="";
}
functiontimerDIV(){
if(_f>=140){/*宽度*/
objy();
return;
}
else{
_f=_f+10;
document.getElementById(div_obj).style.width=_f+"px";
window.setTimeout(timerDIV,1);
}
}
functionobjy(){
if(y>=150){/*高度*/
varstr="<divstyle=\"width:150px;height:auto;float:left;font-size:12px;margin:6px;line-height:20px\"><ahref=\"http://www.showwho.com\">新闻-1</a><br/><fontstyle=\"color:#7EA9BF;font-size:11px;\">♦</font><ahref=\"http://www.showwho.com\"style=\"font-size:11px;\">新闻-1-1</a><br/><fontstyle=\"color:#7EA9BF;font-size:11px;\">♦</font><ahref=\"http://www.showwho.com\"style=\"font-size:11px\">新闻-1-2</a><br/><fontstyle=\"color:#7EA9BF;font-size:11px;\">♦</font><ahref=\"http://www.showwho.com\"style=\"font-size:11px\">新闻-1-3</a><br/><ahref=\"http://www.showwho.com\">新闻-2</a><br/><ahref=\"http://www.showwho.com\">新闻-3</a><br/><\/div>";
document.getElementById(div_obj).innerHTML=str
return;
}
else{
y+=6;
document.getElementById(div_obj).style.height=y+"px";
window.setTimeout(objy,1);
}
}
</SCRIPT>
<title>JS导航效果</title>
</HEAD>
<BODY>
<DIVclass=Default-top>
<DIVstyle="BORDER:#51789b1pxsolid;width:500px;HEIGHT:23px;margin:20pxauto;position:relative;">
<DIVclass=Defautl-Navigationstyle="WIDTH:60px"><Ahref="#">首页</A></DIV>
<DIVclass=Defautl-Navigationstyle="WIDTH:10px">|</DIV>
<DIVclass=Defautl-Navigationstyle="WIDTH:70px;CURSOR:pointer"><A
onMouseOver="over('two')"onmouseout=out(two)href="#">新闻∇</A>
</DIV>
<DIVclass=Defautl-Navigationstyle="WIDTH:10px">|</DIV>
<DIVclass=Defautl-Navigationstyle="WIDTH:80px"><Ahref="#">
联系我们</A></DIV>
<DIVclass=Defautl-Navigationstyle="WIDTH:10px">|</DIV>
<DIVclass=Defautl-Navigationstyle="WIDTH:50px"><Ahref="#">
其他</A></DIV>
<DIVid=twostyle="overflow:hidden;BORDER:#51789b2pxsolid;DISPLAY:none;FILTER:alpha(Opacity=70);LEFT:300px;FLOAT:left;WIDTH:1px;POSITION:absolute;TOP:14px;left:80px;HEIGHT:1px;BACKGROUND-COLOR:#444;-moz-opacity:0.7"
onmousemove=Tover()onmouseout=Tout()>NoContent
</DIV>
</DIV>
</DIV>
</BODY>
</HTML>

分享到：