메인 페이지: 방향

메뉴바는 귀하의 웹사이트에서 손님이 처음 접하게 되는 것 중 하나입니다. 매력적이고 클릭 가능한 연결을 사용하여 방문자 참여에 동기를 부여하고 메뉴 표시줄을 원하는 대로 사용자 정의하고 수정할 수 있는 재사용 가능한 기호로 변환하여 다가오는 자신을 배려하십시오. 

이 세션에서는 다음을 사용하여 메뉴 표시줄을 만드는 방법을 알아봅니다.

1. 메뉴바 통합
2. 메뉴 표시줄 스타일 향상
3. 메뉴 표시줄을 기호로 변환

우리와 함께 하세요. 자원을 획득하다 이 튜토리얼에서는. 

메뉴바 통합

우리는 메뉴바r 메인 페이지 정상에서: 

1. 액세스 항해자
2. 잠금을 해제 패널 통합
3. 로 이동 구성요소
4. 드래그 메뉴바 로 항해자 그리고 그 아래에 위치를 잡아주세요 몸

‍

그만큼 메뉴바 구성 요소는 다음을 포함하여 특정 기본 구성 요소와 함께 도착합니다. 컨테이너.

이전 메인 페이지 영웅 섹션 튜토리얼에서는 독립적인 섹션을 만들었습니다. 컨테이너 에 위치 부분. 우리는 가장 높은 너비를 지정했습니다. 컨테이너 1200픽셀로 자동으로 "컨테이너" 클래스를 생성합니다. 

"Container" 클래스를 재활용해 보겠습니다. 메뉴바 기본 컨테이너 또한 이전에 설정한 1200픽셀 최대 너비의 이점을 누릴 수 있습니다. 

1. 다음을 선택하세요. 메뉴바 컨테이너
2. 팝업 디자인 패널
3. 들어가다 식별자 필드
4. 에서 '컨테이너'를 선택하세요. 현재 수업

주목: 요소에 클래스를 할당하면 이 요소에 대한 모든 스타일 수정 사항이 이 클래스에 유지됩니다. 새로운 요소에 클래스를 재사용하여 생성한 클래스에 보존된 스타일을 자동으로 배포할 수 있습니다. 

메뉴 표시줄 강화

배경 음영을 수정해 보겠습니다. 메뉴바 우리 디자인과 더욱 조화롭게 조화를 이루도록 돕기 위해:

1. 선택 메뉴바
2. 밝히다 디자인 패널 > 배경
3. 색상 팔레트 실행
4. 검정색을 선택하세요

배경 음영 변경 메뉴바 검은색으로 인해 우리는 메뉴바 연결이 배경과 합쳐져 불분명해집니다. 로고를 로고에 포함시킨 후 이를 수정하겠습니다. 메뉴바: 

1. 실행 리소스 패널
2. 브랜드에 로고를 넣습니다. 링크 블록

로고를 축소해 보겠습니다.

1. 로고를 선택하세요 그림
2. 모서리 고정 중 하나를 잡고 196 x 28 픽셀로 이동합니다.

또한 로고를 중앙에 배치하고 패딩을 포함하여 클릭 가능한 공간을 확장해 보겠습니다.

1. 브랜드를 선택하세요 링크 블록
2. 밝히다 디자인 패널 > 간격
3. 상단과 하단을 통합하세요. 심 16픽셀 중

주목: 길게 누르면 요소의 반대쪽에 여백이나 패딩을 신속하게 추가할 수 있습니다. 옵션 (Mac의 경우) 또는 Alt (Windows의 경우) 다음 중 하나를 이동합니다. 여유 또는 심 규제 기관. 

스타일을 지정해 보겠습니다. 메뉴 연결 검은색 배경에서 눈에 띄게 보이도록 하려면: 

1. 선택하세요 메뉴 연결
2. 확장하다 디자인 패널 > 타이포그래피
3. 을 치다 색상 팔레트 색상을 흰색으로 지정하고

모든 항목에서 이러한 변경 사항(및 후속 수정 사항)을 실행하려면 메뉴 연결, 모든 항목에 "메뉴 연결" 클래스를 포함합니다. 메뉴 연결 에서 메뉴바:

1. 다음을 선택하세요 메뉴 연결 에서 메뉴바
2. 들어가다 식별자 필드
3. 에서 "메뉴 연결"을 선택하세요. 현재 수업
4. 1번의 여유를 위해 이 단계를 다시 실행하세요. 메뉴 연결

주목: 요소에 부적절한 클래스를 사용하는 경우 언제든지 요소에서 클래스를 지울 수 있습니다. 식별자 필드을 선택하고 다음에서 올바른 클래스를 선택하세요. 현재 수업 쓰러지 다. 수업에 대한 더 많은 통찰력을 얻으세요. 

부여하자 메뉴 연결 여백을 조정하여 서로 간의 거리를 조금 더 넓힙니다.