jQuery渐变发光导航菜单的实现

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

2100png-2

在线演示 源码下载

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

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. }

css的工作到此就结束了,下面我们来看看javascript。

最后是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导航菜单教程能够给你一些灵感。



发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>