본문 바로가기

Menu

마우스 오버하면 라인 생기는 메뉴 애니메이션 See the Pen Border Draw Effect by Mahmoud (@7oot) on CodePen. 마우스 오버하면 라인 생기는 메뉴 애니메이션
위에서 내려오는 서브 메뉴 애니메이션 See the Pen CodePen Challenge: Menu by Adam Kuhn (@cobra_winfrey) 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 Sliding Menu by Dev Loop (@dev_loop) on CodePen. 옆에서 부드럽게 나오는 사이드 메뉴
왼쪽 상단에서 나오는 모바일 용 메뉴 애니메이션 See the Pen Radial Menu - CSS by Zed Dash (@z-) on CodePen. 왼쪽 상단에서 나오는 모바일 용 메뉴 애니메이션
클릭하면 자연스럽게 닫기로 바뀌는 햄버그 메뉴 See the Pen Menu Toggle animation by Aaron Iker (@aaroniker) on CodePen. 클릭하면 자연스럽게 닫기로 바뀌는 햄버그 메뉴
두가지 스타일의 셀렉트 메뉴 애니메이션 See the Pen Select dropdown (Light & Dark) by Aaron Iker (@aaroniker) on CodePen. 두가지 스타일의 셀렉트 메뉴 애니메이션
클릭하면 360도로 회전하는 햄버그 메뉴 스타일 See the Pen Hamburger 3D CSS Switch animation by Aaron Iker (@aaroniker) on CodePen. 클릭하면 360도로 회전하는 햄버그 메뉴 스타일
심플한 모바일용 내비게이션 애니메이션 See the Pen Morphing Hamburger Menu with CSS by lmgonzalves (@lmgonzalves) on CodePen. 심플한 모바일용 내비게이션 애니메이션
SVG를 이용한 고급 햄버거 메뉴 애니메이션 See the Pen Hamburger Menu Animations by Tamino Martinius (@Zaku) on CodePen. See the Pen Dot Menu Animations by Tamino Martinius (@Zaku) on CodePen. SVG를 이용한 고급 햄버거 메뉴 애니메이션
클릭하면 회전하면서 나오는 메뉴 스타일 See the Pen Code by Leena Lavanya (@leenalavanya) on CodePen. 클릭하면 회전하면서 나오는 메뉴 스타일
GSAP를 이용한 사이드 메뉴 애니메이션 See the Pen Open-close navigation lvl2 by Karim Maaloul (@Yakudoo) on CodePen. GSAP를 이용한 사이드 메뉴 애니메이션
SVG를 이용한 오버레이 메뉴 애니메이션 효과 See the Pen Full width menu & SVG animation by Brandon Ward (@brandondward) on CodePen. SVG를 이용한 오버레이 메뉴 애니메이션 효과
버튼을 클릭하면 화면 분할로 나오는 오버레이 메뉴 See the Pen Multibox Menu by Hosea (@hosea-s) on CodePen. 버튼을 클릭하면 화면 분할로 나오는 오버레이 메뉴
메뉴를 클릭하면 오른쪽에서 나오는 사이드 메뉴 See the Pen menu - header by Romswell Roswell Parian Paucar (@romswellparian) on CodePen. 메뉴를 클릭하면 오른쪽에서 나오는 사이드 메뉴
위에서 스르르 나오는 토글 오버레이 메뉴 See the Pen Menu angle animation by Dany Da Silva Barao (@Shockolate) on CodePen. 위에서 스르르 나오는 토글 오버레이 메뉴
왼쪽에서 나오는 오버레이 메뉴 스타일 See the Pen Overlay Menu: Align Items by Daiane Assen (@INapta) on CodePen. 왼쪽에서 나오는 오버레이 메뉴 스타일
깔끔한 스타일의 햄버거 메뉴~ 햄버거 먹고 싶다. See the Pen Hamburger Icons Animations by Ahmad Emran (@ahmadbassamemran) on CodePen. 깔끔한 스타일의 햄버거 메뉴~ 햄버거 먹고 싶다.
클릭하면 순식간에 애니메이션 되는 오버레이 메뉴 See the Pen Logo Menu Overlay by Michel Luarasi (@mugi) on CodePen. 클릭하면 순식간에 애니메이션 되는 오버레이 메뉴
클릭하면 서서히 나오는 오버레이 메뉴 기본형 See the Pen overlay menu by Antonio Molinari (@magnum) on CodePen. 클릭하면 서서히 나오는 오버레이 메뉴 기본형
메뉴버튼을 클릭하면 위에서 내려오는 오버레이 메뉴 See the Pen Bodymovin Full Screen Overlay Menu by Charlie Nowell (@cnowell) on CodePen. 메뉴버튼을 클릭하면 위에서 내려오는 오버레이 메뉴
그리드 형식으로 나오는 오버레이 메뉴 스타일 See the Pen CSS Grid Menu Panels by Ryan Mulligan (@hexagoncircle) on CodePen. 그리드 형식으로 나오는 오버레이 메뉴 스타일
햄버그 메뉴와 사이드 메뉴를 결합시킨 메뉴 See the Pen Expanding and Collapsing Hamburger Menu by Jon Wilcox (@jonwilcox) on CodePen. 햄버그 메뉴와 사이드 메뉴를 결합시킨 메뉴
클릭하면 영역이 넓어지는 가로 아코디언 메뉴 See the Pen #CodePenChallenge - Menus by Artem (@artyschein) on CodePen. 클릭하면 영역이 넓어지는 가로 아코디언 메뉴
클릭하면 부드럽게 애니메이션 되는 SVG 메뉴 See the Pen Swip Animated Svg Hamburger Button by Andrea (@VLK_STUDIO) on CodePen. 클릭하면 부드럽게 애니메이션 되는 SVG 메뉴
심플하게 나오는 드롭다운 메뉴 스타일 See the Pen Daily UI #027 Dropdown by Emil (@emilcarlsson) on CodePen. 심플하게 나오는 드롭다운 메뉴 스타일
SVG를 이용한 가로 메뉴 애니메이션 See the Pen Menu - #CodePenChallenge by Dejan Babić (@microfront) on CodePen. SVG를 이용한 가로 메뉴 애니메이션
자연스럽게 이어지는 드롭 다운 메뉴 애니메이션 See the Pen Content aware dropdown by Rune Sejer Hoffmann (@RSH87) on CodePen. 자연스럽게 이어지는 드롭 다운 메뉴 애니메이션
클릭하면 위에서 차례로 내려오는 오버레이 메뉴 See the Pen Another menu concept by Rune Sejer Hoffmann (@RSH87) on CodePen. 클릭하면 위에서 차례로 내려오는 오버레이 메뉴