맞춤형 선택 패널

Webflow는 탐색 모음이나 웹페이지의 모든 섹션에 쉽게 배치할 수 있는 미리 만들어진 선택 기능을 제공합니다. 이를 통해 사용자 정의 선택 패널을 신속하게 제작할 수 있습니다.

그럼에도 불구하고 선택 패널을 구성하고 스타일을 지정하고 처리하는 데 더 많은 권한을 원하는 사람들을 위해 이 튜토리얼은 개인화된 선택 패널을 구축하는 과정을 안내합니다!

전제 조건

• 활용하실 거에요 블록 요소 개인화된 선택 구성요소를 제작하기 위해
• 일부를 삽입하게 됩니다. 앵커 요소 선택 콘텐츠 컨테이너 내부
• 당신도 고용할 거예요 행위 선택 패널이 작동하도록 활성화 - 활성화 시 열기 및 닫기

이 튜토리얼 전체에서

맞춤형 선택 패널을 만들려면 다음을 수행합니다.

1. 선택 컨테이너 설정
2. 선택 트리거 개발
3. 선택 콘텐츠 컨테이너 구성
4. 선택 패널을 전환하는 작업을 시작합니다.

선택 컨테이너 설정

1. 이니셜을 통합하세요 블록 요소 ~로부터 요소 추가 부분.
2. 할당 수업 이름. 이것을 "선택 래퍼"라고 합니다.
3. 지정 너비 치수
4. 조정하다 위치 에게: 상대적인 — 이는 곧 출시될 "선택 콘텐츠" 컨테이너의 절대적인 위치 지정을 용이하게 합니다.

더 발견하다: 포지셔닝에 대한 통찰력

디자인 제안
고정 너비를 설정할 때 최대 너비를 100% 이하로 제한하십시오. 이렇게 하면 작은 장치에서 요소가 너비를 초과하는 것을 방지할 수 있습니다. 반대로 너비를 100%로 설정하고 최대 너비를 500px 또는 1200px와 같은 특정 값으로 설정할 수 있습니다. 이렇게 하면 큰 화면에서 텍스트 줄이 늘어나거나 이미지가 원래 선명도를 뛰어넘지 않습니다.

선택 트리거 개발

1. 초 삽입 블록 요소 선택 래퍼 내부에서 이 작업을 수행합니다. 항해자 선택 래퍼에 캔버스 높이가 부족하기 때문입니다.
2. 적용하다 수업 이 블록 요소에. 우리는 이를 "선택 트리거"라고 명명했습니다.
3. 드롭 텍스트 요소 선택 트리거에 들어갑니다. 텍스트를 수정하려면 두 번 클릭하세요.
4. 다음과 같은 스타일을 추가하세요. 배경 그늘 (또는 패턴이나 그라데이션)을 선택 트리거 블록 요소에 추가
5. 일부를 추가하여 텍스트에 간격을 제공하세요. 심

구조적 힌트
선택 트리거에 다양한 콘텐츠를 포함할 수 있습니다. 비워 둘 수도 있습니다. 예를 들어 닫기를 나타내는 아이콘이나 다른 텍스트 요소를 삽입할 수 있습니다.

호버 상태를 구체화하고 트리거의 커서 모양을 변경합니다.

당신은 강화할 수 있습니다 호버 상태 사용자가 마우스를 올리면 클릭하도록 유도하는 선택 트리거입니다.

더 알아보기: 스타일화 상태

아마도 선택 항목을 가리킬 때 일반적인 마우스 커서가 이상해 보인다고 생각할 수도 있습니다. 수정하도록 선택할 수 있습니다. 커서의 종류 트리거 블록 요소 내에서 사용됩니다. 링크의 경우 일반적으로 포인터 커서가 선호됩니다. 또는 커서 유형을 선택할 수 있습니다.

더 알아보기: 포인터

선택 콘텐츠 컨테이너 위조

1. 새로 삽입하세요. 블록 요소 선택 래퍼 내에서 바로 선택 트리거 아래에 배치합니다.
2. 정의하다 수업 명명된 드롭다운 콘텐츠
3. 보장 위치는 절대적이다 — 선택 항목이 페이지의 다른 콘텐츠를 대체하는 것을 방지합니다.
4. 설정 너비를 100%까지 선택 래퍼 내에서 접근 가능한 모든 공간을 차지합니다.
5. 설정 숨김으로 오버플로 — 이는 나중에 작업을 설정할 때 유익한 것으로 입증되었습니다.
6. 포함 배경 그늘 만약 원한다면

더 알아보기: 과다

콘텐츠 통합

내용은 다를 수 있습니다. 여기에는 몇 가지 앵커 요소가 통합됩니다.

1. 드레이프 앵커 요소 패널에서 선택 콘텐츠 컨테이너 내에 배치하세요.
2. 속성 수업 앵커 요소에. 우리는 이를 "드롭다운 링크"라고 표시하지만 원하는 이름을 삽입할 수 있습니다.
3. 조정하다 차단할 표시 설정 선택 콘텐츠 컨테이너의 전체 너비를 채우려면
4. 유니폼 적용 심 Shift 키를 누른 채 드래그하여 네 면 모두에서
5. 삽입하다 텍스트 요소 앵커 요소에
6. 복제 앵커 요소 선택한 항목의 필수 링크에 맞게 여러 번 붙여넣습니다.
7. 각각 더블클릭 텍스트 요소 모든 선택 링크의 이름을 바꾸려면
8. 닻 관련 리소스에 대한 각 앵커 요소

인용하다: 다양한 링크 요소에 대한 링크 설정 구성에 대한 가이드

링크 텍스트 사용자 정의

링크는 스타일을 상속받습니다. 모든 링크 꼬리표. 따라서 앵커 요소 내에 중첩된 텍스트 요소를 수정해도 모든 링크 텍스트 스타일. 앵커 요소 내의 텍스트 스타일을 지정하려면 앵커 요소 자체의 글꼴 스타일을 지정해야 합니다.

1. 선택 앵커 요소 (드롭다운 링크)
2. 변경 텍스트 색상
3. 제거 밑줄(텍스트 장식)을 없음으로 설정 링크 밑줄을 없애려면

추가 통찰력 발굴

• 텍스트 스타일 상속
• HTML 태그

선택을 전환하는 작업 설정

마우스 클릭(또는 탭) 시 발생하는 지정된 요소 선택 시 트리거되는 동작을 만듭니다. 이것을 구성하려면:

1. 선택 트리거 선택
2. 작업을 시작합니다: 요소 트리거: 마우스 클릭(탭)

그러나 클릭하는 대신 마우스를 올려 선택 패널을 전환하고 싶습니다.

앞으로 나올 애니메이션은 동일하지만 이 시점에서는 선택 래퍼 그리고 선택 요소 트리거: 마우스 호버. 이어서 다음 단계를 진행하세요.

선택을 공개하세요

1. 아래에 첫 번째 클릭 시 (또는 호버에), 새로운 설정 생기. 선택 항목 이름을 open으로 지정합니다.
2. 선택 콘텐츠 블록 요소를 선택하세요.
3. 이니셜을 시작하다 애니메이션 액션: 크기
4. 설정 높이를 0으로(0px). 오버플로가 선택 내용에 숨겨져 있으면 눈에 띄지 않게 사라집니다.
5. 이것을 초기 상태 페이지 로드 시 선택 내용이 표시되는 것을 방지하기 위해
6. 후속 생성 애니메이션 액션: 크기
7. 지정하다 높이를 자동으로 — 해당 필드에 "auto"를 수동으로 입력하고 Enter 키를 누르세요. 또는 필드에 인접한 장치를 탭하고 장치 목록에서 자동을 선택합니다.

선택 항목 숨기기

1. 아래에 두 번째 클릭 시 (또는 호버아웃할 때), 새로운 시간 제한을 통합 생기. 선택 닫기로 라벨을 지정하세요.
2. 선택 내용을 선택하세요
3. 공식화 애니메이션 액션: 크기
4. 되돌리기 키 돌아가다 0픽셀

이해하는데 필수
애니메이션 동작의 여유와 지속 시간을 조정하여 선택 토글 중에 독특한 애니메이션을 만들 수 있습니다. 

‍

앞으로 나아가다

이제 개인화된 선택 패널을 만드는 방법을 이해했으므로 이 접근 방식을 확장하여 다음과 같은 보다 정교한 요소를 만들 수 있습니다. 확장 모듈 FAQ에 이상적.

참고자료

• 확장 모듈 세우기
• 대화형 선택 화살표 설정