jquery 및 css3_jquery로 구현된 멋지고 세련된 메뉴 탐색

오늘 제가 여러분께 소개해드릴 것은 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>

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;
}

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"
});

});
})