• <em id="w2sng"><object id="w2sng"><u id="w2sng"></u></object></em>

  • <rp id="w2sng"></rp>
  • 徐州酷優網絡 開啟企業建站營銷新時代  站長學院 Loading
    熱線:0516-83703228
    您現在的位置:首頁 > 站長學院 > 建站資訊 > 建站、設計教程 > 導航

    jquery+css3實現炫酷菜單導航實例

    作者:eycms 日期:2016/2/16 15:24:16 人氣:66

      

    <p>點擊列表圖表后,內容頁面向內移動顯示菜單項。當單擊關閉菜單按鈕時,菜單項隱藏,內容頁恢復原位??聪聢D</p>

    <p><img  width="700" height="333" src="http://www.xxx.cn/2014/11/14/20141114003449257.gif" alt='jquery+css3實現炫酷菜單導航實例'  /></p>

    <p>jquery和css3實現炫酷菜單導航</p>

    <p> 代碼部分</p>

    <p> </p>

    <p> </p>

    <table width="620" align="center" border="0" cellpadding="1" cellspacing="1"  style="background:#FB7">

     <tr>

    <td width="464" height="27" bgcolor="#FFE7CE"> 代碼如下</td>

    <td width="109" align="center" bgcolor="#FFE7CE" style="cursor:pointer;" onClick="doCopy('copy4677')">復制代碼</td>

     </tr>

     <tr>

    <td height="auto" colspan="2" valign="top" bgcolor="#FFFFFF" style="padding:10px;" class="copyclass" id=copy4677><html><br />

    <head><br />

    <title>jquery和css3實現炫酷菜單導航</title><br />

    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script><br />

    <style><br />

    .contener<br />

    {<br />

    -webkit-perspective:600px;<br />

    -moz-perspective:600px;<br />

    -ms-perspective:600px;<br />

    perspective:600px;<br />

    top: 0;<br />

    bottom: 0;<br />

    left: 0;<br />

    right:0;<br />

    position: absolute;<br />

    margin: 50px;<br />

    z-index: 2;<br />

    }<br />

    #corp_page<br />

    {<br />

    top: 0;<br />

    bottom: 0;<br />

    left: 0;<br />

    right:0;<br />

    position: absolute;<br />

    background-color:#DC4B39;<br />

    padding: 20px;<br />

    -webkit-transform: rotateY( 0deg );<br />

    -webkit-transition: all .3s;<br />

    -webkit-transform-origin: 100% 100%;<br />

    -webkit-transform-style: preserve-3d;<br />

    -moz-transform: rotateY( 0deg );<br />

    -moz-transition: all .3s;<br />

    -moz-transform-origin: 100% 100%;<br />

    -moz-transform-style: preserve-3d;<br />

    -ms-transform: rotateY( 0deg );<br />

    -ms-transition: all .3s;<br />

    -ms-transform-origin: 100% 100%;<br />

    -ms-transform-style:;<br />

    transform: rotateY( 0deg );<br />

    transition: all .3s;<br />

    transform-origin: 100% 100%;<br />

    transform-style: preserve-3d;<br />

    }<br />

    .menu<br />

    {<br />

    top:0;<br />

    bottom:0;<br />

    left:90px;<br />

    width: 200px;<br />

    position: absolute;<br />

    margin: 5px;<br />

    display: none;<br />

    margin-top:50px;<br />

    background-color:transparent;<br />

    }<br />

    </style><br />

    <script type="text/javascript"><br />

    $(document).ready(function () {<br />

    $('#btn_menu').click(function () {<br />

    $("#corp_page").css({<br />

    "-webkit-transform": "rotateY(-20deg)",<br />

    "-webkit-transition": "all .4s linear",<br />

    "-webkit-transform-origin": "100% 100%",<br />

    "-webkit-transform-style": "preserve-3d",<br />

    "-moz-transform": "rotateY(-20deg)",<br />

    "-moz-transition": "all .4s",<br />

    "-moz-transform-origin": "100% 100%",<br />

    "-moz-transform-style": "preserve-3d",<br />

    "-ms-transform": "rotateY(-20deg)",<br />

    "-ms-transition": "all .4s",<br />

    "-ms-transform-origin": "100% 100%",<br />

    "-ms-transform-style": "preserve-3d",<br />

    "transform": "rotateY(-20deg)",<br />

    "transition": "all .4s",<br />

    "transform-origin": "100% 100%",<br />

    "transform-style": "preserve-3d"<br />

    });<br />

    $(".menu").delay(170).css({<br />

    "z-index": "5",<br />

    "-webkit-transition": "all .4s",<br />

    "-moz-transition": "all .4s",<br />

    "-ms-transition": "all .4s",<br />

    "transition": "all .4s"<br />

    }).fadeIn("fast");<br />

    });<br />

    $('#btn_menu_close,#corp_page').click(function () {<br />

    $(".menu").fadeOut("fast").css({<br />

    "z-index": "1",<br />

    "-webkit-transition": "all .4s",<br />

    "-moz-transition": "all .4s",<br />

    "-ms-transition": "all .4s",<br />

    "transition": "all .4s"<br />

    });<br />

    <br />

    $("#corp_page").css({<br />

    "-webkit-transform": "rotateY(0deg)",<br />

    "-webkit-transition": "all .7s linear",<br />

    "-webkit-transform-origin": "100% 100%",<br />

    "-webkit-transform-style": "preserve-3d",<br />

    "-moz-transform": "rotateY(0deg)",<br />

    "-moz-transition": "all .7s",<br />

    "-moz-transform-origin": "100% 100%",<br />

    "-moz-transform-style": "preserve-3d",<br />

    "-ms-transform": "rotateY(0deg)",<br />

    "-ms-transition": "all .7s",<br />

    "-ms-transform-origin": "100% 100%",<br />

    "-ms-transform-style": "preserve-3d",<br />

    "transform": "rotateY(0deg)",<br />

    "transition": "all .7s",<br />

    "transform-origin": "100% 100%",<br />

    "transform-style": "preserve-3d"<br />

    });<br />

    });<br />

    })<br />

    </script><br />

    </head><br />

    <body><br />

    <br /><br />

    <br /><br />

    <div style="position: relative; height: 400px; width: 825px; margin: auto;"><br />

    <div class="contener"><br />

    <div id="corp_page" style="overflow: scroll"><br />

    <div style="width: 100%"><br />

    <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%"><br />

    <tbody><br />

    <tr><br />

    <td style="padding: 10px; font-weight: 100; color: #ffffff;" valign="top"><br />

    WIFEO/CODE<br />

    </td><br />

    </tr><br />

    <tr><br />

    <td style="padding: 10px;" valign="top"><br />

    Post hoc impie perpetratum quod in aliis quoque iam timebatur, tamquam licentia<br />

    crudelitati indulta per suspicionum nebulas aestimati quidam noxii damnabantur.<br />

    quorum pars necati, alii puniti bonorum multatione actique laribus suis extorres<br />

    nullo sibi relicto praeter querelas et lacrimas, stipe conlaticia victitabant, et<br />

    civili iustoque imperio ad voluntatem converso cruentam, claudebantur opulentae<br />

    domus et clarae.<br />

    </td><br />

    </tr><br />

    </tbody><br />

    </table><br />

    </div><br />

    </div><br />

    </div><br />

    <div class="menu"><br />

    Item 2<br /><br />

    <br /><br />

    Item 3<br /><br />

    <br /><br />

    Item 4<br /><br />

    <br /><br />

    <img id="btn_menu_close" src="2.png" style="cursor: pointer;" /></div><br />

    <div style="top: 0; left: 0; position: absolute; cursor: pointer;"><br />

    <img id="btn_menu" src="1.png" /><br />

    </div><br />

    </div><br />

    <br /><br />

    <br /><br />

    <br /><br />

    <br /><br />

    </body><br />

    </html></td>

     </tr>

    </table>

    <p> </p>

    <p> </p>

    <p>以上代碼包含了兩張素材圖片 1.png 和 2.png:</p>

    <p> </p>

    <p>1.png</p>

    <p><img  width="50" height="50" src="http://www.xxx.cn/2014/11/14/20141114003452843.png" alt='jquery+css3實現炫酷菜單導航實例'  /></p>

    <p> </p>

    <p>2.png</p>

    <p><img  width="50" height="50" src="http://www.xxx.cn/2014/11/14/20141114003454929.png" alt='jquery+css3實現炫酷菜單導航實例'  /></p></td>

     </tr>

    </table>


    回到頂部
    337p日本欧洲亚洲大胆人体在线|亚洲第八十八页夜|国产女王假阳虐男视频|天天摸天天做天天爽2020