漂亮JS导航菜单

稿源：互联网 2022-07-03 11:43:53 点击： 8780 撤稿纠错

很漂亮的js导航菜单，配合背景颜色效果更佳。

以下讨论的是和相关的漂亮JS导航菜单教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!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">
<meta name="keywords" content="站长,网页特效,js特效,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。大量高质量js特效，提供高质量广告代码下载,尽在站长特效网" />
<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="http://www.zzjs.net">网站首页</a>
  <font style="color:#7EA9BF;font-size:11px;"></font> <a href="http://zzjs.net/?cat=1" style="font-size:11px;">站长特效</a>
  <font style="color:#7EA9BF;font-size:11px;"></font> <a href="http://zzjs.net/?cat=2" style="font-size:11px">网页特效</a>
  <font style="color:#7EA9BF;font-size:11px;"></font> <a href="http://zzjs.net/?cat=3" style="font-size:11px">广告代码</a>
<a href="http://zzjs.net/">rss订阅</a>
<a href="http://zzjs.net/">留言本</a>
</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导航，sky整理收集。</title>
</HEAD>
<BODY>
<a href="<#ZC_BLOG_HOST#>">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net，站长js特效。<hr>

<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="#">首页</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="#">网站首页</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="#">
   其他</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>

关于漂亮JS导航菜单的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2016345062822.shtml方便下次再访问哦。

·上一篇： 纯css制作的三级导航菜单
·下一篇： 纯css制作浅绿风格导航菜单

漂亮JS导航菜单

文章分类LIST >>返回首页

最新游戏

最新新闻