SIDE MENU
toggleClass()를 이용하여 클래스를 추가한뒤 hasClass()로 클래스 여부를 확인하여 사이드 메뉴를 제작하였습니다. 글씨의 변경은 text() 메서드를 이용했습니다.
See the Pen Menu - Side Menu by 1rrock (@zxcv1685) on CodePen.
TAB MENU1
버튼을 클릭하면 기존의 클래스를 삭제(removeClass)하고 클릭한 요소의 클래스를 추가(addClass)하여 탭 메뉴를 완성하였습니다.
See the Pen Menu - Tab menu1 by 1rrock (@zxcv1685) on CodePen.
TAB MENU2
접근성을 고려하여 초점이동을 준수한 웹 표준 탭 메뉴를 완성하였습니다.
See the Pen Menu - Tab menu2 by 1rrock (@zxcv1685) on CodePen.
Show/Hidden Menu
스크롤을 내리면 메뉴가 사라지고 올리면 나타나는 메뉴 이펙트입니다.
See the Pen Parallax menu - Hidden Menu by 1rrock (@zxcv1685) on CodePen.
Stikey Menu
메뉴를 누르면 해당 화면으로 스크롤 되는 메뉴 이펙트입니다.
See the Pen Sticky Menu by 1rrock (@zxcv1685) on CodePen.
Dot Menu
Dot menu를 클릭하면 해당 화면으로 넘어가는 메뉴 이펙트입니다.