半透明藍(lán)色調(diào)水平下拉導(dǎo)航條，很漂亮_菜單導(dǎo)航特效

一個(gè)半透明的水平排行的導(dǎo)航菜單，支持二級下拉，藍(lán)色風(fēng)格，鼠標(biāo)放上帶有動(dòng)畫展開的效果，很不錯(cuò)，很漂亮。不過有點(diǎn)不爽的地方就是代碼比較亂，而且用了JS往輸出菜單，這樣修改起來比較不方便，有時(shí)間的可以好好優(yōu)化一下。

<!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" mrc="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_obj
function 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\"><a href=\"/\">ASP</a><br/>  <font style=\"color:#7EA9BF;font-size:11px;\">&#9830;</font> <a href=\"/\" style=\"font-size:11px;\">PHP</a><br/>  <font style=\"color:#7EA9BF;font-size:11px;\">&#9830;</font> <a href=\"/\" style=\"font-size:11px\">AJAX</a><br/>  <font style=\"color:#7EA9BF;font-size:11px;\">&#9830;</font> <a href=\"/\" style=\"font-size:11px\">JAVA</a><br/><a href=\"/\">EXTJS</a><br /><a href=\"/\">JQUERY</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導(dǎo)航效果</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"><A href="#">源碼首頁&#8711;</A></DIV>
  <DIV class=Defautl-Navigation style="WIDTH: 10px">|</DIV>
  <DIV class=Defautl-Navigation style="WIDTH: 70px; CURSOR: pointer"><A 
   onMouseOver="over('two')" onmouseout=out(two) href="#">精品源碼&#8711;</A>
  </DIV>
  <DIV class=Defautl-Navigation style="WIDTH: 10px">|</DIV>
  <DIV class=Defautl-Navigation style="WIDTH: 80px"><A href="/">
   最新更新</A></DIV>
  <DIV class=Defautl-Navigation style="WIDTH: 10px">|</DIV>
  <DIV class=Defautl-Navigation style="WIDTH: 50px"><A href="/other/top100.shtml">
   下載排行</A></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>

所屬頻道：菜單導(dǎo)航特效/更新時(shí)間：2010-05-22

[收藏][報(bào)錯(cuò)][返回列表]

相關(guān)菜單導(dǎo)航特效：

菜單導(dǎo)航特效Rss訂閱特效代碼搜索

菜單導(dǎo)航特效推薦

猜你也喜歡看這些

相關(guān)鏈接：
復(fù)制本頁鏈接| 搜索半透明藍(lán)色調(diào)水平下拉導(dǎo)航條，很漂亮
特效說明：
菜單導(dǎo)航模板-半透明藍(lán)色調(diào)水平下拉導(dǎo)航條，很漂亮。

日韩天天综合网_野战两个奶头被亲到高潮_亚洲日韩欧美精品综合_av女人天堂污污污_视频一区**字幕无弹窗_国产亚洲欧美小视频_国内性爱精品在线免费视频_国产一级电影在线播放_日韩欧美内地福利_亚洲一二三不卡片区

半透明藍(lán)色調(diào)水平下拉導(dǎo)航條，很漂亮_菜單導(dǎo)航特效

菜單導(dǎo)航特效Rss訂閱特效代碼搜索

菜單導(dǎo)航特效推薦

猜你也喜歡看這些

半透明藍(lán)色調(diào)水平下拉導(dǎo)航條，很漂亮_菜單導(dǎo)航特效