|
[tr][td] 这里教程通过使用cufon类库实现比较酷的的字体，如果你不知道什么是cufon请参考其它文章。Cufon现在的使用可能不如以前了，更好的选择是使用Google font，但是很可惜，中文字体都支持的不太好。
图片：zip.gif  CufonizedFlyOutMenubygbin1.zip主要实现的特性如下： 当鼠标悬浮到菜单后，会实现一个蓝色的背景，然后会滑出一个描述条来解析当前菜单的内容。自左向右接近菜单项。 教程使用jQuery制作动画特效，并且使用CSS3来设计样式。这里没有使用任何图片！ HTML标签 [*] [*] Description for "About" [*] ... [*] [*] [*] [*] [*]Home [*] [*]About [*] [*]Portfolio [*] [*]Work [*] [*]Contact [*] [*]Get a quote [*] 复制代码 以上标签定义了菜单项及其悬浮后的描述内容项目。 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 首先我们需要倒入如下类库： [*] [*] [*] [*] 复制代码 以上类库中， 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 = $(' [*]',{ [*] 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'); [*] } [*] }) ; [*]}); 复制代码 以上代码中我们先是用cufon来生成菜单字体。然后通过jQuery的动画方法生成对应的菜单效果。 全部代码开发完毕，希望大家也喜欢这中类似flash效果的jQuery实现！ 友情提示： IE9不支持Cufon，下面是如何处理 [*] 复制代码 或者 [*] 复制代码 或者下载最新的cufon类库。 查看demo 感谢GBin1翻译整理 [/td][/tr] |
|
