본사이트 우측처럼 페이지를 만들어야 합니다.
본문
답변 1
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<style type="text/css">
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
html, body { margin: 0; padding: 0; height: 100%; overflow-x: hidden; background: #ff9900;}
#sideMenu { position: fixed; top: 0; left: -250px; z-index: 80;height: 100%; width: 250px; padding: 20px;background-color: #ffcc00; color: #000; transition: left 0.6s;}
#sideMenu ul { padding: 0; list-style: none; margin: 0; display: none;}
#menuBtn {position: fixed; top: 10px; left: 10px; z-index: 100;background: #f1103a; font: bold 1.7em/36px Courier New; width: 36px; height: 36px; text-align: center; color: #FFF;text-shadow: 0 -5px, 0 5px; border-radius: 50px; cursor: pointer;transition: left 0.9s;}
#contentBox {position: absolute; top: 0px; left: 0px; z-index: 90; padding: 20px; width: 100%; z-index: 0;background: #ff9900;word-break:break-all;transition: left 0.2s;}
</style>
<script type="text/javascript">
$(function(){
// css transition 으로 애니메이션 효과를 주었으나 ie 저버전에서도 애니메이션 효과를 주려면 jquery의 animate() 사용.
$("#menuBtn").click(function() {
if($("#sideMenu").offset().left == 0){
$("#menuBtn").css("left","10px");
$("#sideMenu").css("left","-250px");
$("#contentBox").css("left","0"); // 주석 처리하면 메뉴만 움직
$("#sideMenu ul").slideUp(100);
}else{
$("#menuBtn").css("left","200px");
$("#sideMenu").css("left","0");
$("#contentBox").css("left","250px"); // 주석 처리하면 메뉴만 움직
$("#sideMenu ul").slideDown(500);
}
});
});
</script>
</head>
<body>
<div id="sideMenu"><ul><li>1111111111111111</li><li>22222222222222222222</li><li>33333333333</li><li>444444444444444</li></ul></div>
<div id="menuBtn">─</div>
<div id="contentBox"><div style="height:50px;background: #00ccff;"></div>dfsd62w4gddjfgjfnbnsddfsd62df</div>
</body>
</html>
저거를 고대로 오른쪽으로 옮기려고 모두 right로 바꿔봤더니 요상해 졌어요 ..
.뭘 바꿔야 되죠? ㅎㅎ
답변을 작성하시기 전에 로그인 해주세요.
