SIDE MENU
toggleClass를 이용하여 클래스를 추가한 뒤 hasClass()로 클래스 여부를 확인하여 사이드 메뉴를 제작하였습니다. 글씨의 변경은 text() 메서드를 이용했습니다.
See the Pen Menu - Side Menu by heemwon (@heemwon) on CodePen.
Tab Menu1
버튼을 클릭하면 기존의 클래스를 삭제하고(removeClass) 클릭한 요소의 클래스를 추가하여(addClass) 탭 메뉴를 완성하였습니다.
See the Pen Menu - Tab menu1 by heemwon (@heemwon) on CodePen.
Tab Menu2
접근성을 고려하여 초점이동을 준수한 웹 표준 탭 메뉴를 완성하였습니다.
See the Pen Menu - Tab menu2 by heemwon (@heemwon) on CodePen.
Show/Hidden Menu
스크롤 값을 이용하여 메뉴를 보여주고, 사라지는 효과를 완성하였습니다.
See the Pen Show/Hidden Menu by heemwon (@heemwon) on CodePen.
Sticky Menu
스크롤 값을 이용하여 메뉴가 이동되며, 버튼 클릭시 해당 섹션으로 이동하는 효과를 완성하였습니다.
See the Pen Sticky Menu by heemwon (@heemwon) on CodePen.