본문 바로가기

Menu/Menu

UX 및 디자인이 좋은 드롭다운 메뉴 See the Pen Dropdown Menu by Flávio Amaral (@flavio_amaral) on CodePen. UX 및 디자인이 좋은 드롭다운 메뉴
오른쪽 클릭 메뉴 만들기 See the Pen Infinite Context Menu by Hyperplexed (@Hyperplexed) on CodePen. 오른쪽 클릭 메뉴 만들기
애니메이션 메뉴 바 See the Pen animated menu indicator — week 27/52 by Mert Cukuren (@knyttneve) on CodePen. 애니메이션 메뉴 바
오른쪽 클릭하면 메뉴 나오기 See the Pen Custom Right-Click (Context) Menu by Mert Cukuren (@knyttneve) on CodePen. 오른쪽 클릭하면 메뉴 나오기
깔끔한 모바일 탭 메뉴 See the Pen Tab Menu by Md Usman Ansari (@mdusmanansari) on CodePen. 깔끔한 모바일 탭 메뉴
디자인 깔끔한 오른쪽 메뉴 See the Pen Awesome Context Menu v2 by Simon Goellner (@simeydotme) on CodePen. 디자인 깔끔한 오른쪽 메뉴
글씨가 갈라지는 메뉴 오버 효과 See the Pen Perspective Split Text Menu Hover by James Bosworth (@bosworthco) on CodePen. 글씨가 갈라지는 메뉴 오버 효과
자연스럽게 움직이는 메뉴 Active 바 See the Pen Segmented Control Interaction by Sikriti Dakua (@dev_loop) on CodePen. See the Pen Control Interaction by Sikriti Dakua (@dev_loop) on CodePen. 자연스럽게 움직이는 메뉴 Active 바
마우스 효과와 메뉴가 합쳐진 애니메이션 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 Tab Bar Interaction #3 by Sikriti Dakua (@dev_loop) on CodePen. 리빌 효과가 들어가 메뉴 이펙트
마우스 오버 효과 메뉴 애니메이션 See the Pen Link Hover Interaction | SplittingJS by Sikriti Dakua (@dev_loop) on CodePen. 마우스 오버 효과 메뉴 애니메이션
탭바 애니메이션 See the Pen Amazing Tab Bar (Animated) by Flávio Amaral (@flavio_amaral) on CodePen. 탭바 애니메이션
CSS를 이용한 마우스 오버 효과 See the Pen menu-hover by Aysenur Turk (@TurkAysenur) on CodePen. CSS를 이용한 마우스 오버 효과
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 Slidey Nav by Eric Porter (@EricPorter) on CodePen. 슬라이드 네비게이션
클릭하면 나오는 서브 메뉴 스타일 See the Pen #CodepenChallenge Navigation: Responsive Glassy Navbar with ReactJS by Takane Ichinose (@takaneichinose) 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 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 Dropdown menu by Grzegorz Witczak (@Wujek_Greg) on CodePen. 가장 기본적인 드롭다운 메뉴 스타일
마우스 오버하면 라인 생기는 메뉴 애니메이션 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 Select dropdown (Light & Dark) by Aaron Iker (@aaroniker) on CodePen. 두가지 스타일의 셀렉트 메뉴 애니메이션