来过TYStudio的朋友，一定都看到过以前版本顶部渐变发光效果的导航菜单吧，这是一个简单的通过jQuery控制opacity实现的导航菜单。

在线演示 源码下载

下面和大家分享一下具体的实现过程。

HTML标签结构：

查看代码

1. <ul class="animation_menu">
2.     <li>
3.         <a href="#">菜单一<span>菜单一</span></a>
4.     </li>
5.     <li>
6.         <a href="#">菜单二<span>菜单二</span></a>
7.     </li>
8.     <li>
9.         <a href="#">菜单三<span>菜单三</span></a>
10.     </li>
11.     <li>
12.         <a href="#">菜单四<span>菜单四</span></a>
13.     </li>
14. </ul>

CSS样式：

li的样式：

查看代码

1. .animation_menu li {
2.     /*块状模式显示，并使其水平平铺显示*/
3.     display: block;
4.     float: left;
5.     /*宽高是背景图片的*/
6.     width: 111px;
7.     height: 50px;
8.     /*设置文字垂直水平居中*/
9.     line-height: 50px;
10.     text-align: center;
11.     font-weight: bold;
12.     font-size: 18px;
13.     list-style-type: none;
14. }

初始看到的a的样式：

查看代码

1. .animation_menu li a {
2.         /*这里是我们背景图片*/
3.         background-image: url("images/bg-sprite-topmenu.png");
4.         background-repeat: no-repeat;
5.         /*设置position属性是为了里面的span能够以a为基准进行定位*/
6.         position: relative;
7.         display: block;
8.         /*我们不使用纯黑色*/
9.         color: #292724;
10.         text-decoration: none;
11.     }

hover后看到的span的样式：

查看代码

1. .animation_menu li a span {
2.     /*这里是我们背景图片*/
3.     background-image: url("images/bg-sprite-topmenu.png");
4.     background-repeat: no-repeat;
5.     /*设置块模式显示，并制定宽高和a的宽高一样，和绝对位置，这是为了使其和a里面的文字重合显示*/
6.     display: block;
7.     height: 50px;
8.     width: 111px;
9.     text-align: center;
10.     position: absolute;
11.     top: 0;
12.     left: 0;
13.     color: #FFE2BB;
14. }

用sprite技术定位，a和span各种状态的样式：

查看代码

1. /*正常状态下的样式*/
2. .animation_menu li a {
3. /*一般灰色背景*/
4. background-position: 0 -153px;
5. }
6. /*hover蓝色高亮背景*/
7. .animation_menu li a span {
8.     background-position: 0 -102px;
9. }
10.  
11. /*链接激活状态下的样式*/
12. .animation_menu li.current a {
13. /*一般灰色高亮背景*/
14. background-position: 0 0;
15. }
16. /*hover黄色高亮背景*/
17. .animation_menu li.current a span {
18.     background-position: 0 -51px;
19. }

最后是JavaScript

菜单的渐变效果主要是通过控制opacity实现的，请看下面代码。

查看代码

1. // 通过将opacity设置为0，将span的样式和文字隐藏起来
2. $(".animation_menu li a span").css("opacity", "0");
3.  
4. // 绑定hover事件
5. $(".animation_menu li a span").hover(
6.     //mouse on事件
7.     function () {
8.         // 通过动态的改变opacity从0到1，这样span的样式和文字就会慢慢的显示出来，覆盖a的样式
9.         $(this).stop().animate({
10.             opacity: 1
11.         }, "slow");
12.     },
13.     //mouse out事件
14.     function () {
15.         // 当鼠标移走的时候，动态改变为0，这样span又看不见了，看到原来的a的样式了。
16.         $(this).stop().animate({
17.             opacity: 0
18.         }, "slow");
19.     }
20. );
21.  
22. $(".animation_menu li a").click(function () {
23.     $(".animation_menu li a").each(function (index, item) {
24.         $(item).parent().removeClass("current");
25.     });
26.     $(this).parent().addClass("current");
27. });

到此全部结束，希望这个jQuery导航菜单教程能够给你一些灵感。