jquery和css3实现的很酷的菜单导航

浏览数：48 / 时间：2015年06月09日

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

我们看下实现代码：

html代码：

<div style="position: relative; height: 400px; width: 825px; margin: auto;">
        <div class="contener">
            <div id="corp_page" style="overflow: scroll">
                <div style="width: 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"
                });

            });
        })