用户注册



邮箱：

密码：

用户登录


邮箱：

密码：
记住登录一个月忘记密码？

发表随想


还能输入：200字
云代码 - html代码库

jquery 导航栏（动画特效）

2013-01-17 作者： 小蜜锋举报

[html]代码库

<!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=utf-8" />
<title>jquery 导航栏（动画特效）</title>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type=text/javascript>
$(function(){
	$('#niutuku_com li').hover(function(){
		$(this).children('ul').stop(true,true).show('slow');
	},function(){
		$(this).children('ul').stop(true,true).hide('slow');
	});
	
	$('#niutuku_com li').hover(function(){
		$(this).children('div').stop(true,true).show('slow');
	},function(){
		$(this).children('div').stop(true,true).hide('slow');
	});
});
</script>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<ul id="niutuku_com" class="first-menu">
  <li><a href="http://yuncode.net" style="color:#ff0; background:none; border:none;" target="_self">云代码</a></li>
  <li><a href="#" target="_self">网站制作</a>
    <ul style="display: none;" id="subMusic" class="second-menu">
      <li><a href="#" class="niutuku" target="_self">域名空间</a>
        <ul class="third-menu">
          <li><a href="http://yuncode.net/list/html">html代码库</a></li>
          <li><a href="http://yuncode.net/list/java">java代码库</a></li>
          <li><a href="http://yuncode.net/list/jsp">jsp代码库</a></li>
        </ul>
      </li>
      <li><a href="#" class="niutuku" target="_self">CSS 模版</a>
        <ul class="third-menu">
          <li><a href="http://yuncode.net/list/html">html代码库</a></li>
          <li><a href="http://yuncode.net/list/java">java代码库</a></li>
          <li><a href="http://yuncode.net/list/jsp">jsp代码库</a></li>
        </ul>
      </li>
      <li><a href="#" class="niutuku" target="_self">CSS 学习</a>
        <ul class="third-menu">
          <li><a href="http://yuncode.net/list/html">html代码库</a></li>
          <li><a href="http://yuncode.net/list/java">java代码库</a></li>
          <li><a href="http://yuncode.net/list/jsp">jsp代码库</a></li>
        </ul>
      </li>
      <li><a href="#" class="niutuku" target="_self">博客制作</a>
        <ul class="third-menu">
        </ul>
      </li>
      <li><a href="#" class="niutuku" target="_self">素材下载</a>
        <ul class="third-menu">
          <li><a href="http://yuncode.net/list/html">html代码库</a></li>
          <li><a href="http://yuncode.net/list/java">java代码库</a></li>
          <li><a href="http://yuncode.net/list/jsp">jsp代码库</a></li>
        </ul>
      </li>
      <li><a href="#" class="niutuku" target="_self">管理维护</a>
        <ul class="third-menu">
          <li><a href="http://yuncode.net/list/html">html代码库</a></li>
          <li><a href="http://yuncode.net/list/java">java代码库</a></li>
          <li><a href="http://yuncode.net/list/jsp">jsp代码库</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#" target="_self">工作生活</a>
    <ul id="subNews" class="second-menu">
      <li><a href="#" class="niutuku" target="_self">搜索</a>
        <ul class="third-menu">
          <li><a href="http://www.baidu.com/">百度</a></li>
          <li><a href="http://www.google.cn/">Google</a></li>
          <li><a href="http://dir.sogou.com/">搜狐</a></li>
        </ul>
      </li>
      <li><a href="#" class="niutuku" target="_self">新闻</a>
        <ul class="third-menu">
          <li><a href="http://yuncode.net/list/html">html代码库</a></li>
          <li><a href="http://yuncode.net/list/java">java代码库</a></li>
          <li><a href="http://yuncode.net/list/jsp">jsp代码库</a></li>
        </ul>
      </li>
      <li><a href="#" class="niutuku" target="_self">招聘</a>
        <ul class="third-menu">
          <li><a href="http://yuncode.net/list/html">html代码库</a></li>
          <li><a href="http://yuncode.net/list/java">java代码库</a></li>
          <li><a href="http://yuncode.net/list/jsp">jsp代码库</a></li>
        </ul>
      </li>
      <li><a href="#" class="niutuku" target="_self">网赚</a>
        <ul class="third-menu">
          <li><a href="http://www.vikecn.com/">威客中国</a></li>
        </ul>
      </li>
      <li><a href="#" class="niutuku" target="_self">购物</a>
        <ul class="third-menu">
          <li><a href="#" class="niutuku" target="_self">网站</a>
            <ul class="fourth-menu">
              <li><a href="http://yuncode.net/list/html">html代码库</a></li>
              <li><a href="http://yuncode.net/list/java">java代码库</a></li>
              <li><a href="http://yuncode.net/list/jsp">jsp代码库</a></li>
            </ul>
          </li>
          <li><a href="#" class="niutuku" target="_self">快递公司</a>
            <ul class="fourth-menu">
              <li><a href="http://yuncode.net/list/html">html代码库</a></li>
              <li><a href="http://yuncode.net/list/java">java代码库</a></li>
              <li><a href="http://yuncode.net/list/jsp">jsp代码库</a></li>
            </ul>
          </li>
          <li><a href="#" class="niutuku" target="_self">电子支付</a>
            <ul class="fourth-menu">
              <li><a href="http://yuncode.net/list/html">html代码库</a></li>
              <li><a href="http://yuncode.net/list/java">java代码库</a></li>
              <li><a href="http://yuncode.net/list/jsp">jsp代码库</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="#" class="niutuku" target="_self">科技</a>
        <ul class="third-menu">
          <li><a href="http://www.patent-cn.com/">专利之家</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#" class="niutuku" target="_self">休闲娱乐</a>
    <ul style="display: none;" id="subMgm" class="second-menu">
      <li><a href="#" class="niutuku" target="_self">游戏</a>
        <ul class="third-menu">
          <li><a href="#" class="niutuku" target="_self">网络游戏</a>
            <ul class="fourth-menu">
              <li><a href="http://yuncode.net/list/html">html代码库</a></li>
              <li><a href="http://yuncode.net/list/java">java代码库</a></li>
              <li><a href="http://yuncode.net/list/jsp">jsp代码库</a></li>
            </ul>
          </li>
          <li><a href="http://www.17173.com/">17173</a></li>
        </ul>
      </li>
      <li><a href="#" class="niutuku" target="_self">电影</a>
        <ul class="third-menu">
          <li><a href="http://yuncode.net/list/html">html代码库</a></li>
          <li><a href="http://yuncode.net/list/java">java代码库</a></li>
          <li><a href="http://yuncode.net/list/jsp">jsp代码库</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#" class="niutuku" target="_blank">我的网站</a>
    <ul id="subNews" class="second-menu">
      <li><a href="#" class="niutuku" target="_self">xxx</a>
        <ul class="third-menu">
          <li><a href="http://yuncode.net/list/html">html代码库</a></li>
          <li><a href="http://yuncode.net/list/java">java代码库</a></li>
          <li><a href="http://yuncode.net/list/jsp">jsp代码库</a></li>
        </ul>
      </li>
      <li><a href="#" class="niutuku" target="_self">您自定义</a>
        <ul class="third-menu">
          <li><a href="http://yuncode.net/list/html">html代码库</a></li>
          <li><a href="http://yuncode.net/list/java">java代码库</a></li>
          <li><a href="http://yuncode.net/list/jsp">jsp代码库</a></li>
        </ul>
      </li>
      <li><a href="#" class="niutuku" target="_self">您自定义</a>
        <ul class="third-menu">
          <li><a href="http://yuncode.net/list/html">html代码库</a></li>
          <li><a href="http://yuncode.net/list/java">java代码库</a></li>
          <li><a href="http://yuncode.net/list/jsp">jsp代码库</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="http://yuncode.net" class="niutuku" target="_blank">您的网站</a>
    <ul id="subNews" class="second-menu">
      <li><a href="#" class="niutuku" target="_self">您自定义</a>
        <ul class="third-menu">
          <li><a href="http://yuncode.net/list/html">html代码库</a></li>
          <li><a href="http://yuncode.net/list/java">java代码库</a></li>
          <li><a href="http://yuncode.net/list/jsp">jsp代码库</a></li>
        </ul>
      </li>
      <li><a href="#" class="niutuku" target="_self">您自定义</a>
        <ul class="third-menu">
          <li><a href="http://yuncode.net/list/html">html代码库</a></li>
          <li><a href="http://yuncode.net/list/java">java代码库</a></li>
          <li><a href="http://yuncode.net/list/jsp">jsp代码库</a></li>
        </ul>
      </li>
      <li><a href="#" class="niutuku" target="_self">您自定义</a>
        <ul class="third-menu">
          <li><a href="http://yuncode.net/list/html">html代码库</a></li>
          <li><a href="http://yuncode.net/list/java">java代码库</a></li>
          <li><a href="http://yuncode.net/list/jsp">jsp代码库</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>
</body>
</html>

[代码运行效果截图]


jquery 导航栏（动画特效）

[源代码打包下载]




网友评论    (发表评论)


发表评论：

评论须知：

  • 1、评论每次加2分，每天上限为30；
  • 2、请文明用语，共同创建干净的技术交流环境；
  • 3、若被发现提交非法信息，评论将会被删除，并且给予扣分处理，严重者给予封号处理；
  • 4、请勿发布广告信息或其他无关评论，否则将会删除评论并扣分，严重者给予封号处理。


扫码下载

加载中，请稍后...

输入口令后可复制整站源码

加载中，请稍后...