Webflow에서 모바일 메뉴를 편집하는 방법

간단하고 직관적인 내비게이션 메뉴는 웹사이트에서 가장 필수적인 디자인 요소 중 하나입니다. 방문자를 홈페이지 너머로 안내하는 지도와 같은 역할을 합니다. 모바일 장치에서 인터넷을 사용하는 사람들이 증가함에 따라 웹 사이트에는 모바일 친화적인 탐색 메뉴도 있어야 합니다.

다행스럽게도 Webflow는 모바일 사이트를 능률화할 접을 수 있는 햄버거 메뉴 표시줄을 쉽게 추가할 수 있도록 했습니다. Webflow에서 이 모바일 메뉴를 편집하는 방법을 알아보려면 계속 읽으십시오.

탐색 모음을 추가하는 방법

햄버거 메뉴는 제한된 수평 공간에서 작업할 때 중요한 디자인 요소입니다. 귀중한 공간을 차지하는 부피가 큰 고정 내비게이션 바가 필요하지 않습니다.

Webflow에서 이 메뉴와 해당 기능은 NavBar 요소 내에 내장되어 있습니다. 디자인에 이 요소를 추가하려면 네 가지 간단한 단계가 필요합니다.

1. 왼쪽 패널 상단의 "+" 아이콘을 탭하여 "추가" 패널을 엽니다.
   
2. "구성 요소" 섹션까지 아래로 스크롤합니다.
   
3. "NavBar" 요소를 길게 클릭합니다.
   
4. 요소를 페이지 헤더로 드래그합니다.
   

모바일 메뉴 편집 방법

웹 사이트에 탐색 모음을 추가한 후 이 메뉴에 스타일과 개성을 추가할 수 있는 여러 가지 방법이 있습니다.

메뉴에 더 많은 링크를 추가하는 방법

내비게이션 바 요소에는 메뉴 버튼과 내비게이션 메뉴가 포함되어 있으며, 내비게이션 링크는 후자에 있습니다. 디자인에 추가하면 웹 사이트 링크로 삭제하거나 편집할 수 있는 여러 링크 자리 표시자가 있습니다.

더 많은 탐색 링크를 추가하려면 다음 단계를 따르십시오.

1. NavBar 내부의 요소를 클릭합니다.
   
2. 오른쪽의 "요소 설정" 패널로 이동합니다.
   
3. 기어 아이콘을 눌러 "설정"을 엽니다.
   
4. "NavBar 설정" 섹션으로 스크롤합니다.
   
5. "링크 추가" 버튼을 탭합니다.
   

모든 관련 웹사이트 페이지에 대한 충분한 수의 링크가 있으므로 이제 실제 링크를 수행할 차례입니다.

1. 탐색 링크를 선택합니다.
2. "요소 설정" 패널로 이동합니다.
   
3. "링크 설정" 섹션을 찾습니다.
   
4. "URL" 필드에 지정된 웹페이지 URL을 입력합니다.
   

메뉴 애니메이션 변경 방법

Webflow에서는 방문자가 메뉴 버튼을 클릭할 때 모바일 메뉴가 표시되는 방식을 변경할 수도 있습니다. 이러한 표시 애니메이션의 세 가지 유형 중에서 선택할 수 있습니다.

• 드롭다운 – 기본적으로 방문자가 메뉴 버튼을 탭하면 모바일 메뉴가 NavBar에서 드롭다운됩니다. 브라우저 창의 전체 너비를 차지합니다.
• Over Right – 이 공개 애니메이션을 선택하면 모바일 메뉴가 화면 오른쪽에서 나타납니다. 이 메뉴는 전체 브라우저 창 높이를 차지합니다.
• Over Left – 이 메뉴 유형은 탐색 메뉴가 화면 왼쪽에서 이동한다는 점을 제외하면 Over Right와 동일합니다.

원하는 공개 애니메이션을 설정하려면 다음을 수행하십시오.

1. NavBar 내부의 요소를 선택합니다.
   
2. 화면 오른쪽에 있는 "요소 설정" 패널로 이동합니다.
   
3. 톱니바퀴 아이콘을 탭하여 "설정"을 시작합니다.
   
4. "NavBar 설정" 섹션으로 이동합니다.
   
5. "유형"옵션을 클릭하십시오.
   
6. 드롭다운 메뉴에서 원하는 스타일을 선택합니다.
   

"NavBar 설정" 섹션에서 다음을 제어할 수도 있습니다.

• easing open: 열린 전환 애니메이션에 사용되는 곡선 유형입니다.
• easing close: 닫기 전환 애니메이션에 사용되는 곡선 유형입니다.
• 기간: 메뉴가 표시되는 데 걸리는 시간입니다.

전환 기간은 밀리초 단위로 측정됩니다.

메뉴 스타일 변경 방법

Webflow를 사용하면 내비게이션 바의 모든 부분에 쉽게 스타일을 지정할 수 있으므로 모바일 메뉴를 웹사이트 디자인에 매끄럽게 맞출 수 있습니다.

메뉴 버튼의 스타일을 지정하려면 다음을 수행하십시오.

1. 메뉴 버튼을 선택합니다.
   
2. 오른쪽의 "스타일" 패널(브러시 아이콘)로 이동합니다.
   

스타일 패널을 사용하면 메뉴 버튼의 모든 측면을 변경할 수 있습니다. 가장 일반적으로 디자이너는 버튼의 배경색과 크기를 변경합니다.

배경색을 변경하려면 다음을 수행하십시오.

1. "배경" 섹션으로 이동합니다.
   
2. 색상 드롭 아이콘을 탭하여 "색상 피커"를 엽니다.
   
3. 원하는 색상을 선택합니다.
   

햄버거 아이콘의 크기를 변경하려면 다음 단계를 따르세요.

1. "타이포그래피" 섹션으로 이동합니다.
   
2. "Aa" 필드의 아이콘 크기를 늘리거나 줄입니다.
   

위의 필드에서 문자 A와 색상 드롭으로 표시된 아이콘의 색상을 변경할 수도 있습니다.

메뉴 버튼을 사용자 지정하는 방법은 여러 가지가 있지만 텍스트 요소나 사용자 지정 이미지로 바꿀 수는 없습니다.

간편한 모바일 내비게이션

모바일 메뉴를 디자인할 때 상당히 제한된 공간을 최대한 활용하고 싶을 것입니다. 따라서 방문자에게 혼란을 주지 않도록 메뉴에 옵션이 넘치지 않도록 하십시오. 또한 메뉴 선택 항목이 짧고 명확하며 쉽게 읽을 수 있도록 하십시오.

그런 다음 메뉴 스타일과 애니메이션을 사용하여 모든 단계에서 방문자의 관심을 끌 수 있습니다.

웹사이트에 모바일 메뉴를 추가해 보셨나요? 얼마나 많은 옵션을 포함시켰습니까? 아래 의견란에 알려주십시오.