본문 바로가기

메뉴

UX 및 디자인이 좋은 드롭다운 메뉴 See the Pen Dropdown Menu by Flávio Amaral (@flavio_amaral) on CodePen. UX 및 디자인이 좋은 드롭다운 메뉴
글씨가 갈라지는 메뉴 오버 효과 See the Pen Perspective Split Text Menu Hover by James Bosworth (@bosworthco) on CodePen. 글씨가 갈라지는 메뉴 오버 효과
풀 페이지 메뉴 애니메이션 See the Pen Full Page Menu by Sikriti Dakua (@dev_loop) on CodePen. 풀 페이지 메뉴 애니메이션
마우스 효과와 메뉴가 합쳐진 애니메이션 See the Pen Magnetic Hover Interaction by Sikriti Dakua (@dev_loop) on CodePen. 마우스 효과와 메뉴가 합쳐진 애니메이션
디테일한 메뉴 링크 애니메이션 See the Pen Link Hover Interaction by Sikriti Dakua (@dev_loop) on CodePen. 디테일한 메뉴 링크 애니메이션
마우스 오버 효과 메뉴 애니메이션 See the Pen Link Hover Interaction | SplittingJS by Sikriti Dakua (@dev_loop) on CodePen. 마우스 오버 효과 메뉴 애니메이션
모바일 하단 탭 메뉴 스타일 See the Pen Animated Tab Bar v.2 by abxlfazl khxrshidi (@abxlfazl) on CodePen. 모바일 하단 탭 메뉴 스타일
클릭하면 원으로 나오는 오버레이 메뉴 See the Pen Open menu effect | Pure CSS by Håvard Brynjulfsen (@havardob) on CodePen. 클릭하면 원으로 나오는 오버레이 메뉴
Context Menu 디자인 스타일 See the Pen Context menu with Feather icons by Håvard Brynjulfsen (@havardob) on CodePen. Context Menu 디자인 스타일
CSS를 이용한 트랜지션 메뉴 See the Pen Sliding tabs | CSS transitions only by Håvard Brynjulfsen (@havardob) on CodePen. CSS를 이용한 트랜지션 메뉴
슬라이딩 메뉴 애니메이션 만들기 See the Pen Basic Sliding Navigation by Ethan (@eroxburgh) on CodePen. 슬라이딩 메뉴 애니메이션 만들기
마우스에 따라 움직이는 마우스 이미지 See the Pen Menu Hover Interaction by Sikriti Dakua (@dev_loop) on CodePen. 마우스 방향에 따라 움직이는 글씨
마우스를 이용한 메뉴 애니메이션 스타일 See the Pen Menu Effect by Ivan Grozdic (@ig_design) on CodePen. 마우스를 이용한 메뉴 애니메이션 스타일
접기 펼치기 아코디언 메뉴(전체접기) See the Pen Materialize Collapsible - Expand All, Collapse All by Muhammed Erdem (@JavaScriptJunkie) on CodePen. 접기 펼치기 아코디언 메뉴(전체접기)
Canvas 배경을 이용한 오버레이 메뉴 애니메이션 See the Pen Assembling menu concept (canvas) by Muhammed Erdem (@JavaScriptJunkie) on CodePen. Canvas 배경을 이용한 오버레이 메뉴 애니메이션
아코디언 스타일 탭메뉴 애니메이션 See the Pen Accordion / Tabs with animation by Benjamin Koehler (@Benny29390) on CodePen. 아코디언 스타일 탭메뉴 애니메이션
메뉴바를 클릭하면 사이드로 나오는 메뉴 See the Pen Interaction Challenge 2 by TheFrost (@frost084) on CodePen. 메뉴바를 클릭하면 사이드로 나오는 메뉴
디자인이 깔끔한 피그네이션 애니메이션 See the Pen Pagination or Navigation Links Application by Himalaya Singh (@himalayasingh) on CodePen. 디자인이 깔끔한 피그네이션 애니메이션
선택메뉴를 따라다니는 드롭다운 메뉴 See the Pen Pure CSS Select Box With Direction Aware Hover Effect by Himalaya Singh (@himalayasingh) on CodePen. 선택메뉴를 따라다니는 드롭다운 메뉴
깔끔하게 표현된 네비게이션 애니메이션 See the Pen Navbar Interaction by Himalaya Singh (@himalayasingh) on CodePen. 깔끔하게 표현된 네비게이션 애니메이션
클릭하면 살짝 나오는 오버레이 메뉴 See the Pen POP Out Navigation by Ryan Mulligan (@hexagoncircle) on CodePen. 클릭하면 살짝 나오는 오버레이 메뉴
글씨가 갈라지는 텍스트 메뉴 스타일 See the Pen Split Text Menu by sean_codes (@sean_codes) on CodePen. 글씨가 갈라지는 텍스트 메뉴 스타일
애니메이션이 좋은 내비게이션 오버 스타일 See the Pen Recursive Hover Nav ( Only CSS ) by sean_codes (@sean_codes) on CodePen. 애니메이션이 좋은 내비게이션 오버 스타일
클릭하면 나오는 오버레이 메뉴 애니메이션 See the Pen Navbar - overlay animation by Sonja Strieder (@sonjastrieder) on CodePen. 클릭하면 나오는 오버레이 메뉴 애니메이션
모바일에서 자주사용하는 반응형 메뉴 See the Pen Responsive navbar by Sonja Strieder (@sonjastrieder) on CodePen. 모바일에서 자주사용하는 반응형 메뉴
가장 기본적인 드롭다운 메뉴 스타일 See the Pen Dropdown menu by Grzegorz Witczak (@Wujek_Greg) on CodePen. 가장 기본적인 드롭다운 메뉴 스타일
마우스 오버하면 라인 생기는 메뉴 애니메이션 See the Pen Border Draw Effect by Mahmoud (@7oot) on CodePen. 마우스 오버하면 라인 생기는 메뉴 애니메이션
오른쪽 버튼을 클릭하면 나오는 메뉴 See the Pen Awesome Context Menu by Simon Goellner (@simeydotme) on CodePen. 오른쪽 버튼을 클릭하면 나오는 메뉴
메뉴를 따라가는 메뉴 인디케이터 애니메이션 See the Pen animated menu indicator — week 27/52 by Mert Cukuren (@knyttneve) on CodePen. 메뉴를 따라가는 메뉴 인디케이터 애니메이션
클릭하면 자연스럽게 닫기로 바뀌는 햄버그 메뉴 See the Pen Menu Toggle animation by Aaron Iker (@aaroniker) on CodePen. 클릭하면 자연스럽게 닫기로 바뀌는 햄버그 메뉴