Divi: 슬라이딩 및 푸시 메뉴를 만드는 방법

생성하시겠습니까? 슬라이딩 및 푸시 메뉴 디비에서 페이지의 요소를 숨기지 않는 것은 무엇입니까?

탐색 링크가 많은 큰 헤더는 페이지에서 귀중한 공간을 차지할 수 있습니다. 사이트 웹. 이것이 바로 컨텍스트 메뉴와 슬라이드 아웃 메뉴가 점점 인기를 얻고 있는 이유입니다. 대부분의 경우 슬라이드하여 표시되는 메뉴는 내용 페이지의 특정 요소를 숨깁니다. 

그러나 슬라이딩 푸시 메뉴는 약간 다르게 작동합니다. 슬라이딩 푸시 효과는 페이지 상단에서 메뉴가 슬라이드되는 동시에 내용 페이지에서 맨 아래까지 표시되므로 아무것도 보이지 않습니다.

이 튜토리얼에서는 Divi Theme Builder를 사용하여 처음부터 슬라이딩 푸시 메뉴를 만드는 방법을 보여줍니다.

가자!

측량

이 튜토리얼에서 만들 슬라이딩 푸시 메뉴를 간단히 살펴보겠습니다.

Divi 테마 빌더로 슬라이딩 푸시 메뉴 구축

새로운 글로벌 메뉴 만들기

메뉴를 생성하기 위해 Divi Theme Builder 내에서 새로운 글로벌 헤더를 생성합니다.

Divi > 테마 빌더로 이동합니다.

읽기 : DIVI에서 로그인 양식으로 전역 헤더를 만드는 방법

그런 다음 "전역 헤더 추가" 영역을 클릭합니다. 웹 사이트 템플릿 기본적으로. 드롭다운 목록에서 "전역 헤더 작성"을 선택합니다.

푸시 메뉴 생성

함께 만들 첫 번째 요소는 푸시 메뉴 섹션입니다. 이 섹션에는 메뉴 토글 버튼을 클릭할 때 위아래로 토글되는 메뉴 항목이 포함됩니다.

섹션 설정

기본 섹션 설정을 열고 다음과 같이 설정을 업데이트합니다.

배경

• 배경: #1a1e36

내부 여백

• 내부 여백: 위쪽 0px, 아래쪽 0px

CSS 클래스

고급 탭에서 나중에 JS 코드에서 사용할 다음 CSS 클래스를 추가합니다.

• CSS 클래스: et-push-menu

1 라인 추가

섹션 매개변수가 정의되면 섹션에 XNUMX열 행을 생성합니다.

라인 1 매개변수

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

크기 조정

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

간격

• 여백: 상단 3vh, 하단 3vh

경계

• 하단 테두리 너비: 1px
• 하단 테두리 색상: rgba(255,255,255,0.2)

맞춤 CSS

고급 탭에서 다음 사용자 정의 CSS를 기본 요소에 추가합니다.

display:flex;
justify-content:center;
align-items:center;

열 매개 변수

행 설정이 정의되면 열 설정을 열고 사용자 정의 CSS 스니펫을 기본 요소에 추가합니다.

display:flex;
align-items:center;
justify-content:center;

이는 내용 기둥의 수직 및 수평 모두.

버튼 추가

이제 Button 모듈을 사용하여 메뉴 항목을 추가할 준비가 되었습니다. 열에 새 버튼을 추가하여 시작하십시오.

다음에 대한 가이드도 참조하세요. DIVI에서 수직 탐색 메뉴를 만드는 방법

버튼 설정

다음으로 버튼 설정을 다음과 같이 업데이트합니다.

내용

• 버튼 텍스트: 디자인

• 버튼 링크 URL: #(나중에 사용자 정의 URL로 대체)

스타일

• 버튼에 사용자 정의 스타일 사용: 예
• 버튼 텍스트 색상: #ffffff

• 버튼 테두리 너비: 0픽셀
• 버튼 글꼴: 몬세라트
• 소프트 라이트 버튼: 헤비

• 아이콘 버튼: 예
• 아이콘 버튼: [귀하의 선택]
• 호버 버튼에만 아이콘 표시: 아니오
• 버튼 아이콘 배치: 왼쪽

중복 열

이제 메뉴에 대한 추가 버튼을 만들기 위해 열을 복제할 수 있습니다. 이 디자인을 위해 열을 4번 복제하여 5개의 열이 있는 행에 총 XNUMX개의 메뉴 항목/버튼을 제공합니다.

2 라인 추가

첫 번째 행이 완료되면 다른 메뉴 항목 집합에 사용할 수 있는 다른 단추 행을 추가할 준비가 되었습니다.

읽기 : DIVI의 글로벌 헤더에 연락처 양식을 추가하는 방법

다음 라인을 생성하려면 라인 1을 복제하십시오.

하나를 제외한 모든 열 삭제

그런 다음 중복 행에서 하나의 열을 제외한 모든 열을 삭제합니다.

라인 2 매개변수

다음과 같이 2행 매개변수를 업데이트하십시오.

• 최대 너비: 1픽셀

• 하단 테두리 너비: 0px

열 매개 변수

그런 다음 다음과 같이 열에 테두리를 추가합니다.

• 오른쪽 테두리 너비: 1px
• 오른쪽 테두리 색상: rgba(255,255,255,0.2)

버튼 설정 업데이트

열에 오른쪽 테두리가 있으면 버튼 설정을 열고 다음을 업데이트합니다.

• 버튼 텍스트 크기: 14px

• 소프트 라이트 버튼: 굵은 텍스트
• 버튼 문자 간격: 2px
• 버튼 복사 스타일: TT
• 아이콘 버튼: 아니오

중복 열

이전과 마찬가지로 열을 복제하여 추가 버튼과 열을 생성해 보겠습니다. 이 디자인을 위해 열을 3번 복제하여 4열 행에 총 4개의 버튼을 제공합니다.

마지막 열에서 테두리 제거

마지막 열에 오른쪽 테두리가 있는 것을 원하지 않으므로 열 4에 대한 설정을 열고 테두리 너비를 업데이트합니다.

• 오른쪽 테두리 너비: 0px

메인 헤더 바 생성하기

다음으로, 우리는 메인 헤더 바 섹션을 생성할 것입니다. 이 헤더 표시줄은 항상 표시되며 사이트 로고, 클릭 유도문안 및 메뉴 토글 버튼이 포함됩니다.

섹션 추가

새 섹션을 추가하기 전에 "푸시 메뉴 섹션"을 읽도록 이전 섹션의 레이블을 업데이트하는 것이 좋습니다.

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

그런 다음 첫 번째 섹션 아래에 새 섹션을 만듭니다.

섹션 설정

이제 "헤더 섹션"을 읽도록 새 섹션의 레이블을 업데이트하십시오. 그런 다음 섹션 설정을 열고 다음을 업데이트합니다.

간격

• 내부 여백: 위쪽 0px, 아래쪽 0px

행 추가

섹션 패딩이 설정되면 섹션에 XNUMX열 행을 추가합니다.

라인 설정

행 매개변수를 열고 다음을 업데이트하십시오.

크기 조정

• 거터 폭: 1
• 폭: 90%
• 높이: 70px

간격

• 내부 여백: 위쪽 0px, 아래쪽 0px

맞춤 CSS

고급 탭에서 다음 사용자 정의 CSS를 기본 요소에 추가합니다.

display:flex;
align-items:center;

이렇게 하면 행의 열이 세로로 가운데에 맞춰집니다.

버튼 추가

헤더 섹션에 기본 CTA를 생성하기 위해 상단 섹션의 두 번째 행 버튼을 사용할 수 있습니다. 상단 섹션의 1행 2열에서 버튼을 복사하여 헤더 섹션의 1열에 붙여넣습니다.

버튼 설정 업데이트

그런 다음 복제 버튼 설정을 열고 다음을 업데이트합니다.

• 버튼 텍스트: 등록

• 버튼 텍스트 크기: 14px
• 버튼 텍스트 색상: #1a1e36

• 아이콘 버튼: 예
• 아이콘 버튼: 오른쪽 화살표(스크린샷 참조)

로고 추가

중간 열에 이미지 모듈을 추가합니다. 이것이 사이트 로고를 동적으로 추가하는 방법입니다.

이미지 영역 위로 마우스를 가져간 다음 "동적 콘텐츠 사용" 아이콘을 클릭합니다. 드롭다운 메뉴에서 "사이트 로고"를 선택합니다.

이미지 설정

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

• 이미지 정렬: 중앙

• 최대 높이: 55픽셀

맞춤형 햄버거 아이콘 추가

레이아웃 모듈을 통해 일반 아이콘을 메뉴 토글로 사용할 수 있지만 이 자습서에서는 멋진 전환 효과가 있는 사용자 지정 메뉴 토글을 추가할 것이라고 생각했습니다.

텍스트 모듈 추가

메뉴 아이콘을 만들기 위해 외부 CSS로 스타일을 지정할 사용자 정의 HTML 코드가 있는 텍스트 모듈을 사용합니다.

3열에 텍스트 모듈을 추가하세요.

텍스트 모듈에 HTML 코드 추가

그런 다음 텍스트 모듈의 콘텐츠에 다음 HTML 코드를 추가합니다.

<p><span class="line line-1"></span><br /> <span class="line line-2"></span><br /> <span class="line line-3"></span></p>

배경

텍스트 모듈에 배경색을 지정합니다.

• 배경색: #1a1e36

텍스트 서식

다음으로 스타일 설정을 다음과 같이 업데이트합니다.

• 너비: 70픽셀
• 모듈 정렬: 오른쪽
• 높이: 70px

• 내부 여백: 위쪽 20px, 아래쪽 20px, 왼쪽 16px, 오른쪽 16px

CSS 클래스

고급 탭에서 다음 CSS 클래스를 추가합니다.

• CSS 클래스: et-push-menu-toggle

코드 추가

이 슬라이딩 푸시 메뉴가 작동하도록 하는 데 필요한 기능을 집으로 가져오기 위해 사용자 지정 CSS 및 jQuery를 코드 모듈에 추가합니다.

계속해서 Text 모듈 아래의 3열에 Code 모듈을 추가하십시오.

그런 다음 다음 코드를 붙여넣습니다(주의: 이 코드를 태그로 묶습니다. 스타일 올바르게 작동하려면):

.line {
display: block;
position: absolute;
height: 2px;
width: 100%;
background: #ffffff;
opacity: 1;
-webkit-transition: .1s ease-in-out;
-moz-transition: .1s ease-in-out;
-o-transition: .1s ease-in-out;
transition: .1s ease-in-out;
}
.line-2 {
top: 10px;
}
.line-3 {
top: 20px;
}
.et-push-menu-toggle.open .line-1 {
top: 10px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
.et-push-menu-toggle.open .line-2 {
display: none;
}
.et-push-menu-toggle.open .line-3 {
top: 10px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.et-push-menu {
display:none;
}
.et-fb .et-push-menu {
display:block;
}
.et-push-menu-toggle {
cursor:pointer;
}

그런 다음 이 코드를 복사하여 바로 아래에 붙여넣습니다(중요: 제대로 작동하려면 이 코드를 스크립트 태그로 감쌉니다).

(function($) {
$(document).ready(function(){
$('.et-push-menu-toggle').click(function(){
$(this).toggleClass('open');
$('.et-push-menu').slideToggle( "300").toggleClass('et-push-menu-active');
});
});
})( jQuery );

버튼 텍스트 및 링크 업데이트

마지막으로 필요한 버튼 텍스트와 링크 URL로 모든 버튼을 업데이트할 수 있습니다.

완료되었습니다!

설정 저장

Theme Builder 레이아웃 및 설정을 저장하는 것을 잊지 마십시오.

최종 결과

최종 결과를 보려면 귀하의 페이지를 확인하십시오. 웹 사이트.

스티키하게 만들기

메뉴의 "고정" 버전을 원하면 다음 CSS 스니펫을 코드 모듈(스타일 태그 사이)에 추가하기만 하면 됩니다.

header {
position: sticky;
top:0;
z-index:9999;
}#page-container {
  overflow-y: visible !important;
}

여기 결과가 있습니다.

지금 DIVI를 다운로드하세요!!!

결론

이 슬라이딩 푸시 메뉴를 즐기시기 바랍니다. 효과는 독특하며 더 창의적인 헤더의 문을 엽니다. 우려 사항이나 제안 사항이 있으면 댓글 섹션 그것을 논의하기 위해.

그러나 상담 할 수도 있습니다 우리의 자원, 인터넷 사이트 제작 프로젝트를 수행하는 데 더 많은 요소가 필요하면 워드 프레스 블로그 제작 또는 Divi : 역대 최고의 워드 프레스 테마.

그러나 그동안, 이 기사를 다른 소셜 네트워크에서 공유하십시오.

...