Divi에서 슬라이드 다운 푸시 메뉴를 만드는 방법

게시 됨: 2020-07-22

탐색 링크가 많은 큰 헤더는 사이트(특히 스크롤 없이 볼 수 있는 부분)에서 많은 귀중한 공간을 차지할 수 있습니다. 그래서 팝업 메뉴와 슬라이드 인 메뉴가 점점 인기를 얻고 있습니다. 대부분의 경우 보기 위해 밀어넣는 메뉴는 페이지 콘텐츠 위에 머물며 특정 요소를 숨깁니다. 그러나 슬라이딩 푸시 메뉴는 약간 다르게 작동합니다. 슬라이딩 푸시 효과는 메뉴가 페이지 상단에서 슬라이드되는 동시에 페이지 콘텐츠를 아래로 밀어서 아무 것도 보이지 않는 점에서 독특합니다.

이 튜토리얼에서는 Divi 테마 빌더를 사용하여 처음부터 슬라이딩 푸시 메뉴를 만드는 방법을 보여 드리겠습니다. 메뉴가 만들어지면 Divi Builder를 사용하여 원하는 콘텐츠로 섹션을 채울 수 있으므로 모든 유형의 응용 프로그램을 위한 다용도 도구가 됩니다.

가자!

엿보기

다음은 이 튜토리얼에서 구축할 슬라이딩 푸시 메뉴에 대한 간략한 설명입니다.

무료로 레이아웃 다운로드

이 튜토리얼의 디자인을 손에 넣으려면 먼저 아래 버튼을 사용하여 다운로드해야 합니다. 다운로드에 액세스하려면 아래 양식을 사용하여 Divi Daily 이메일 목록에 가입해야 합니다. 신규 구독자는 매주 월요일에 더 많은 Divi 혜택과 무료 Divi 레이아웃 팩을 받게 됩니다! 이미 목록에 있는 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하기만 하면 됩니다. "재구독"되지 않거나 추가 이메일을 받지 않습니다.

파일 다운로드

무료로 다운로드

Divi 뉴스레터에 가입하면 최고의 Divi 랜딩 페이지 레이아웃 팩과 수많은 놀라운 무료 Divi 리소스, 팁 및 요령을 이메일로 보내드립니다. 따라하시면 금세 Divi 마스터가 되실 것입니다. 이미 구독한 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하여 레이아웃 팩에 액세스하십시오.

성공적으로 구독했습니다. 이메일 주소를 확인하여 구독을 확인하고 무료 주간 Divi 레이아웃 팩에 액세스하세요!

섹션 레이아웃을 Divi 테마 빌더로 가져오려면 Divi 테마 빌더로 이동하십시오.

이식성 아이콘을 클릭합니다.

이식성 팝업에서 가져오기 탭을 선택하고 컴퓨터에서 다운로드 파일을 선택합니다.

그런 다음 가져오기 버튼을 클릭합니다.

완료되면 섹션 템플릿이 Divi 테마 빌더에 나타납니다.

divi-sliding-푸시-메뉴

튜토리얼로 들어가 볼까요?

Divi 테마 빌더로 슬라이딩 푸시 메뉴 만들기

새 글로벌 메뉴 만들기

메뉴를 만들기 위해 Divi Theme Builder 내에서 새로운 글로벌 헤더를 만들 것입니다.

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

그런 다음 기본 웹 사이트 템플릿 내에서 "전체 헤더 추가" 영역을 클릭합니다. 드롭다운에서 "글로벌 헤더 빌드"를 선택합니다.

divi-sliding-푸시-메뉴

그러면 전역 헤더 레이아웃 편집기로 이동합니다.

글로벌 헤더 레이아웃 편집기에서 "처음부터 빌드" 옵션을 선택합니다.

divi-sliding-푸시-메뉴

푸시 메뉴 만들기

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

섹션 설정

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

배경

배경색: #1a1e36

divi-sliding-푸시-메뉴

심

패딩: 0px 상단, 0px 하단

divi-sliding-푸시-메뉴

CSS 클래스

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

CSS 클래스: et-push-menu

divi-sliding-푸시-메뉴

사용자 정의 CSS(태블릿)

다음으로, 우리가 추가할 메인 헤더 바를 수용하기 위해 계산된 높이를 사용하여 모바일에서 섹션의 높이를 조정해야 합니다. 이것은 본질적으로 사용자가 메뉴 열기를 토글할 때 모바일에서 창의 전체 높이에 걸쳐 섹션을 만들 것입니다.

태블릿의 기본 요소에만 다음 사용자 지정 CSS를 추가합니다.

height: calc(100vh - 70px);
overflow:scroll !important;
overscroll-behavior: contain;

divi-sliding-푸시-메뉴

행 1 추가

섹션 설정이 완료되면 섹션 내에 1열 행을 생성합니다.

divi-sliding-푸시-메뉴

행 1 설정

그런 다음 다음과 같이 행 설정을 업데이트합니다.

설계

거터 폭: 1
폭: 100%
최대 너비: 1280px
패딩: 3vh 상단, 3vh 하단
하단 테두리 너비: 1px
하단 테두리 색상: rgba(255,255,255,0.2)

divi-sliding-푸시-메뉴

맞춤 CSS

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

바탕 화면에서…

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

태블릿에서…

display:flex;
flex-direction:column;
align-items:center;

divi-sliding-푸시-메뉴

열 설정

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

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

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

divi-sliding-푸시-메뉴

버튼 추가

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

divi-sliding-푸시-메뉴

버튼 설정

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

콘텐츠

버튼 텍스트: 디자인
버튼 링크 URL: #(나중에 이를 사용자 정의 URL로 대체)

divi-sliding-푸시-메뉴

설계

버튼 텍스트 색상: #ffffff
버튼 테두리 너비: 0px
버튼 글꼴: 몬세라트
버튼 글꼴 두께: Heavy
버튼 아이콘: [선택 사항]
버튼 아이콘 배치: 왼쪽

divi-sliding-푸시-메뉴

열 복제

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

divi-sliding-푸시-메뉴

행 2 추가

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

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

divi-sliding-푸시-메뉴

하나를 제외한 모든 열 삭제

그런 다음 중복 행 내에서 하나를 제외한 모든 열을 삭제하십시오.

divi-sliding-푸시-메뉴

2행 설정

다음과 같이 행 2에 대한 설정을 업데이트합니다.

최대 너비: 1080px
하단 테두리 너비: 0px

divi-sliding-푸시-메뉴

열 설정

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

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

divi-sliding-푸시-메뉴

버튼 설정 업데이트

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

버튼 텍스트 크기: 14px
버튼 문자 간격: 2px
버튼 글꼴 두께: 반 굵게
버튼 글꼴 스타일: TT
버튼 아이콘 표시: 아니오

divi-sliding-푸시-메뉴

열 복제

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

divi-sliding-푸시-메뉴

마지막 열 테두리 삭제

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

오른쪽 테두리 너비: 0px

divi-sliding-푸시-메뉴

메인 헤더 바 생성하기

다음으로 메인 헤더 바에 대한 섹션을 생성할 것입니다. 이 헤더 표시줄은 항상 표시되며 사이트 로고, CTA 및 메뉴 토글 버튼을 유지합니다.

섹션 추가

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

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

divi-sliding-푸시-메뉴

섹션 설정

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

심

패딩: 0px 상단, 0px 하단

divi-sliding-푸시-메뉴

행 추가

섹션 패딩이 추가된 후 섹션에 3열 행을 추가합니다.

divi-sliding-푸시-메뉴

행 설정

행 설정을 열고 다음을 업데이트합니다.

사이징

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

divi-sliding-푸시-메뉴

심

패딩: 패딩: 위쪽 0px, 아래쪽 0px

divi-sliding-푸시-메뉴

맞춤 CSS

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

display:flex;
align-items:center;

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

divi-sliding-푸시-메뉴

버튼 추가

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

divi-sliding-푸시-메뉴

버튼 설정 업데이트

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

버튼 텍스트: 가입
버튼 텍스트 크기: 14px
버튼 텍스트 색상: #1a1e36
버튼 아이콘 표시: 예
버튼 아이콘: 오른쪽 화살표(스크린샷 참조)

divi-sliding-푸시-메뉴

로고 추가

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

divi-sliding-푸시-메뉴

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

divi-sliding-푸시-메뉴

이미지 설정

그런 다음 디자인 탭에서 다음을 업데이트합니다.

이미지 정렬: 중앙
최대 높이: 55px

divi-sliding-푸시-메뉴

사용자 정의 햄버거 아이콘 추가

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

텍스트 모듈 추가

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

계속해서 열 3에 텍스트 모듈을 추가하십시오.

divi-sliding-푸시-메뉴

텍스트 모듈 HTML 추가

그런 다음 텍스트 모듈의 내용에 다음 HTML을 추가합니다.

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

divi-sliding-푸시-메뉴

배경

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

배경색: #1a1e36

divi-sliding-푸시-메뉴

텍스트 디자인

그런 다음 디자인 설정을 다음과 같이 업데이트합니다.

너비: 70px
모듈 정렬: 오른쪽
높이: 70px
패딩: 상단 20픽셀, 하단 20픽셀, 왼쪽 16픽셀, 오른쪽 16픽셀

divi-sliding-푸시-메뉴

CSS 클래스

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

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

divi-sliding-푸시-메뉴

코드 추가

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

계속해서 텍스트 모듈 아래의 3열에 코드 모듈을 추가하십시오.

divi-sliding-푸시-메뉴

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

  .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 );

divi-sliding-푸시-메뉴

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

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

divi-sliding-푸시-메뉴

그게 다야!

설정 저장

레이아웃과 테마 빌더 설정을 저장하는 것을 잊지 마십시오.

divi-sliding-푸시-메뉴

최종 결과

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

끈적하게 만들기

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

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

그리고 여기 결과가 있습니다.

마지막 생각들

이 슬라이딩 푸시 메뉴를 즐기시기 바랍니다. 이 효과는 독특하며 앞으로 더 창의적인 헤더를 위한 문을 열어줍니다.

댓글로 여러분의 의견을 기다리겠습니다.

건배!