Cufon, jQuery和CSS3实现的超强飞出菜单

这里教程通过使用cufon类库实现比较酷的的字体,如果你不知道什么是cufon请参考其它文章。Cufon现在的使用可能不如以前...
       这里教程通过使用cufon类库实现比较酷的的字体,如果你不知道什么是cufon请参考其它文章。Cufon现在的使用可能不如以前了,更好的选择是使用Google font,但是很可惜,中文字体都支持的不太好。



       主要实现的特性如下:

       当鼠标悬浮到菜单后,会实现一个蓝色的背景,然后会滑出一个描述条来解析当前菜单的内容。自左向右接近菜单项。

       教程使用jQuery制作动画特效,并且使用CSS3来设计样式。这里没有使用任何图片!

       HTML标签

  1. <div id="slidingMenuDesc" class="slidingMenuDesc">
  2.         <div><span>Description for "About"</span></div>
  3.         ...
  4. </div>

  5. <ul id="slidingMenu" class="slidingMenu">
  6.         <li><a href="#">Home</a></li>
  7.         <li><a href="#">About</a></li>
  8.         <li><a href="#">Portfolio</a></li>
  9.         <li><a href="#">Work</a></li>
  10.         <li><a href="#">Contact</a></li>
  11.         <li><a href="#">Get a quote</a></li>
  12. </ul>
复制代码
      以上标签定义了菜单项及其悬浮后的描述内容项目。

       CSS样式.

       重设一些基本样式:

  1. body, ul, li, h1, h2, span{
  2.         margin:0;
  3.         padding:0;
  4. }
  5. ul{
  6.         list-style:none;
  7. }
复制代码
       背景色设置:

  1. body{
  2.         background:#292929;
  3. }
复制代码
       导航菜单样式:

  1. .slidingMenu {
  2.         position: absolute;
  3.         height:410px;
  4.         width: 410px;
  5.         top:40px;
  6.         overflow:hidden;
  7.         right:1px;
  8.         font-family: Arial, Helvetica, sans-serif;
  9. }
复制代码
       菜单项目需要float到右边:

  1. .slidingMenu li {
  2.         display:block;
  3.         float:right;
  4.         clear:both;
  5.         position:relative;
  6.         overflow:hidden;
  7. }
复制代码
       “mover ”元素定义了鼠标在菜单移动过程中生成的背景元素。我们使用绝对定位。这样看起来更酷!

  1. .slidingMenu li.move {
  2.         width: 9px;
  3.         height: 68px;
  4.         right:0px;
  5.         padding-right:10px;
  6.         margin-top:2px;
  7.         z-index: 8;
  8.         position: absolute;
  9.         background: #2183c4;
  10.         background:
  11.                 -webkit-gradient(
  12.                         linear,
  13.                         left top,
  14.                         left bottom,
  15.                         from(#0771b8),
  16.                         to(#2183c4)
  17.                 );
  18.         background:
  19.                 -moz-linear-gradient(
  20.                         top,
  21.                         #0771b8,
  22.                         #2183c4
  23.                 );
  24.         -moz-border-radius: 8px 0px 0px 8px;
  25.         -webkit-border-top-left-radius: 8px;
  26.         -webkit-border-bottom-left-radius: 8px;
  27.         border-top-left-radius: 8px;
  28.         border-bottom-left-radius: 8px;
  29.         -moz-box-shadow:1px 1px 5px #000;
  30.         -webkit-box-shadow:1px 1px 5px #000;
  31.         box-shadow:1px 1px 5px #000;
  32. }
复制代码
       以上代码我们将定义了背景颜色及其边框的阴影。

       下面定义了导航link的样式:

  1. .slidingMenu li a {
  2.         font-size:66px;
  3.         text-transform:uppercase;
  4.         text-decoration: none;
  5.         color: #ddd;
  6.         outline: none;
  7.         text-indent:5px;
  8.         z-index: 10;
  9.         display: block;
  10.         float: right;
  11.         height: 66px;
  12.         line-height: 66px;
  13.         position: relative;
  14.         overflow: hidden;
  15.         padding-right:10px;
  16. }
复制代码
       菜单描述使用了相对的定位容器。我们设置margin-top和导航菜单的顶端数值一样:

  1. /* Descriptions */
  2. .slidingMenuDesc{
  3.         margin-top:40px;
  4.         position:relative;
  5. }
复制代码
       描述内容的span将拥有和导航菜单得悬浮背景色一样的颜色。并且添加圆角效果。

  1. .slidingMenuDesc div{
  2.         background: #2183c4;
  3.         background:
  4.                 -webkit-gradient(
  5.                         linear,
  6.                         left top,
  7.                         left bottom,
  8.                         from(#0771b8),
  9.                         to(#2183c4)
  10.                 );
  11.         background:
  12.                 -moz-linear-gradient(
  13.                         top,
  14.                         #0771b8,
  15.                         #2183c4
  16.                 );
  17.         height: 68px;
  18.         padding-right:5px;
  19.         left:-5px;
  20.         width:0px;
  21.         margin-top:2px;
  22.         overflow:hidden;
  23.         position:absolute;
  24.         -moz-box-shadow:1px 1px 5px #000;
  25.         -webkit-box-shadow:1px 1px 5px #000;
  26.         box-shadow:1px 1px 5px #000;
  27.         -moz-border-radius: 0px 8px 8px 0px;
  28.         -webkit-border-top-right-radius: 8px;
  29.         -webkit-border-bottom-right-radius: 8px;
  30.         border-top-right-radius: 8px;
  31.         border-bottom-right-radius: 8px;
  32. }
复制代码
       上面元素我们需要设置元素为绝对定位(absolute),因为我们需要根据菜单项目位置修改top数值。

       描述内容span将也设置为绝对定位。这个不是强制的,但是给你更多的机会,如果你需要执行其它的动画效果。

  1. .slidingMenuDesc div span {
  2.         font-size:36px;
  3.         color: #f0f0f0;
  4.         text-indent:5px;
  5.         z-index: 10;
  6.         display: block;
  7.         height: 66px;
  8.         line-height: 66px;
  9.         position:absolute;
  10.         right:10px;
  11.         margin-left:5px;
  12.         top:-3px;
  13. }
复制代码
       Javascript

       首先我们需要倒入如下类库:

  1. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  2. <script src="cufon-yui.js" type="text/javascript"></script>
  3. <script src="BabelSans_500.font.js" type="text/javascript"></script>
  4. <script src="jquery.easing.1.3.js" type="text/javascript"></script>
复制代码
       以上类库中, BabelSans_500.font.js是你通过cufon工具生成的字体JS,你可以提供自己的字体生成对应得JS,GBin1提供的演示中,我们就是用自定义的字体生成的js。

       jquery.easing.1.3.js是扩展的删除效果类库,你可以Google以便查看相关介绍。

       接下来添加相关的脚本如下:

  1. $(function() {
  2.     Cufon.replace('a, span').CSS.ready(function() {
  3.         var $menu         = $("#slidingMenu");

  4.         /**
  5.         * the first item in the menu,
  6.         * which is selected by default
  7.         */
  8.         var $selected    = $menu.find('li:first');

  9.         /**
  10.         * this is the absolute element,
  11.         * that is going to move across the menu items
  12.         * It has the width of the selected item
  13.         * and the top is the distance from the item to the top
  14.         */
  15.         var $moving        = $('<li />',{
  16.             className    : 'move',
  17.             top            : $selected[0].offsetTop + 'px',
  18.             width        : $selected[0].offsetWidth + 'px'
  19.         });

  20.         /**
  21.         * each sliding div (descriptions) will have the same top
  22.         * as the corresponding item in the menu
  23.         */
  24.         $('#slidingMenuDesc > div').each(function(i){
  25.             var $this = $(this);
  26.             $this.css('top',$menu.find('li:nth-child('+parseInt(i+2)+')')[0].offsetTop + 'px');
  27.         });

  28.         /**
  29.         * append the absolute div to the menu;
  30.         * when we mouse out from the menu
  31.         * the absolute div moves to the top (like initially);
  32.         * when hovering the items of the menu, we move it to its position
  33.         */
  34.         $menu.bind('mouseleave',function(){
  35.                 moveTo($selected,400);
  36.               })
  37.              .append($moving)
  38.              .find('li')
  39.              .not('.move')
  40.              .bind('mouseenter',function(){
  41.                 var $this = $(this);
  42.                 var offsetLeft = $this.offset().left - 20;
  43.                 //slide in the description
  44.                 $('#slidingMenuDesc > div:nth-child('+ parseInt($this.index()) +')').stop(true).animate({'width':offsetLeft+'px'},400, 'easeOutExpo');
  45.                 //move the absolute div to this item
  46.                 moveTo($this,400);
  47.               })
  48.               .bind('mouseleave',function(){
  49.                 var $this = $(this);
  50.                 var offsetLeft = $this.offset().left - 20;
  51.                 //slide out the description
  52.                 $('#slidingMenuDesc > div:nth-child('+ parseInt($this.index()) +')').stop(true).animate({'width':'0px'},400, 'easeOutExpo');
  53.               });;

  54.         /**
  55.         * moves the absolute div,
  56.         * with a certain speed,
  57.         * to the position of $elem
  58.         */
  59.         function moveTo($elem,speed){
  60.             $moving.stop(true).animate({
  61.                 top        : $elem[0].offsetTop + 'px',
  62.                 width    : $elem[0].offsetWidth + 'px'
  63.             }, speed, 'easeOutExpo');
  64.         }
  65.     }) ;
  66. });
复制代码
       以上代码中我们先是用cufon来生成菜单字体。然后通过jQuery的动画方法生成对应的菜单效果。

       全部代码开发完毕,希望大家也喜欢这中类似flash效果的jQuery实现!

       友情提示:

       IE9不支持Cufon,下面是如何处理

  1. <!--[if gte IE 9]> <script type="text/javascript"> Cufon.set('engine', 'canvas'); </script> <![endif]-->
复制代码
       或者

  1. <meta content="IE=8" http-equiv="X-UA-Compatible" />
复制代码
       或者下载最新的cufon类库。
查看demo
感谢GBin1翻译整理