不名一格

YUI3仿苹果风格图标滑出导航菜单

作者：idd.chiang 发布时间：February 8, 2010 分类：Javascript/AS,YUI/Jquery/mootool

IE7、FF3.5、safari、opera、chrome下测试通过，IE8无环境未测。

苹果风格的导航是比较炫酷的，用YUI3模仿这种导航风格。当鼠标移至菜单上，图标上移至顶部，然后滑动至展示区；鼠标移出时，图标移至导航下方，滑动至菜单后隐藏。

Tutorial:示例

» 首先我们来看看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; 
}

阅读剩余部分...