[CSS] 메뉴 슬라이드 이동
/menu slide/메뉴 보이기 감추기/메뉴 우측으로 보이기/메뉴 우측으로 감추기
:D CSS
#MenuWrap { position:absolute; width:200px; height:100%; left:0px; top:0px; z-index:4; overflow:hidden; background-color:#4988C7; color:#FFFFFF; } #MenuWrap.slide { -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s; } #MenuWrap.menuOff{ box-shadow: 1px 0 2px rgba(0,0,0,0.2); -webkit-transform: translate3d(-100%, 0, 0); -moz-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } #MenuWrap.menuOn{ box-shadow: 1px 0 2px rgba(0,0,0,0.2); -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } |
:D html
<html> <head></head> <body> <div id="wrap"> <div id="MenuWrap" class="menuOff slide"> /** 메뉴 영역 **/ </div> <div id="MenuHelp" style="position:absolute;left:10px;bottom:10px;z-index:100;display:none" onclick="Common.menuOnOff()"><img src="/images/menu.png" width="40px"/></div> <div id="Container"> </div> </div> </body> </html> |
:D Javascript
/** * 메뉴 감추기 또는 보이기 */ menuOnOff : function(){ if($("#MenuWrap").attr("class").indexOf("Off") > -1){ this.menuOn(); }else{ this.menuOff(); } }, /** * 메뉴 보이기 */ menuOn : function(){ $("#MenuWrap").removeClass("menuOff"); $("#MenuWrap").addClass("menuOn"); },
/** * 메뉴 감추기 */ menuOff : function(){ $("#MenuWrap").removeClass("menuOn"); $("#MenuWrap").addClass("menuOff"); $("#Container").css('left','0px'); }, |
'skill > HTML.Javscript.CSS' 카테고리의 다른 글
| html 인트로화면 넣기(동일화면) : javascript (0) | 2015.06.13 |
|---|---|
| table cellpadding cellspacing css로 처리하는 법 (0) | 2015.04.10 |
| [CSS] sitemap 아이콘 디자인 (0) | 2014.08.20 |
| [Javascript] ajax를 이용한 화면 refresh 없이 링크이동 (0) | 2014.08.19 |
| [javascript] 화면크기 변경 시 이벤트 설정 (0) | 2014.08.13 |