论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > Javascript教程
Tag:验证,特效,入门,实例,验证,表单,特效,正则表达式,跑马灯,document,函数,代码,getElementByID,菜单,图片,视频教程

编写漂亮苹果风格导航菜单源码

文章类别:Javascript | 发表日期:2010-3-27 13:39:27

21视频教程网3月27日整理

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



直接上代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="zh">
<head>
 <title>YUI仿苹果风格图标滑出导航菜单 - Tutorial - 不名一格</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <meta name="author" content="idd.chiang@gmail.com" />
 <meta name="description" content="Demo for YUI仿苹果导航菜单" />
 <meta name="keywords" content="css,js,YUI,apple-style, apple, apple-like, beautiful, tutorial, menu, navigation, icons" />
 <link rel="stylesheet" type="text/css" href="http://www.microidc.com/demo/style.css">
 <link rel="stylesheet" type="text/css" href="http://www.microidc.com/demo/yui-applestyle-navigation/style.css">
</head>
<body class="yui-skin-sam">
<div id="doc" class="demo">
 <div id="hd">
  <div class="page-title">
   <h1>Apple-Style Slide Out Navigation Menu by YUI</h1>
  </div>
 </div>
 <div id="bd">
  <h2>Tutorial:YUI仿苹果风格图标滑出导航菜单</h2>
  <p>IE7、FF3.5、safari、opera、chrome下测试通过,IE8无环境未测。</p>
  <p><br/></p>
  <!-- {{ Content -->
  <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>
  <!-- }} Content -->
 </div>
 <div id="ft">
  <p>Copyright &#169; 2010 <a href="http://www.microidc.com" title="microidc">不名一格</a></p>
  <p>Please send bug reports to idd.chiang[At]gmail.com</p>
 </div>
 <script type="text/javascript" src="http://cn.yimg.com/i/yui/3.0.0/build/yui/yui-min.js"></script>
        <script type="text/javascript">
   <!--
   YUI({
    //Combo JS
    combine:true,
    base:'http://cn.yimg.com/i/yui/3.0.0/build/',
    root:"i/yui/3.0.0/build/", 
    comboBase:"http://cn.yimg.com/combo?",
    charset:'utf-8',
    loadOptional:true
   }).use('node','anim',function(Y) {
    var _menu = Y.one('#menu'),
     _li = _menu.queryAll('li'),
     _a = _menu.queryAll('li a'),
     _span = _menu.queryAll('li span');
    //初始化
    _menu.setStyle('zIndex','2');
    _a.setStyle('zIndex','1');
    _span.setStyle('zIndex','-1');
    _span.each(function(node){
     var anim = new Y.Anim({
      node:node,
      from:{
       top:'10'
      },
      to:{
       top:'-23'
      },
      easing: Y.Easing.backIn
     });
     anim.run();
    });
    //鼠标移上效果
    /* @Y.delegate 事件委派
     * EventHandle delegate  ( type , fn , el , spec , context , args* )
     * el  <string|node>    委派元素 
     * spec  <string>    匹配目标事件的选择器
     */
    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');
    Y.delegate('mouseout', function(e){
     var _span = this.one('span'),
      _a = this.one('a');
     _a.removeClass('hover');
     _span.setStyle('zIndex','-1');
     var anim = new Y.Anim({
      node:_span,
      to:{
       top:-23
      },
      duration: 0.3,
      easing: Y.Easing.backIn
     });
     anim.run();
    }, '#menu', 'li');
   }); 
   //-->
        </script>
</div>
</body>
</html>

上一篇:编写星级投票效果源码 人气:2462
下一篇:jQuery实现翻书效果源码 人气:9596
视频教程列表
文章教程搜索
 
Javascript推荐教程
Javascript热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058