채택완료

본사이트 우측처럼 페이지를 만들어야 합니다.

2019-01-07 (월) 10:25:16 1,606

http://www.skbroadband-biz.com/service/

좋은 방법이 없을까요?

고수님들 만은 답변 주세요

|

답변 1개 / 댓글 1개

채택된 답변
+20 포인트
2019-01-07 (월) 10:26:42

Copy
<!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>
 

답변에 대한 댓글 1개

2019-01-07 (월) 10:49:30
저거를 고대로 오른쪽으로 옮기려고 모두 right로 바꿔봤더니 요상해 졌어요 ..
.뭘 바꿔야 되죠? ㅎㅎ

답변을 작성하려면 로그인이 필요합니다.