본문 바로가기

Menu/Menu

클릭하면 회전하면서 나오는 메뉴 스타일 See the Pen Code by Leena Lavanya (@leenalavanya) on CodePen. 클릭하면 회전하면서 나오는 메뉴 스타일
클릭하면 영역이 넓어지는 가로 아코디언 메뉴 See the Pen #CodePenChallenge - Menus by Artem (@artyschein) on CodePen. 클릭하면 영역이 넓어지는 가로 아코디언 메뉴
심플하게 나오는 드롭다운 메뉴 스타일 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 Flat Horizontal Navigation by Andy Tran (@andytran) 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
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 스타일 두가지 [출처]
[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. 드래그가 되는 오픈형 메뉴 스타일 소스 [출처]
[Menu] 둥글게 펴지는 애니메이션 메뉴 스크립트 소스 See the Pen Menu with mix-blend-mode buttons by Bennett Feely (@bennettfeely) on CodePen. 둥글게 펴지는 애니메이션 메뉴 스크립트 소스 [출처]
[Menu] 해당 메뉴에 선택이 되면 커서가 자유롭게 이동하는 메뉴 See the Pen Creeping Anchor by Andrey Vereshchak (@JoyZi) on CodePen. 해당 메뉴에 선택이 되면 커서가 자유롭게 이동하는 메뉴 [출처]
[Menu] 클릭하면 모션이 되면서 나타나는 셀렉트 메뉴 See the Pen Custom select by Nikolay Talanov (@suez) on CodePen. 클릭하면 모션이 되면서 나타나는 셀렉트 메뉴 [출처]
[Menu] 스크롤을 내리면 진행을 보여주는 네이게이션 See the Pen Progress Nav by Hakim El Hattab (@hakimel) on CodePen. 스크롤을 내리면 진행을 보여주는 네이게이션 [출처]
[Menu] 슬라이딩 되는 탭 메뉴 스크립트 소스 See the Pen Horizontal Tab Menu Slider v0.2 by Ettrics (@ettrics) on CodePen. 슬라이딩 되는 탭 메뉴 스크립트 소스 [출처]
[Menu] 스크롤 내리면 위쪽에 붙는 스티커 메뉴 만들기 See the Pen Sticky Slider Navigation (Responsive) by Ettrics (@ettrics) on CodePen. 스크롤 내리면 위쪽에 붙는 스티커 메뉴 만들기 [출처]
[Menu] 모바일 용 메뉴 아이콘 스타일 애니메이션 소스 See the Pen Menu Icon Concept by Paraskevas Ntinakis (@perry_nt) on CodePen. 모바일 용 메뉴 아이콘 스타일 애니메이션 소스 [출처]
[Menu] 클릭하면 풀 스크린으로 나오는 사이드 메뉴 스크립트 See the Pen Velocity.js fullscreen flexbox overlay navigation by Mirko Zorić (@fluxus) on CodePen. See the Pen Fullscreen flexbox overlay navigation by Mirko Zorić (@fluxus) on CodePen. 클릭하면 풀 스크린으로 나오는 사이드 메뉴 스크립트 [출처]
[Meun] 클릭하면 링으로 생기는 네비게이션 스타일 애니 See the Pen Rings Navigation Concept by Bennett Feely (@bennettfeely) on CodePen. 클릭하면 링으로 생기는 네비게이션 스타일 애니 [출처]
[Menu] 마우스 오버하면 슬라이드 되는 라인 이펙트 애니메이션 See the Pen How to Build a Fancy Menu Hover Effect With CSS & JavaScript by Envato Tuts+ (@tutsplus) on CodePen. 마우스 오버하면 슬라이드 되는 라인 이펙트 애니메이션 [출처]
[Menu] 마우스 우 클릭하면 메뉴 나오게 하는 스크립트 소스 See the Pen React right-click context menu by devHamsters (@devhamsters) on CodePen. 마우스 우 클릭하면 메뉴 나오게 하는 스크립트 소스 [출처]
[Menu] 마치 플래시로 만든 듯한 CSS 3D 메뉴 네비게이션 See the Pen Warp Drive! A pure CSS 3D Radial Menu by Jamie Coulter (@jcoulterdesign) on CodePen. 마치 플래시로 만든 듯한 CSS 3D 메뉴 네비게이션 [출처]
[Menu] 순수하게 CSS로만 제작한 드롭다운 메뉴 스크립트 See the Pen Swanky Pure CSS Drop Down Menu V2.0 by Jamie Coulter (@jcoulterdesign) on CodePen. 순수하게 CSS로만 제작한 드롭다운 메뉴 스크립트 [출처]
[Menu] 모핑효과를 이용한 탭 메뉴 버튼 애니메이션 소스 See the Pen Morphing tab button with list by Colin Horn (@colinhorn) on CodePen. 모핑효과를 이용한 탭 메뉴 버튼 애니메이션 소스 [출처]