그누보드 - 버튼 클릭 시 왼쪽에서 나오는 토글에 관련한 질문입니다.

버튼 클릭 시 왼쪽에서 나오는 토글에 관련한 질문입니다. > 토크

토크

개발과 관련된 어떤 얘기도 괜찮습니다.

버튼 클릭 시 왼쪽에서 나오는 토글에 관련한 질문입니다. 정보

버튼 클릭 시 왼쪽에서 나오는 토글에 관련한 질문입니다.

본문

버튼을 클릭을 했을 때 왼쪽에서 토글 형태로 나오는 메뉴를 만들어 보고 있습니다.

근데 문제는 안에 있는 내용이 통째로 나오는게 아니라 내용이 흐르듯이 나오고 있어서

어떤게 문제인지 모르겠습니다. 고수님들 좀 알려주세요 ㅜㅜ

<!doctype html>

<html>

<head>

<title>Untitled Document</title>

$(document).ready(function(){

$(".lnb_left").hide();

$(".btn_left, .btn_close").click(function(){

$(".lnb_left").animate({width:'toggle'});

});

</script>

<style>

body{}

#wrap{position:relative; min-height:100%;}

.lnb_btn{position:absolute; top:300px; left:0;}

.lnb_left{position:fixed; top:0; left:0; width:435px; height:100%; background:#efefef; z-index:10;}

.lnb_left .lnb_wrap{padding:10px;}

.lnb_left .lnb_wrap .lnb_top{margin-bottom:10px; text-align:right;}

.lnb_left .lnb_wrap .lnb_con{}

#header{width:1280px; margin:0 auto;}

#header .logo{float:left; margin-right:20px;}

#header .menu{float:left;}

#header .menu ul{}

#header .menu ul li{float:left; margin:0 10px;}

#container{width:1280px; margin:0 auto;}

#footer{width:1280px; margin:0 auto;}

</style>

</head>

<body>

<? include 'lnb_left.html'; ?>

</div>

<ul>

</ul>

</div>

</div>

</div>

</div>

</body>

</html>

<p>내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용내용</p>

</div>

댓글 3개

나는웹디다 자기소개 아이디로 검색 전체게시물 회원게시물

자기소개 아이디로 검색 전체게시물 회원게시물

15.06.12 10:04:11

스크립트 부분
$(document).ready(function(){
$(".btn_left, .btn_close").click(function(){
$(".lnb_left").toggleClass("on",300);
});
});
통채 변경해주시고요

css 부분
.lnb_left{position:fixed; top:0; left:-435px; width:435px; height:100%; background:#efefef; z-index:10;}
.lnb_left.on {left:0px;}
추가변경 해주세요^^