본문 바로가기

Menu

HTML와 CSS를 이용한 아코디언 메뉴 See the Pen Awesome accordion menu using only HTML & CSS by Ahmad Emran (@ahmadbassamemran) on CodePen. HTML와 CSS를 이용한 아코디언 메뉴
사이드 메뉴 같지만 탭 메뉴 같은 메뉴 스타일 See the Pen Accordion / Tabs with animation by Benjamin Koehler (@Benny29390) on CodePen. 사이트 메뉴 같지만 탭 메뉴 같은 메뉴 스타일입니다. 탭 메뉴에 넣어야 할지 사이드 메뉴에 넣어야 할지 고민이 되는 메뉴입니다.
CSS를 이용한 사이드 드롭 박스 아코디언 메뉴 See the Pen Swanky Pure CSS Drop Down Menu V2.0 by Jamie Coulter (@jcoulterdesign) on CodePen. CSS를 이용한 사이드 드롭 박스 아코디언 메뉴
모바일 사이드 메뉴의 올바른 방법과 그렇지 않은 것 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 Flat Vertical Navigation 2.0 by Andy Tran (@andytran) on CodePen. 가장 기본적인 아코디언 메뉴 애니메이션입니다. CODE VIEW
가장 기본적인 수평 네비게이션 애니메이션 See the Pen Flat Horizontal Navigation by Andy Tran (@andytran) 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 Ivan Grozdic (@ig_design) on CodePen. 오버레이 효과를 이용한 메뉴 애니메이션입니다. CODE
클릭하면 화면 전체를 감싸는 오버레이 메뉴 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 Fluid tab active state by Aaron Iker (@aaroniker) on CodePen. 메뉴 따라다니는 메뉴 바 만들기 CODE
서브 페이지에서 많이 쓰는 세로형 아코디언 메뉴 See the Pen #CodePenChallenge - dt & dd - Trending Words by Halida Astatin (@halidaa) on CodePen. 서브 페이지에서 많이 쓰는 세로형 아코디언 메뉴입니다. CODE VIEW
3D 느낌으로 구현되는 아이콘 메뉴바 디자인 See the Pen Navigation Bar by Jan Kaděra by Katy DeCorah (@katydecorah) on CodePen. 3D 느낌으로 구현되는 아이콘 메뉴바 디자인 CODE
클릭하면 화려하게 변경되는 햄버그 메뉴 See the Pen Hamburger SVG Menu + Close Button by apptension (@apptension) on CodePen. 클릭하면 화려하게 변경되는 햄버그 메뉴 CODE
[Menu] 심플한 탭 메뉴 CSS/JS 스타일 두가지 See the Pen Simple Tabs Concept by Kyle Brumm (@kjbrum) on CodePen. See the Pen Simple Tabs Concept (Pure CSS) by Kyle Brumm (@kjbrum) on CodePen. 심플한 탭 메뉴 CSS/JS 스타일 두가지 [출처]
심플한 아코디언 메뉴 스크립트(CSS/JS) See the Pen Simple Accordion Concept by Kyle Brumm (@kjbrum) on CodePen. See the Pen Simple Accordion Concept (Pure CSS) by Kyle Brumm (@kjbrum) on CodePen. 심플하고 간단한 아코디언 메뉴 스크립트 CODE VIEW
클릭하면 화면의 반만 나오는 사이드 메뉴 See the Pen Split Screen Slide-Out Menu by Kyle Brumm (@kjbrum) on CodePen. 클릭하면 화면의 반만 나오는 사이드 메뉴입니다.
[Menu] 콘텐츠 내용을 줄어들면서 사이드 메뉴가 나오는 스크립트 See the Pen Off-Canvas Navigation w/Page Transitions by Kyle Brumm (@kjbrum) on CodePen. 콘텐츠 내용을 줄어들면서 사이드 메뉴가 나오는 스크립트
모바일에서 쓰기 좋은 애니메이션 메뉴 See the Pen Mobile Menu Animation by Stas Melnikov (@melnik909) 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. 애니메이션이 역동적인 모바일 네비게이션 소스
[Menu] 둥글게 펴지는 애니메이션 메뉴 스크립트 소스 See the Pen Menu with mix-blend-mode buttons by Bennett Feely (@bennettfeely) on CodePen. 둥글게 펴지는 애니메이션 메뉴 스크립트 소스 [출처]