티스토리 뷰

검은 부분을 클릭하면 네모가 오른쪽으로 가고,

한번 더 누르면 제자리(왼쪽으로) 움직이는 예제. (미리보기는 없다 ㅋㅋ)


나는 이걸로 메뉴 열고 닫기에 응용할 것이다. 


   
   





 <html>

<head>

<style>

#container {

  position:absolute;

  background-color:#abc;

  left:50px;

  width:90px;

  height:90px;

  margin:5px;

}


#menu {

  position:absolute;

  background-color:#000000;

  width:10px;

  height:90px;  

}

</style>


<script src="http://code.jquery.com/jquery-latest.js"></script>

</head>


<body>


<div id="container">

<div id="menu"></div>

</div>

<script>


var menu_flag = true;


$("#menu").click(function(){

  if (menu_flag) {

   $("#container").animate({"left": "+=300px"}, "slow");

menu_flag = false;

  } else {

$("#container").animate({"left": "-=300px"}, "slow");

        menu_flag = true;

  }

});


</script>

</body>

</html>



댓글
댓글쓰기 폼