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

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

   主要实现的特性如下：

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

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

   HTML标签

<div id="slidingMenuDesc" class="slidingMenuDesc">
<div><span>Description for "About"</span></div>
...
</div>
<ul id="slidingMenu" class="slidingMenu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Get a quote</a></li>
</ul>

复制代码
   以上标签定义了菜单项及其悬浮后的描述内容项目。

   CSS样式.

   重设一些基本样式：

body, ul, li, h1, h2, span{
margin:0;
padding:0;
}
ul{
list-style:none;
}

复制代码
背景色设置：

body{
background:#292929;
}

复制代码
导航菜单样式：

.slidingMenu {
position: absolute;
height:410px;
width: 410px;
top:40px;
overflow:hidden;
right:1px;
font-family: Arial, Helvetica, sans-serif;
}

复制代码
菜单项目需要float到右边：

.slidingMenu li {
display:block;
float:right;
clear:both;
position:relative;
overflow:hidden;
}

复制代码
“mover ”元素定义了鼠标在菜单移动过程中生成的背景元素。我们使用绝对定位。这样看起来更酷！

.slidingMenu li.move {
width: 9px;
height: 68px;
right:0px;
padding-right:10px;
margin-top:2px;
z-index: 8;
position: absolute;
background: #2183c4;
background:
-webkit-gradient(
linear,
left top,
left bottom,
from(#0771b8),
to(#2183c4)
);
background:
-moz-linear-gradient(
top,
#0771b8,
#2183c4
);
-moz-border-radius: 8px 0px 0px 8px;
-webkit-border-top-left-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
-moz-box-shadow:1px 1px 5px #000;
-webkit-box-shadow:1px 1px 5px #000;
box-shadow:1px 1px 5px #000;
}

复制代码
以上代码我们将定义了背景颜色及其边框的阴影。

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

.slidingMenu li a {
font-size:66px;
text-transform:uppercase;
text-decoration: none;
color: #ddd;
outline: none;
text-indent:5px;
z-index: 10;
display: block;
float: right;
height: 66px;
line-height: 66px;
position: relative;
overflow: hidden;
padding-right:10px;
}

复制代码
菜单描述使用了相对的定位容器。我们设置margin-top和导航菜单的顶端数值一样：

/* Descriptions */
.slidingMenuDesc{
margin-top:40px;
position:relative;
}

复制代码
描述内容的span将拥有和导航菜单得悬浮背景色一样的颜色。并且添加圆角效果。

.slidingMenuDesc div{
background: #2183c4;
background:
-webkit-gradient(
linear,
left top,
left bottom,
from(#0771b8),
to(#2183c4)
);
background:
-moz-linear-gradient(
top,
#0771b8,
#2183c4
);
height: 68px;
padding-right:5px;
left:-5px;
width:0px;
margin-top:2px;
overflow:hidden;
position:absolute;
-moz-box-shadow:1px 1px 5px #000;
-webkit-box-shadow:1px 1px 5px #000;
box-shadow:1px 1px 5px #000;
-moz-border-radius: 0px 8px 8px 0px;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}

复制代码
上面元素我们需要设置元素为绝对定位(absolute)，因为我们需要根据菜单项目位置修改top数值。

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

.slidingMenuDesc div span {
font-size:36px;
color: #f0f0f0;
text-indent:5px;
z-index: 10;
display: block;
height: 66px;
line-height: 66px;
position:absolute;
right:10px;
margin-left:5px;
top:-3px;
}

复制代码
Javascript

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

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="cufon-yui.js" type="text/javascript"></script>
<script src="BabelSans_500.font.js" type="text/javascript"></script>
<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以便查看相关介绍。

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

$(function() {
Cufon.replace('a, span').CSS.ready(function() {
var $menu = $("#slidingMenu");
/**
* the first item in the menu,
* which is selected by default
*/
var $selected = $menu.find('li:first');
/**
* this is the absolute element,
* that is going to move across the menu items
* It has the width of the selected item
* and the top is the distance from the item to the top
*/
var $moving = $('<li />',{
className : 'move',
top : $selected[0].offsetTop + 'px',
width : $selected[0].offsetWidth + 'px'
});
/**
* each sliding div (descriptions) will have the same top
* as the corresponding item in the menu
*/
$('#slidingMenuDesc > div').each(function(i){
var $this = $(this);
$this.css('top',$menu.find('li:nth-child('+parseInt(i+2)+')')[0].offsetTop + 'px');
});
/**
* append the absolute div to the menu;
* when we mouse out from the menu
* the absolute div moves to the top (like initially);
* when hovering the items of the menu, we move it to its position
*/
$menu.bind('mouseleave',function(){
moveTo($selected,400);
})
.append($moving)
.find('li')
.not('.move')
.bind('mouseenter',function(){
var $this = $(this);
var offsetLeft = $this.offset().left - 20;
//slide in the description
$('#slidingMenuDesc > div:nth-child('+ parseInt($this.index()) +')').stop(true).animate({'width':offsetLeft+'px'},400, 'easeOutExpo');
//move the absolute div to this item
moveTo($this,400);
})
.bind('mouseleave',function(){
var $this = $(this);
var offsetLeft = $this.offset().left - 20;
//slide out the description
$('#slidingMenuDesc > div:nth-child('+ parseInt($this.index()) +')').stop(true).animate({'width':'0px'},400, 'easeOutExpo');
});;
/**
* moves the absolute div,
* with a certain speed,
* to the position of $elem
*/
function moveTo($elem,speed){
$moving.stop(true).animate({
top : $elem[0].offsetTop + 'px',
width : $elem[0].offsetWidth + 'px'
}, speed, 'easeOutExpo');
}
}) ;
});