The cool menu navigation that jquery and CSS3 implement

Today brings you a nice navigation menu for jquery and CSS3. After clicking on the list chart, the content page moves inward to display the menu item. When you click the Close menu button, the item is hidden and the content page reverts to its original position. See

Online preview Source Download

Let's look at the implementation code:

HTML code:

<Divstyle= "position:relative; height:400px; width:825px; margin:auto;">        <Divclass= "Contener">            <DivID= "Corp_page"style= "Overflow:scroll">                <Divstyle= "width:100%">                    <TableAlign= "Center"Border= "0"cellpadding= "0"cellspacing= "0"width= "100%">                        <tbody>                            <TR>                                <TDstyle= "padding:10px; font-weight:100; color: #ffffff;"valign= "Top">Wifeo/code</TD>                            </TR>                            <TR>                                <TDstyle= "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>        <Divclass= "Menu">Item 2<BR/>            <BR/>Item 3<BR/>            <BR/>Item 4<BR/>            <BR/>            <imgID= "Btn_menu_close"src= "2.png"style= "Cursor:pointer;" /></Div>        <Divstyle= "top:0; left:0; position:absolute; cursor:pointer;">            <imgID= "Btn_menu"src= "1.png" />        </Div>    </Div>

View Code

CSS code:

. 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 Code:

$ (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

Note: This article Love programming original article, reproduced please specify the original address: http://www.w2bc.com/Article/5661

The cool menu navigation that jquery and CSS3 implement