zoukankan      html  css  js  c++  java
  • jquery和css3实现的很酷的菜单导航

    今天为大家带来的是jquery和css3实现的不错的导航菜单。点击列表图表后,内容页面向内移动显示菜单项。当单击关闭菜单按钮时,菜单项隐藏,内容页恢复原位。看下图

    在线预览   源码下载

    我们看下实现代码:

    html代码:

    <div style="position: relative; height: 400px;  825px; margin: auto;">
            <div class="contener">
                <div id="corp_page" style="overflow: scroll">
                    <div style=" 100%">
                        <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                            <tbody>
                                <tr>
                                    <td style="padding: 10px; font-weight: 100; color: #ffffff;" valign="top">
                                        WIFEO/CODE
                                    </td>
                                </tr>
                                <tr>
                                    <td style="padding: 10px;" valign="top">
                                        Post hoc impie perpetratum quod in aliis quoque iam timebatur, tamquam licentia
                                        crudelitati indulta per suspicionum nebulas aestimati quidam noxii damnabantur.
                                        quorum pars necati, alii puniti bonorum multatione actique laribus suis extorres
                                        nullo sibi relicto praeter querelas et lacrimas, stipe conlaticia victitabant, et
                                        civili iustoque imperio ad voluntatem converso cruentam, claudebantur opulentae
                                        domus et clarae.
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="menu">
                Item 2<br />
                <br />
                Item 3<br />
                <br />
                Item 4<br />
                <br />
                <img id="btn_menu_close" src="2.png" style="cursor: pointer;" /></div>
            <div style="top: 0; left: 0; position: absolute; cursor: pointer;">
                <img id="btn_menu" src="1.png" />
            </div>
        </div>
    View Code

    css代码:

          .contener
    {
        -webkit-perspective:600px;
        -moz-perspective:600px;
        -ms-perspective:600px;
        perspective:600px;
        top: 0;
        bottom: 0;
        left: 0;
        right:0;
        position: absolute;
        margin: 50px;
        z-index: 2;
        
    }
    #corp_page
    {
        top: 0;
        bottom: 0;
        left: 0;
        right:0;
        position: absolute;
        background-color:#DC4B39;
        padding: 20px;
        -webkit-transform: rotateY( 0deg );
        -webkit-transition: all .3s;
        -webkit-transform-origin: 100% 100%;
        -webkit-transform-style: preserve-3d;
        -moz-transform: rotateY( 0deg );
        -moz-transition: all .3s;
        -moz-transform-origin: 100% 100%;
        -moz-transform-style: preserve-3d;
        -ms-transform: rotateY( 0deg );
        -ms-transition: all .3s;
        -ms-transform-origin: 100% 100%;
        -ms-transform-style:;
        transform: rotateY( 0deg );
        transition: all .3s;
        transform-origin: 100% 100%;
        transform-style: preserve-3d;
    }
    .menu
    { 
       top:0;
       bottom:0;
       left:90px;
       width: 200px;
       position: absolute;
       margin: 5px;
       display: none;
       margin-top:50px;
      background-color:transparent;
    }
    View Code

    js代码:

      $(document).ready(function () {
                $('#btn_menu').click(function () {
                    $("#corp_page").css({
                        "-webkit-transform": "rotateY(-20deg)",
                        "-webkit-transition": "all .4s linear",
                        "-webkit-transform-origin": "100% 100%",
                        "-webkit-transform-style": "preserve-3d",
                        "-moz-transform": "rotateY(-20deg)",
                        "-moz-transition": "all .4s",
                        "-moz-transform-origin": "100% 100%",
                        "-moz-transform-style": "preserve-3d",
                        "-ms-transform": "rotateY(-20deg)",
                        "-ms-transition": "all .4s",
                        "-ms-transform-origin": "100% 100%",
                        "-ms-transform-style": "preserve-3d",
                        "transform": "rotateY(-20deg)",
                        "transition": "all .4s",
                        "transform-origin": "100% 100%",
                        "transform-style": "preserve-3d"
                    });
                    $(".menu").delay(170).css({
                        "z-index": "5",
                        "-webkit-transition": "all .4s",
                        "-moz-transition": "all .4s",
                        "-ms-transition": "all .4s",
                        "transition": "all .4s"
                    }).fadeIn("fast");
                });
                $('#btn_menu_close,#corp_page').click(function () {
                    $(".menu").fadeOut("fast").css({
                        "z-index": "1",
                        "-webkit-transition": "all .4s",
                        "-moz-transition": "all .4s",
                        "-ms-transition": "all .4s",
                        "transition": "all .4s"
                    });
                    $("#corp_page").css({
                        "-webkit-transform": "rotateY(0deg)",
                        "-webkit-transition": "all .7s linear",
                        "-webkit-transform-origin": "100% 100%",
                        "-webkit-transform-style": "preserve-3d",
                        "-moz-transform": "rotateY(0deg)",
                        "-moz-transition": "all .7s",
                        "-moz-transform-origin": "100% 100%",
                        "-moz-transform-style": "preserve-3d",
                        "-ms-transform": "rotateY(0deg)",
                        "-ms-transition": "all .7s",
                        "-ms-transform-origin": "100% 100%",
                        "-ms-transform-style": "preserve-3d",
                        "transform": "rotateY(0deg)",
                        "transition": "all .7s",
                        "transform-origin": "100% 100%",
                        "transform-style": "preserve-3d"
                    });
    
                });
            })
    View Code

    注:本文爱编程原创文章,转载请注明原文地址:http://www.w2bc.com/Article/5661

  • 相关阅读:
    WCF 第三章 信道
    WCF 第三章 信道形状
    对单表数据生成insert语句
    WCF 第二章 契约 定义类的层次结构
    WCF 第三章 信道 总结
    Win32类型和.net类型的对应表
    用一条SQL语句实现斐波那契数列
    WCF 第一章 基础 为一个ASMX服务实现一个WCF客户端
    WCF 第二章 契约 数据契约版本
    WCF 第二章 契约 异步访问服务操作
  • 原文地址:https://www.cnblogs.com/liaohuolin/p/3947768.html
Copyright © 2011-2022 走看看