Bubble
Share
Explore
Bubble

Sidebar Menu

​
BJ
Banghyun Joo
슬라이드바 메뉴 플러그인 사용 방법 | 버블 퀵팁 - YouTube
⁠
⁠
트랜스크립트:
이 빠른 팁에서는 버블로 만든 플러그인 슬라이드 바 메뉴에 대해 알아볼 것입니다. 슬라이드 바 메뉴를 사용하면 페이지의 왼쪽 또는 오른쪽에 세로 메뉴를 트리거하는 햄버거 아이콘을 추가 할 수 있습니다. 이것은 모바일 레이아웃에서 메뉴를 표시하기 위해 가장 일반적으로 사용됩니다. 플러그인 탭에서 슬라이드 바 메뉴를 설치 한 다음 디자인 탭을 살펴보면 여기에 사용할 새로운 시각적 요소가 있습니다. 다른 요소와 마찬가지로 슬라이드 바 메뉴를 페이지에 그리고이 메뉴 옵션을 사용자 지정할 수 있습니다.
메뉴가 표시됩니다. 이를 위해 각 옵션을 새 줄에 텍스트로 작성합니다. 이것을 미리 보면 슬라이드 바 메뉴를 볼 수 있고 클릭하면 옵션이 표시됩니다. 그런 다음 텍스트를 슬라이드 바 메뉴 옵션과 일치시켜 텍스트 자체에 따라 각 메뉴 항목에서 워크 플로를 트리거 할 수 있습니다. 이 텍스트는 동적 일 수 있으므로 슬라이드 바 메뉴 옵션을 비교하여 워크 플로를 트리거 할 때 옵션이 텍스트의 정확한 대소 문자와 일치해야 성공적으로 트리거 할 수 있으므로주의하세요.
한 번에 하나의 슬라이드 막대 메뉴만 트리거할 수 있지만 속성 편집기 내에서 슬라이드 막대 메뉴의 모양과 느낌을 완전히 사용자 지정할 수 있습니다. 원하는 경우 햄버거 아이콘을 제거하고 배경 이미지로 바꿀 수도 있습니다. 슬라이드 막대 메뉴는 처음부터 만들지 않고도 메뉴 옵션을 숨기고 표시 할 수있는 유연성을 제공합니다. 자세한 내용은 거품 확인을 확인하십시오.
⁠
슬라이더 메뉴 플러그인은 화면 오른쪽 또는 왼쪽에 슬라이딩 효과로 나타나는 메뉴를 삽입하는 요소를 만듭니다. 일반적으로 모바일 장치의 앱에 사용됩니다.
참고: 이러한 요소는 한 페이지에 하나만 포함될 수 있습니다.
Slidebar Menu
Options
메뉴에서 제공해야 하는 옵션을 입력합니다. 한 줄에 하나의 항목을 입력하고 각 옵션 사이에 Enter 키를 누릅니다. 사용자가 옵션을 누르면 이벤트가 트리거되고 워크플로가 실행됩니다. '요소의 현재 옵션'에 액세스하여 사용자가 누른 옵션을 참조하세요.
Opening side
메뉴가 표시될 방향을 왼쪽 또는 오른쪽 중 선택합니다.
Show an icon
닫을 때 메뉴에 표준 아이콘을 사용하려면 이 확인란을 선택합니다. 사용자 지정 이미지를 선택하려면 이 확인란을 선택 취소하고 배경 스타일에서 이미지를 선택한 다음 이미지를 업로드합니다.

Icon color

아이콘의 색상을 선택합니다.

Menu width

메뉴가 열렸을 때 메뉴의 너비를 픽셀 단위로 입력합니다.
Distance from top
메뉴가 브라우저 창 상단에 닿지 않게 하려면 창 상단과 메뉴 사이의 거리를 픽셀 단위로 설정합니다.

Background color

메뉴가 열려 있을 때 메뉴 배경에 사용할 색상을 선택합니다.
Option hover color
사용자가 옵션 위로 마우스를 가져가거나 클릭할 때 사용할 색상을 선택합니다.

Font

선택한 요소에 적용할 글꼴 패밀리를 선택합니다. Google 글꼴 라이브러리에 있는 수백 개의 글꼴 중에서 선택하세요.
Font size 메뉴 옵션의 글꼴 크기(픽셀)를 선택합니다.
Menu font color
메뉴가 열려 있을 때 항목의 색상을 선택합니다.

Shadow offset

그림자의 오프셋을 픽셀 단위로 선택합니다. 0으로 설정하면 그림자가 생기지 않습니다.

Blur Radius

흐림 거리를 픽셀 단위로 정의합니다. 숫자가 클수록 그림자가 더 흐릿해지고, 숫자가 작을수록 그림자가 더 선명해집니다.
참고: 이 옵션은 그림자 오프셋이 0보다 클 때 사용할 수 있습니다.

Shadow Color

그림자의 색상을 선택합니다.
참고: 이 옵션은 그림자 오프셋이 0보다 큰 경우에 사용할 수 있습니다..

A slidebar menu's option is clicked

이 이벤트는 사용자가 옵션을 선택하면 트리거됩니다. '이 슬라이드바 메뉴의 현재 옵션'이라는 표현식을 사용하여 선택한 옵션을 찾습니다. 종종 이벤트의 조건에서 현재 옵션의 내용을 사용하여 각 경우에 적절한 작업을 실행합니다.

Setup

슬라이드 모음 메뉴를 추가한 후에는 옵션 목록을 정의할 수 있습니다. 예를 들어 정보 또는 FAQ 섹션과 같이 페이지에 표시하려는 콘텐츠의 다양한 카테고리를 정의할 수 있습니다. 이 예에서는 간단하게 하기 위해 옵션 1부터 4까지의 목록을 사용하겠습니다.
⁠
image.png
⁠
⁠
이제 이러한 옵션 중 하나를 클릭할 때를 위한 워크플로를 시작할 수 있습니다. 이 페이지에 그룹이 있고 선택한 옵션에 따라 그룹 콘텐츠를 변경하고 싶다고 가정해 보겠습니다. 이 경우 '그룹에 데이터 표시'를 클릭하고 현재 옵션을 표시할 데이터로 선택할 수 있습니다.
⁠
image.png
⁠
⁠
페이지를 미리 보고 '옵션 1'을 클릭하면 선택한 그룹에 옵션 1의 정보가 표시됩니다.
⁠
image.png
⁠
⁠
자세한 내용을 알아보려면 동적 옵션으로 설정하는 방법에 대한 아카데미 동영상을 참조하세요.
⁠
⁠
⁠

트랜스크립트: 이 빠른 팁에서는 슬라이드 막대 메뉴에 목록을 동적으로 표시하는 방법을 배우려고합니다. 슬라이드 막대 메뉴를 사용하는 방법에 대한 빠른 팁을 보지 못했다면 슬라이드 막대 메뉴 속성 편집기의 아래 설명에서 확인할 수 있습니다. 메뉴 옵션 영역이 있지만 각 옵션을 정적 목록으로 작성할 수 있지만 슬라이드 막대 메뉴가 작동하려면 동적 목록이 더 나은 경우가 있습니다. 각 옵션은 새 줄에 있어야하므로 동적 텍스트로 표시하려면 먼저 목록 인 데이터 소스를 작성해야합니다. 예를 들어 옵션 세트를 사용하여 검색을 수행 할 수도 있지만이 방법은 두 가지 방법으로 모두 작동합니다. 여기에는 메뉴 옵션 목록이있는 옵션 세트가 있습니다. 슬라이드 바 메뉴에서 옵션 세트를 검색하고 모든 옵션을 가져 오면 슬라이드 바 메뉴를 미리 보면 모든 옵션이 표시됩니다. 슬라이드 바 메뉴가 목록의 각 항목을 자체 옵션으로 표시하기를 원하는 것이 아닌 하나의 개별 버튼으로 설정된 옵션에서 각 옵션을 새 줄에 표시해야합니다. 이렇게하려면 조인 연산자를 사용하여이 표현식에 추가 할 수 있습니다. 이 연산자는 목록을보고 목록의 각 요소를 우리가 지정한 항목으로 조인합니다. 이 경우 각 옵션이 새 줄에 있어야하므로 다음을 지정합니다. 이제 줄 바꿈을 작성하면 슬라이드 바 메뉴를 미리 보면 각 옵션이 개별적으로 표시됩니다. 이것은 문자 그대로 엔터 키를 눌러 구분 기호에 새 줄을 만드는 텍스트 연산자로 형식을 사용하여 수행 할 수도 있으므로 필요에 가장 적합한 표현식을 선택하는 것은 사용자에게 달려 있습니다. 이제 각 옵션을 중심으로 워크 플로를 만들고 동적으로 수행 할 수도 있습니다. 자세한 내용은 버블을 확인하십시오.

Gallery
Share
 
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.