메가 메뉴를 사용하면 사용자는 스크롤하거나 마우스를 가져가거나 기억할 필요 없이 한 번에 더 많은 링크를 볼 수 있습니다. 내용 메뉴에서. 메가 메뉴에 대해 생각하는 가장 좋은 방법은 드롭다운 메뉴 내의 드롭다운 메뉴라는 것입니다.

따라서 탐색 모음에서 기본 상위 링크 위로 마우스를 가져갈 때 하위 메뉴를 표시하는 일반 드롭 다운 메뉴 대신 메가 메뉴를 사용하면 드롭 다운 메뉴에 추가 상위 링크와 하위 메뉴를 사용할 수 있습니다.

탐색 메뉴에 메가 메뉴를 추가하는 방법

워드 프레스 대시 보드에 로그인하여 외관> 메뉴 .

wordpress menu divi.png

자체 하위 메뉴 링크가있는 각 상위 링크가있는 XNUMX 개의 상위 링크가있는 메뉴를 만듭니다. 아래 예에서는 XNUMX 개의 상위 메뉴 링크 각각 아래에 XNUMX 개의 하위 메뉴 항목을 추가합니다.

menu divi.png

메가 메뉴 링크로 사용할 추가 링크를 만듭니다. 아래 예에서는이 링크를 "Main"이라고합니다. 그런 다음 두 개의 상위 메뉴 링크 (각각 하위 메뉴 링크 포함)를 기본 링크 아래로 끕니다.

이제 Megamenu를 생성하려면 "Main"이라는 최상위 메인 링크에 특별한 CSS 클래스를 추가해야합니다. 페이지 상단에있는 화면 옵션 링크를 클릭하고 CSS 클래스 옵션이 선택되어 있는지 확인하면됩니다.

CSS 클래스 divi.png

마지막으로 방금 만든 "Main"링크에 CSS 클래스를 추가해야합니다. 추가 구성 옵션을 전환하려면 "기본"메뉴 항목의 오른쪽에있는 화살표를 클릭하십시오. CSS 클래스라는 제목의 텍스트 상자를 찾아 "메가 메뉴"클래스를 입력합니다.

메가 메뉴 divi.png

이제 페이지를 새로 고침하면 이전의 모든 메뉴가 메가 메뉴 링크 아래에있는 거대한 메뉴에 배치 된 것을 볼 수 있습니다.

메가 메뉴 divi example.png

이것이 이 튜토리얼의 전부입니다. 이 튜토리얼을 통해 메가 메뉴를 만들 수 있기를 바랍니다. Divi 쉽게.