半透明蓝色调水平下拉导航条，很漂亮

2024-09-05 12:19:29

字体：大中小

来源：转载

供稿：网友

一个半透明的水平排行的导航菜单，支持二级下拉，蓝色风格，鼠标放上带有动画展开的效果，很不错，很漂亮。不过有点不爽的地方就是代码比较乱，而且用了JS去输出菜单，这样修改起来比较不方便，有时间的可以好好优化一下。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-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><SCRIPT language=javascript>var f=0;var y=0;var div_objfunction over(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();}function out(obj){ obj.style.display="none";}function Tout(){document.getElementById(div_obj).style.display="none";}function Tover(){ document.getElementById(div_obj).style.display="";}function timerDIV(){ if( _f >= 140){  objy();  return ; } else{  _f=_f+10;  document.getElementById(div_obj).style.width=_f+"px";  window.setTimeout(timerDIV,1); }}function objy(){ if(y >= 150){/*高度*/  var str="<div style=/"width:150px;height:auto;float:left;font-size:12px;margin:6px;line-height:20px/">♦ASP<br/>  <font style=/"color:#7EA9BF;font-size:11px;/">♦</font> PHP<br/>  <font style=/"color:#7EA9BF;font-size:11px;/">♦</font> AJAX<br/>  <font style=/"color:#7EA9BF;font-size:11px;/">♦</font> ♦JAVA<br/>♦EXTJS<br />♦JQUERY<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><DIV class=Default-top> <DIV style="BORDER: #51789b 1px solid; width:500px;HEIGHT:23px; margin:20px auto; position:relative;">  <DIV class=Defautl-Navigation style="WIDTH: 60px">源码首页∇</DIV>  <DIV class=Defautl-Navigation style="WIDTH: 10px">|</DIV>  <DIV class=Defautl-Navigation style="WIDTH: 70px; CURSOR: pointer">精品源码∇  </DIV>  <DIV class=Defautl-Navigation style="WIDTH: 10px">|</DIV>  <DIV class=Defautl-Navigation style="WIDTH: 80px">   最新更新</DIV>  <DIV class=Defautl-Navigation style="WIDTH: 10px">|</DIV>  <DIV class=Defautl-Navigation style="WIDTH: 50px">   下载排行</DIV>  <DIV id=two style="overflow:hidden;BORDER: #51789b 2px solid;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()>No Content  </DIV> </DIV></DIV></BODY></HTML>

上一篇：来自GG网站的超酷JS导航代码

下一篇：QQ菜单可折叠，JS+CSS很漂亮