HTML 및 CSS의 35 가지 메뉴

이 일련의 기사에서 lCSS, HTML 및 JavaScript 코드의 선택된보기, 우리는 일반적으로 텍스트 효과, 화살표, 헤더 또는 당사 웹 사이트의 디자인을 강조하여 방문자에게 제공하는 콘텐츠에 더 우아하거나 가치를 더할 수있는 슬라이더.

이번에는 애니메이션을 적용 할 수있는 HTML 및 CSS의 메뉴 사용자를 전자 상거래, 블로그 등의 가장 중요한 부분으로 안내 할 수있는 중요한 요소. 우리는 그들과 함께 양질의 터치를 추구하고 가능한 한 UI 디자인 표준에 부합하는 사이트를 제공합니다.

아코디언 메뉴 슬라이드

Un 슬라이드 메뉴 또는 햄버거 사이드 메뉴 미니멀 한 터치와 훌륭한 효과를 지닌 우아한 애니메이션으로 구성되어 있습니다.

관련 기사 :

놓칠 수없는 9 가지 사이드 바 CSS 메뉴

Swanky Pure CSS 드롭 다운

Swanky Lil 드롭다운 마누 V2.0 es 메뉴 잘 완성 된 순수 CSS 사용자 인터페이스에 JavaScript 코드가 전혀 없다는 부가 가치가 있습니다. 훌륭한 우아함을 발견하기 위해 단순히 결합이 우수합니다.

아코디언 메뉴

이 아코디언 메뉴 es 아주 간단 HTML, JS 및 CSS를 사용하여 이전 두 가지와 비교하면.

관련 기사 :

웹 사이트를 개선하기위한 16 개의 계단식 CSS 메뉴

jQuery 및 CSS3가있는 수직 메뉴

Un jQuery 및 CSS3가있는 수직 메뉴 de 앱에 대한 훌륭한 터치 또는 웹 사이트. 미니멀 한 그림자가있는 모든 종류의 전환 및 그라디언트.

원형 메뉴

Un 원형 메뉴 de 실험적 탐색 기술 웹 사이트에서 완벽하게 작동합니다. 의심 할 여지없이 SVG와 GreenSock 애니메이션 플랫폼으로 제작되었습니다.

방사형 메뉴

다른 방사형 메뉴 실험적 게임용 페이지에 완벽하게 유효합니다.

원형 CSS HTML 메뉴

Un 원형 메뉴 CSS HTML 옆으로 배치하고 원형으로 열립니다 훌륭한 사용자 경험을 제공합니다.

링 메뉴 개념

이 일에 링 메뉴 그들 링크 위치 각각의 위에 다른 반지를 만듭니다.

꽃 팝업 메뉴

기타 특정 팝업 메뉴 훌륭한 효과를내는 매우 잘 적용된 애니메이션으로.

재귀 적 호버 탐색

재귀 적 호버 탐색 하는 고품질 드롭 다운 메뉴 웹 콘텐츠의 구조를 완벽하게 나타내는 애니메이션입니다.

드롭 다운 탐색

Un 메뉴 드롭 다운 탐색 인터페이스 디자인에 다른 힌트가 있지만 이전 것과 유사합니다.

순수 CSS 드롭 다운 메뉴

다른 CSS의 품질 드롭 다운 메뉴 현재 UI 디자인 표준을 따릅니다.

반응이 빠르고 간단한 메뉴

A 전체 화면,이 반응이 빠르고 간단한 메뉴 HTML5 및 CSS3에서는 Internet Explorer 11과 호환됩니다.

SVG의 전체 화면 메뉴

Un SVG의 전체 화면 메뉴 햄버거 옆에 ​​놓아두면 눈길을 사로 잡습니다.

메가 메뉴 CSS

Un CSS 및 HTML의 메가 메뉴 현대적이고 미니멀 한 스타일로 보이는 것과는 다릅니다.

또 다른 메뉴 개념

또 다른 메뉴 개념 다음과 같은 경우 이상적인 옵션입니다. 당신은 다른 독창적 인 메뉴를 찾고 있습니다이것은 아이콘의 사용자 지정 메뉴와 정교하게 제작 된 애니메이션 덕분에 아주 좋습니다.

머티리얼 디자인 메뉴

머티리얼 디자인 메뉴 이다 Google의 디자인 언어를 기반으로합니다. 

버거 모바일 메뉴

Un 햄버거 메뉴 모바일 최적화 HTML, CSS 및 JavaScript로 수행됩니다.

Velocity.js 전체 화면 Flexbox

Velocity.js 전체 화면 Flexbox 메뉴입니다 달성 한 효과의 엄청난 품질 거의 독특한 사용자 경험을 제공합니다. velocity.js가있는 전체 화면 플렉스 박스.

전체 페이지 오프 캔버스

전체 페이지 오프 캔버스 디스플레이에 완벽하게 작동하는 전체 화면 고품질 메뉴입니다. 웹 사이트를 고안하는 방법 그 가치로.

호버 메뉴 라인 효과

Un 호버 메뉴 간단한 선 효과 아주 좋아요.

CSS 클립 경로 메뉴 개념

또 다른 개념 클립 경로가있는 메뉴 호기심 많은 호버와 일부 애니메이션 카테고리로 구성됩니다.

취소 선 호버

취소 선 호버 다른 메뉴 야 호기심 많은 링크를 가리키면 결과.

Lavalamp CSS 메뉴

Lavalamp CSS 메뉴 포함 각 링크에 대한 호버 애니메이션 역동성에 적합합니다.

탐색 슬라이더

Un 탐색 슬라이더 각 링크로 스크롤됩니다. 붉은 색조와 훌륭한 결과의 잘 관리 된 애니메이션으로 구별됩니다.

모바일 메뉴 탐색

Un 버거 메뉴 탐색 모바일 장치를 겨냥한 큰 효과의

iPhone X 모바일 메뉴 개념

Un iPhone X 용으로 설계된 메뉴 웹 사이트에 Apple 전화의 디자인과 일치하는 품질을 제공 할 수 있습니다.

모바일 용 하위 메뉴 펼치기

모바일 용 하위 메뉴 펼치기 를 위해 설계되었습니다 우아한 애니메이션이있는 바닥 글 매우 적합한 변위입니다. 앱 또는 웹 사이트의 모바일 인터페이스를위한 모든 수준의 우아함.

애니메이션 모바일 내비게이션

다른 모바일 용 애니메이션 메뉴 멋진 시각적 결과를 제공하는 원형 애니메이션 배경이 있습니다.

스크롤 및 호버 효과가있는 메뉴

다른 다른 메뉴에 큰 효과 그리고 기발합니다. 동쪽 스크롤 및 호버 효과가있는 메뉴 레스토랑, 리뷰 등에 적합합니다.

모바일 필터 메뉴

Un 필터 메뉴 모바일 웹 버전으로 변환되고 모바일을 목표로합니다.

캔버스 외부 탐색

캔버스 외부 탐색 메뉴입니다 전환 및 탐색 실험 매우 최신입니다. 놀랄만 한 새로운 것을 찾고 있다면, 그들의 레벨이이 목록에서 최고입니다.

CSS 숨겨진 사이드 메뉴

Un CSS의 사이드 메뉴 숨겨진 것 햄버거 아이콘과 함께 나타납니다.

고정 탐색 사이드 바

용도 flexbox 대신 부트 스트랩 IE9 / 10을 지원합니다. 그것의 또 다른 훌륭한 메뉴 고정 탐색 사이드 바 그 개념에서.

모핑 탭

모핑 탭 메뉴 야 누를 때 발생하는 드롭 다운 메인 탭 버튼에서.