实用资源用jQuery简单实现仿Flash效果动态导航条

用jQuery简单实现仿Flash效果动态导航条

以前有很多企业网站喜欢用Flash来制作导航条,这样访客在导航菜单上会有动画交互效果,但是Flash渐渐被淘汰,而且对搜索引擎也不友好,所以使用JS来实现这种交互效果会更好,本文带来的效果如下图:

nav.gif

这里相当于通过JS给导航链接增加一个class,下面是简单的CSS样式:

a {text-decoration:none;}
.menu {height:40px;display:block;padding:0px;width:800px;margin:20px auto;}
.menu ul {list-style:none;padding:0;margin:0;}
.menu ul li {float:left;overflow:hidden;position:relative;line-height:40px;text-align:center;}
.menu ul li a {position:relative;display:block;width:90px;height:40px;font-size:14px;}
.menu ul li a span {position:absolute;left:0;width:90px;}
.menu ul li a span.out {top:0px;}
.menu ul li a span.over,.menu ul li a span.bg {top:-40px;}
#menu2 {background:#000;}
#menu2 ul li a {color:#fff;}
#menu2 ul li a span.over {color:#000;background-color:#f0f0f0;}

引入jQuery和动画控制脚本:

<script src="https://cdn.bootcss.com/jquery/1.4.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $("#menu2 li a").wrapInner('<span class="out"></span>');
    $("#menu2 li a").each(function() {
  $('<span class="over">' + $(this).text() + '</span>').appendTo(this);
    });
    $("#menu2 li a").hover(function() {
  $(".out", this).stop().animate({
      'top': '40px'
  },
  300); // move down - hide
  $(".over", this).stop().animate({
      'top': '0px'
  },
  300); // move down - show
    },
    function() {
  $(".out", this).stop().animate({
      'top': '0px'
  },
  300); // move up - show
  $(".over", this).stop().animate({
      'top': '-40px'
  },
  300); // move up - hide
    });
});
</script>

导航HTML部分代码:

<div id="menu2" class="menu">
<ul>
<li><a href="#">公司首页</a></li>
<li><a href="#">企业文化</a></li>
<li><a href="#">产品展示</a></li>
<li><a href="#">新闻中心</a></li>
<li><a href="#">服务项目</a></li>
<li><a href="#">加盟代理</a></li>
<li><a href="#">在线咨询</a></li>
</ul>
</div>

预览效果 下载地址

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.cssaaa.com/down/143.html