YUI3仿苹果风格图标滑出导航菜单
作者：idd.chiang 发布时间：February 8, 2010 分类：Javascript/AS,YUI/Jquery/mootool
IE7、FF3.5、safari、opera、chrome下测试通过，IE8无环境未测。
苹果风格的导航是比较炫酷的，用YUI3模仿这种导航风格。当鼠标移至菜单上，图标上移至顶部，然后滑动至展示区；鼠标移出时，图标移至导航下方，滑动至菜单后隐藏。
» 首先我们来看看HTML：
<div class="navigation">
<ul class="menu fl" id="menu">
<li><span class="game"><br/></span><a href="#" class="first">Game</a></li>
<li><span class="water"><br/></span><a href="#">Water</a></li>
<li><span class="code"><br/></span><a href="#">Coding</a></li>
<li><span class="tools"><br/></span><a href="#">ToolsBox</a></li>
<li><span class="curve"><br/></span><a href="#">Curve</a></li>
<li><span class="options"><br/></span><a href="#" class="last">Options</a></li>
</ul>
</div>
span是icon图标，用作动画使用。当鼠标移上A标签时，触发动画。这里不能用Event.addListener 和 Event.on方式去侦听事件，因为icon动画时会移至A标签上层，导致监听对象发生变化，用relatedTarget判断span标签也会触发多次mouseover和mouseout。
所以，将鼠标事件的触发给LI是最好的办法，li内的元素仅用作动画展示，不绑定如何事件。这里用到delegate，将事件指派给#menu下的li
» 导航的CSS
.navigation{
position:relative; /*IE hidden need*/
overflow:hidden;/*Hiding*/
padding-bottom:100px;/*Icon Showcase*/
_zoom:1; /*For Ie6 hack*/
}
ul.menu{
border:1px solid #b0b0b0;
border-width:0 1px 0;
position:relative; /*zIndex need*/
-moz-border-radius:4px;
-webkit-border-radius:4px;
}
ul.menu li{
float:left;
position:relative;
}
» 导航链接的CSS
ul.menu li a{
background:#fff url(bgMenu.png) repeat-x left 1px;
font:normal 700 14px/1.4em 'tahoma','simsun' ;
padding:11px 0px;
width:128px;
color:#333333;
float:left;
text-decoration:none;
text-shadow: 0 1px 1px #fff;
text-align:center;
border:1px solid #b0b0b0;
border-right:1px solid #a1a1a1;
border-left:1px solid #e8e8e8;
-moz-box-shadow:0 2px 3px #000;
-webkit-box-shadow:0 2px 3px #000;
*border-bottom:2px solid #7b7b7b; /*For IE Looklike 3D Navbar*/
}
ul.menu li a.hover{
background-position:0 -48px;
color:#fff;
text-shadow: 0 -1px 1px #000;
}
ul.menu li a.first{
-moz-border-radius:4px 0px 0px 4px;
-webkit-border-radius:4px 0px 0px 4px;
border-left:0 none;
}
ul.menu li a.last{
-moz-border-radius:0px 4px 4px 0px;
-webkit-border-radius:0px 4px 4px 0px;
border-right:0 none;
}
» SPAN图标设置CSS
ul.menu li span{
width:64px;
height:64px;
background-repeat:no-repeat;
background-color:transparent;
position:absolute;
z-index:-1;
top:-17px;
left:33px;
}
ul.menu li span.game{background-image:url(icons/game.png);}
ul.menu li span.water{background-image:url(icons/water.png);}
ul.menu li span.code{background-image:url(icons/code.png);}
ul.menu li span.tools{background-image:url(icons/tools.png);}
ul.menu li span.curve{background-image:url(icons/curve.png);}
ul.menu li span.appstore{background-image:url(icons/appstore.png);}
ul.menu li span.options{background-image:url(icons/options.png);}
» SPAN图标设置CSS
鼠标mouseover到LI时，设置图标出现动画。
Y.delegate('mouseover', function(e){
var _span = this.one('span'),
_a = this.one('a');
_a.addClass('hover');
_span.setStyle('zIndex','1');
var anim = new Y.Anim({
node:_span,
to:{
top:45
},
duration: 0.3
});
anim.run();
}, '#menu', 'li');