본문 바로가기

menu

옆에서 부드럽게 나오는 사이드 메뉴 See the Pen Sliding Menu by Dev Loop (@dev_loop) on CodePen. 옆에서 부드럽게 나오는 사이드 메뉴
버튼을 클릭하면 화면 분할로 나오는 오버레이 메뉴 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 Expanding and Collapsing Hamburger Menu by Jon Wilcox (@jonwilcox) on CodePen. 햄버그 메뉴와 사이드 메뉴를 결합시킨 메뉴
클릭하면 부드럽게 애니메이션 되는 SVG 메뉴 See the Pen Swip Animated Svg Hamburger Button by Andrea (@VLK_STUDIO) on CodePen. 클릭하면 부드럽게 애니메이션 되는 SVG 메뉴
SVG를 이용한 가로 메뉴 애니메이션 See the Pen Menu - #CodePenChallenge by Dejan Babić (@microfront) on CodePen. SVG를 이용한 가로 메뉴 애니메이션
클릭하면 위에서 차례로 내려오는 오버레이 메뉴 See the Pen Another menu concept by Rune Sejer Hoffmann (@RSH87) on CodePen. 클릭하면 위에서 차례로 내려오는 오버레이 메뉴
사이드 메뉴 같지만 탭 메뉴 같은 메뉴 스타일 See the Pen Accordion / Tabs with animation by Benjamin Koehler (@Benny29390) on CodePen. 사이트 메뉴 같지만 탭 메뉴 같은 메뉴 스타일입니다. 탭 메뉴에 넣어야 할지 사이드 메뉴에 넣어야 할지 고민이 되는 메뉴입니다.
모바일 사이드 메뉴의 올바른 방법과 그렇지 않은 것 See the Pen Acceleration/Deceleration | ✅ UX Animation Principles | @keyframers 1.23.0 by @keyframers (@keyframers) on CodePen. 모바일 사이드 메뉴의 올바른 방법과 그렇지 않은 것
가장 기본적인 탭 메뉴 스크립트 소스입니다. See the Pen Tab Menu by Webstoryboy (@webstoryboy) on CodePen. 가장 기본적인 탭 메뉴 스크립트 소스입니다. CODE VIEW
웹접근성을 준수한 탭 메뉴 애니메이션 입니다. See the Pen Tab Menu2 by Webstoryboy (@webstoryboy) on CodePen. 웹접근성을 준수한 탭 메뉴 애니메이션 입니다. CODE VIEW
가상요소를 두개 사용한 햄버그 메뉴 애니메이션 See the Pen Hamberger Menu2 by Webstoryboy (@webstoryboy) on CodePen. 가상요소를 두개 사용한 햄버그 메뉴 애니메이션 CODE VIEW
자연스럽게 변경되는 햄버그 메뉴 애니메이션 See the Pen Hamberger Menu by Webstoryboy (@webstoryboy) on CodePen. 자연스럽게 변경되는 햄버그 메뉴 애니메이션입니다. CODE VIEW
심플한 아코디언 메뉴 애니메이션 See the Pen Dynamic accordions by Rune Sejer Hoffmann (@RSH87) on CodePen. 심플한 아코디언 메뉴 애니메이션입니다. CODE VIEW
위에서 부드럽게 내려오는 메뉴 애니메이션 See the Pen Another menu concept by Rune Sejer Hoffmann (@RSH87) on CodePen. 위에서 부드럽게 내려오는 메뉴 애니메이션 CODE VIEW
클릭하면 화면 전체를 감싸는 오버레이 메뉴 See the Pen Overlay Menu by Dronca Raul (@rauldronca) on CodePen. 클릭하면 화면 전체를 감싸는 오버레이 메뉴 CODE VIEW
클릭하면 나타나고 없어지는 메뉴 스타일 See the Pen Header Menu Navigation - Transport Form by Gabriele Mantovani (@mantovanig) on CodePen. 클릭하면 나타나고 없어지는 메뉴 스타일입니다. CODE
서브 페이지에서 많이 쓰는 세로형 아코디언 메뉴 See the Pen #CodePenChallenge - dt & dd - Trending Words by Halida Astatin (@halidaa) on CodePen. 서브 페이지에서 많이 쓰는 세로형 아코디언 메뉴입니다. CODE VIEW
[UI/UX] 스크롤 내리면 탑에 고정시키는 패럴렉스 사이트 메뉴 See the Pen ScrollTop Demo by GRAY GHOST (@grayghostvisuals) on CodePen. 스크롤 내리면 탑에 고정시키는 패럴렉스 사이트 메뉴 [출처]
모바일 용 확장 액션 버튼 애니메이션 소스 See the Pen expanding action button by creme (@creme) on CodePen. 모바일 용 확장 액션 버튼 애니메이션 소스입니다.
[Menu] 사이드 메뉴 형식에 탭 메뉴를 조화시킨 소스 See the Pen OffScreen Panel With Tabbed Nav by Alex Raven (@asraven) on CodePen. 사이드 메뉴 형식에 탭 메뉴를 조화시킨 소스 [출처]
[Menu] 깔끔한 폴더 스타일의 메뉴 디자인 및 소스 See the Pen A Directory Tree List Style by Alex Raven (@asraven) on CodePen. 깔끔한 폴더 스타일의 메뉴 디자인 및 소스 [출처]
[Menu] 드래그가 되는 오픈형 메뉴 스타일 소스 See the Pen Floatting Draggable Menu (Messenger like) by Andy Pagès (@andyNroses) on CodePen. 드래그가 되는 오픈형 메뉴 스타일 소스 [출처]
애니메이션이 역동적인 모바일 네비게이션 소스 See the Pen Mobile navigation animation by Karlo Videk (@karlovidek) on CodePen. 애니메이션이 역동적인 모바일 네비게이션 소스