Divi: 수직 탐색 메뉴를 만드는 방법

DIVI의 전경에 더 많은 항목을 표시하도록 수직 탐색 메뉴를 생성하시겠습니까?

수직 탐색 메뉴는 전경에 더 많은 메뉴 항목이 필요한 일부 웹사이트에 유용할 수 있습니다. 가로 메뉴는 특히 브라우저 너비가 작은 경우 필요한 모든 메뉴 링크에 맞추기가 까다로울 수 있습니다.

이 튜토리얼에서는 Divi 테마 빌더를 사용하여 세로 탐색 메뉴를 만드는 방법을 보여줍니다.

이렇게 하면 WordPress 메뉴 항목을 선보일 수 있는 더 많은 공간이 제공됩니다.

시작하자!

측량

이 튜토리얼에서 만들 디자인을 간단히 살펴보겠습니다.

튜토리얼로 가자.

새 글로벌 헤더 생성

이 튜토리얼에서는 Divi의 테마 빌더를 사용하여 전역 헤더에 수직 탐색 메뉴를 생성합니다.

시작하려면 WordPress 대시보드로 이동하여 Divi > Theme Builder로 이동합니다.

그런 다음 "전역 머리글 추가" 영역을 클릭하십시오. 웹 사이트 템플릿 기본값을 선택하고 드롭다운 목록에서 "전역 헤더 빌드"를 선택합니다.

읽기 : DIVI에서 테마 빌더로 전역 헤더를 만드는 방법

수직 단면 레이아웃 디자인

전역 머리글 레이아웃 편집기에서 이미 있는 일반 섹션 설정을 열고 다음을 업데이트합니다.

최대 너비: 300px
높이: 100vh

내부 여백: 4vh 상단, 0px 하단

다음과 같이 섀도우 상자를 추가하여 사용자 지정을 계속합니다.

섀도우 박스: 스크린샷 참조
상자 그림자 수직 위치: 0px
상자 그림자 흐림 강도: 20px
상자 그림자 확산 강도: -10px
그림자 색상: rgba(0,0,0,0.3)

사용자가 스크롤할 때 수직 탐색 메뉴가 왼쪽에 계속 표시되도록 하려면 고급 탭을 고정 위치로 업데이트하고 다음과 같이 z-색인을 업데이트합니다.

고정 스테이션
Z-인덱스: 9999

섹션 외부로 확장되는 하위 메뉴 탐색을 볼 수 있도록 기본 요소에 다음 사용자 지정 CSS를 추가합니다.

overflow: visible !important;

이제 섹션이 템플릿 왼쪽의 세로 레이아웃으로 표시됩니다.

세로 메뉴 디자인

섹션이 제자리에 있으면 수직 메뉴를 디자인할 준비가 되었습니다. 이를 위해 사용자 정의 CSS가 있는 메뉴 모듈을 사용하여 세로로 표시되도록 탐색을 사용자 정의합니다.

또한 메뉴가 다양한 브라우저 높이에 잘 적응하도록 vh 길이 단위를 사용할 것입니다.

라인 추가

시작하려면 섹션의 열에 행을 추가하세요.

다음으로 라인 매개변수를 다음과 같이 업데이트합니다.

크기 조정 및 간격

사용자 지정 거터 너비 사용: 예
열 간격: 1
최대 너비: 100%
최대 너비: 80%

내부 여백: 상단 3vh, 하단 3vh

경계

테두리 너비: 1px
테두리 색상: #eeeeee

메뉴 모듈 추가

XNUMX열 행 안에 새 메뉴 모듈을 추가합니다.

탭에 표시할 메뉴를 선택하세요. 내용.

그런 다음 귀하의 로고를 추가하십시오. 웹 사이트 으로 내용 로고 버튼 아래에 동적입니다.

스타일 탭에서 다음을 업데이트합니다.

스타일: 중앙

글꼴 메뉴: Nunito Sans
메뉴 텍스트 색상: #535b7c

메뉴 텍스트 크기: 18px(데스크톱), 14px(태블릿 및 휴대폰)
메뉴 줄 높이: 2em

드롭다운 행 색상: #535b7c
활성 링크 색상 드롭다운 메뉴: #535b7c

장바구니 아이콘 색상: #535b7c
검색 아이콘 색상: #535b7c
햄버거 메뉴 아이콘 색상: #535b7c

내부 여백: 상단 2vh, 하단 2vh

메뉴에 사용자 정의 CSS를 추가했습니다.

메뉴는 우리가 달성하고자 하는 수직 탐색을 달성하기 위해 사용자 정의 CSS가 필요합니다. 시작하려면 고급 탭으로 이동하여 메뉴 링크 및 메뉴 로고에 다음 사용자 정의 CSS를 추가하십시오.

CSS 메뉴 링크(데스크톱):

width: 100%;
padding: 1vh 15px;
background: #f8f8f8;
border-radius: 3px;
border: 1px solid #eeeeee;

CSS 메뉴 링크(태블릿):

width: auto;
border:none;

메뉴 CSS 로고:

margin-bottom: 20px;

다음으로 다음과 같이 메뉴 모듈에 사용자 정의 CSS 클래스를 추가합니다.

CSS 클래스: et-vert-menu

이 클래스는 코드 모듈을 사용하여 추가할 외부 사용자 정의 CSS에서 이 특정 메뉴를 대상으로 하는 데 사용됩니다.

코드 모듈로 사용자 정의 CSS 추가

메뉴 모듈 아래에 코드 모듈을 추가합니다.

그런 다음 다음 코드를 코드 상자에 붙여넣습니다(스타일 태그 사이에 넣어야 함).

/* Menu de Navigation Style Vertical*/
.et-vert-menu .et_pb_menu__menu>nav>ul {
  flex-direction: column;
  margin-left: 0px!important;
  margin-right: 0px!important;
  width: 100%;
  }
.et-vert-menu .et_pb_menu__menu>nav>ul>li {
  margin: 10px0!important;
  }
.et-vert-menu .et_pb_menu__menu>nav>ul>li>ul li {
  display:block!important;
  padding: 0px!important;
  }
  .et-vert-menu .et_pb_menu__menu>nav>ul ul {
    padding: 0px!important;
    top: 0px!important;
  }
.et-vert-menu .et_pb_menu__menu>nav>ul>li>ul {
  left:calc(100%- 1px) !important;
  top:0px!important;
  }
.et-vert-menu .et-menu .menu-item-has-children>a:first-child:after {
  content: "5"!important; /*change arrow icon for submenu*/
  right: 20px!important;
  }
.et-vert-menu .nav li ul {
    left: calc(100%- 1px) !important; /*align submenu to the right of menu link*/
  }
@media alland (min-width: 981px) {
.et-vert-menu .et_pb_menu__menu, .et-vert-menu .et_pb_menu__menu>nav {
    width: 100%; /*width of the vertical navigation menu*/
  }
/*Adjust the width of the main content and footer area to make room for the fixed vertical header*/
#et-main-area {
  width: calc(100%- 300px);
  margin-left: 300px;
}
}