SIDE MENU

toggleClass()를 이용하여 클래스를 추가한 뒤 hasClass()로 클래스 여부를 확인하여 사이드 메뉴를 제작하였습니다. 글씨의 변경은 text()메서드를 이용했습니다.

See the Pen Menu-Side Menu by Kang minjeong (@min0228K) on CodePen.

TAB MENU 1

버튼을 클릭하면 기존의 클래스를 삭제(removeClass)하고 클릭한 요소의 클래스를 추가(addClass)하여 탭 메뉴를 완성하였습니다.

See the Pen Menu-Tab menu1 by Kang minjeong (@min0228K) on CodePen.

TAB MENU 2

접근성을 고려하여 초점이동을 준수한 웹 표준 탭 메뉴를 완성하였습니다.

See the Pen Menu-Tab Menu2 by Kang minjeong (@min0228K) on CodePen.

Show/Hidden Menu

scrollTop값을 이용해서 상단에 메뉴를 완성했습니다.

See the Pen Show/Hidden Menu by Kang minjeong (@min0228K) on CodePen.

Sticky Menu

scrollTop값과 offset값을 이용해서 메뉴의 이동을 완성했습니다.

See the Pen Sticky Menu by Kang minjeong (@min0228K) on CodePen.

Dot Menu

scroll값을 이용하여 사이드 메뉴를 완성했습니다.

See the Pen Dot Menu by Kang minjeong (@min0228K) on CodePen.

figma

확인하기