js로 유사 slideDown 기능 만들기 / 안보였던 메뉴가 버튼클릭하면, 오른쪽으로 나오게 하기

• css핵심
  • position: fixed;
    • css 폭과 길이가 적용되도록
  • margin-left: -150px;
    • 왼쪽으로 150px 이동시켜서 안보이도록 했음

.left-menu {
  width: 150px;
  height: 100%;
  background-color: black;
  color: white;
  position: fixed;
  margin-left: -150px;
}

<div class="left-menu">
  <p>Menu Title</p>
</div>

• js핵심
  • 버튼클릭하면 메뉴에 애니메이션 설정하였음
    • margin-left를 0px로 변경시키는 기능을 함으로써 화면에 메뉴가 보이게 됨

$("#show-menu").on("click", function () {
  (".left-menu").animate({ marginLeft: "0px" });
});

• 결론
  • div를 이동시켜서 화면에 안보이도록 함
  • 이벤트에 .animate()설정하여 margin을 0px로 변경시켜서 숨긴 div보이도록 하기