加载中…
个人资料
糖炒栗子
糖炒栗子
  • 博客等级:
  • 博客积分:0
  • 博客访问:32,496
  • 关注人气:13
  • 获赠金笔:0支
  • 赠出金笔:0支
  • 荣誉徽章:
相关博文
推荐博文
谁看过这篇博文
加载中…
正文 字体大小:

漂亮苹果风格导航菜单(主流浏览器兼容)

(2010-04-07 11:30:38)
标签:

杂谈

分类: JS学习班
苹果风格的导航是比较炫酷的,用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('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>






0

阅读 评论 收藏 转载 喜欢 打印举报/Report
  • 评论加载中,请稍候...
发评论

    发评论

    以上网友发言只代表其个人观点,不代表新浪网的观点或立场。

      

    新浪BLOG意见反馈留言板 电话:4000520066 提示音后按1键(按当地市话标准计费) 欢迎批评指正

    新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 会员注册 | 产品答疑

    新浪公司 版权所有