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

  • 相关阅读:
    MVC 中创建自己的异常处理
    ajax 跨域解决方法
    值传递,引用传递
    值类型,引用类型 结合 栈,堆的理解
    SQL中 ALL 和 ANY 区别的
    SQL中的逻辑运算符
    使用函数输出两个数的最大值
    九句话,送给正在奋斗的我们,每天读一遍
    C语言函数调用简简介
    优秀项目经理的七个习惯
  • 原文地址:https://www.cnblogs.com/liaohuolin/p/3947768.html
Copyright © 2011-2022 走看看