메뉴 공개 페이지 페이지로 회전합니다 애니메이션

웹 사이트 메뉴 디자인 방법은 다양합니다. 일부 메뉴는 항상 보이고 모든 옵션이 직접 표시됩니다. 다른 사람들은 숨겨져 있고 확장하려면 클릭해야합니다. 숨겨진 메뉴가 확장되는 방식은 다릅니다. 일부는 슬라이드 아웃 및 커버 컨텐츠, 일부는 컨텐츠를 밀고 일부는 전체 화면 디스플레이를 사용합니다.

각 방법에는 장점과 단점이 있으며 최상의 선택은 특정 응용 프로그램 시나리오에 따라 다릅니다. 나는 개인적으로 슬라이드 아웃 메뉴를 선호하며 모든 상황이 적용되는 것은 아닙니다. 그러나 공간 절약 및 접근하기 쉬운 메뉴가 필요한 경우 슬라이드 아웃 메뉴를 능가하기 어렵습니다.

그러나 슬라이드 아웃 메뉴는 종종 페이지 컨텐츠와 충돌합니다. 최소한 내용을 차단하고 최악의 경우 UI에서 컨텐츠를 완전히 제거합니다.

고정 된 위치 메뉴의 내구성과 유용성을 결합한 다른 접근법과 현재 콘텐츠에서 사용자를 제거하지 않고 공간 절약 숨겨진 슬라이드 아웃 메뉴를 결합한 다른 접근법을 시도했습니다.

내 구현 방법은 다음과 같습니다.

스위치 스위치

우리는 두 상태 (온 및 닫기)가있는 메뉴를 구축하고 둘 사이를 전환하고 있습니다. 확인란 트릭이 작동하는 곳입니다. 체크 박스에는 두 가지 공통 대화식 상태 (체크 및 체크되지 않은 상태) (및 불확실한 상태)가있어 해당 상태를 트리거하는 데 사용할 수 있기 때문에 완벽합니다.

확인란은 메뉴 아이콘 아래에 숨겨져 있으며 CSS를 사용하여 배치되므로 사용자가 상호 작용하더라도 볼 수 없습니다. 확인란 (또는 Ahem , 메뉴 아이콘)을 선택하면 메뉴가 표시됩니다. 선택 취소는 그것을 숨 깁니다. 그렇게 간단합니다. 우리는 일을하기 위해 JavaScript조차 필요하지 않습니다!

물론, 확인란 트릭만이 유일한 방법이 아니며, JavaScript를 사용하여 클래스를 전환하여 메뉴를 열고 닫으려면 완전히 괜찮습니다.

중요한 것은 체크 박스가 소스 코드의 기본 내용보다 앞서 있어야합니다. 결국 형제 자매 선택기가 필요한 :checked 선택기를 작성하기 때문입니다. 이로 인해 레이아웃 문제가 발생하면 CSS 계산에 대한 장점을 활용할 수있는 방법과 같이 소스 코드 순서와 관련이 없으므로 레이아웃에 그리드 또는 Flexbox를 사용하십시오.

appearance CSS 속성을 사용하여 체크 박스의 기본 스타일 (브라우저에 추가)을 제거한 다음 메뉴 아이콘이있는 의사 요소를 추가하여 사용자가 확인란 블록을 볼 수 없도록하십시오.

먼저 기본 태그 :

<input type="checkbox" id="menu-toggle">
<div id="page">
  
</div>
<div id="menu">
  
</div>

확인란 트릭 및 메뉴 아이콘에 대한 기본 CSS :

 /* 확인란을 숨기고 스타일을 재설정하십시오*/
입력 [type = "checkbox"] {
  외관 : 초기; /* 삭제 상자*/
  국경 : 0; 여백 : 0; 개요 : 없음; /* 기본 마진, 경계 및 개요 제거*/
  너비 : 30px; 높이 : 30px; /* 메뉴 아이콘 크기 설정*/
  z- 인덱스 : 1; /* 상단에 있는지 확인하십시오*/
}

/* 메뉴 아이콘*/
입력 :: 후 {
  내용 : "\ 2255";
  디스플레이 : 블록;
  글꼴 : 25pt/30px "Georgia";
  텍스트 안정 : 10px;
  너비 : 100%; 높이 : 100%;
}

/* 페이지 콘텐츠 컨테이너*/
#Page {
  배경 : URL ( "Earbuds.jpg") #EBEBB CENTRE/COVER;
  너비 : 100%; 높이 : 100%;
}

또한 #page 컨텐츠 스타일을 추가했는데, 이는 전체 크기의 배경 이미지가 될 것입니다.

전환 효과

메뉴 컨트롤을 클릭하면 두 가지가 발생합니다. 먼저 메뉴 아이콘이 "×"마크로 변경되어 메뉴를 닫으려면 클릭 할 수 있음을 나타냅니다. 따라서 입력이 :checked 상태에있을 때, 우리는 확인란에 pseudo element를 입력 한 ::after 를 선택합니다.

 입력 : 확인 :: 이후 {
  내용 : "\ 00D7"; /* "×"태그*/로 변경
  색상 : #ebebeb;
}

둘째, 기본 내용 ( "헤드폰"이미지)이 변환되어 아래 메뉴를 표시합니다. 오른쪽으로 이동하고 회전하고 수축하며 왼쪽 코너가 각도가됩니다. 이것은 컨텐츠를 열린 문처럼 뒤로 밀리는 것처럼 보이게하는 것입니다.

 입력 : 확인 ~ #PAGE {
  클립 경로 : 다각형 (0 8%, 100%0, 100%100%, 0 92%);
  변환 : Translatex (40%) Rotatey (10deg) 스케일 (0.8);
  변형-오리진 : 오른쪽 중심;
  전환 : 모든 .3S 선형;
}

clip-path 사용하여 이미지 각도를 변경합니다.

우리는 변환에 전환을 적용하고 있기 때문에 #page 초기 clip-path 값이 필요하므로 전환 할 것이 있습니다. 또한 #page 에 전환을 추가하여 열릴 때 부드럽게 닫을 수 있습니다.

 #Page {
  배경 : URL ( "EARBUDS.JPEG") #EBEBEB 센터/커버;
  클립 경로 : 다각형 (0 0, 100% 0, 100% 100%, 0 100%);
  전환 : 모든 .3S 선형;
  너비 : 100%; 높이 : 100%;
}

우리는 기본적으로 핵심 디자인과 코드를 완료했습니다. 확인란이 확인되지 않은 경우 ( "×"마크를 클릭하여) 헤드셋 이미지의 변환이 자동으로 미개되고 중앙 위치로 다시 가져옵니다.

약간의 JavaScript

우리가 이미 원하는 것을 가지고 있더라도 사용자 경험을 향상시킬 것이 하나 더 있습니다. #page 요소를 클릭하거나 클릭 할 때 메뉴를 닫으십시오. 이런 식으로 사용자는 "×"태그를 보거나 사용하지 않고 콘텐츠를 반환 할 수 있습니다.

이것은 메뉴를 숨기는 또 다른 방법이므로 JavaScript를 사용할 수 있습니다. 어떤 이유로 JavaScript가 비활성화되면 어떻게됩니까? 중요하지 않습니다. 메뉴 없이는 메뉴가 작동하지 않는 향상 일뿐입니다.

 document.querySelector ( "#page"). addEventListener ( 'click', (e, checkbox = document.querySelector ( 'input')) => {
  if (checkbox.checked) {checkbox.checked = false; E.StopPropagation (); }
});

이 세 줄의 코드의 목적은 #page 요소에 클릭 이벤트 핸들러를 추가하는 것입니다. 확인란이 :checked 상태에 있으면 확인란을 선택 취소하여 메뉴를 닫으십시오.

우리는 수직/수직 설계를 위해 만든 데모를보고 있었지만 사용하는 내용에 따라 대형 스크린 크기로 잘 작동합니다.

이것은 단지 한 가지 방법이거나 일반적인 슬라이드 아웃 메뉴를 시도합니다. 애니메이션은 많은 가능성을 열어 주며 수십 가지 다른 아이디어를 가질 수도 있습니다. 사실, 나는 듣고 싶거나 더 나은 것을보고 싶습니다. 그래서 공유하십시오!

위 내용은 메뉴 공개 페이지 페이지로 회전합니다 애니메이션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!