메가 메뉴를 사용하면 사용자는 스크롤하거나 마우스를 가져가거나 기억할 필요 없이 한 번에 더 많은 링크를 볼 수 있습니다. 내용 메뉴에서. 메가 메뉴에 대해 생각하는 가장 좋은 방법은 드롭다운 메뉴 내의 드롭다운 메뉴라는 것입니다.
따라서 탐색 모음에서 기본 상위 링크 위로 마우스를 가져갈 때 하위 메뉴를 표시하는 일반 드롭 다운 메뉴 대신 메가 메뉴를 사용하면 드롭 다운 메뉴에 추가 상위 링크와 하위 메뉴를 사용할 수 있습니다.
탐색 메뉴에 메가 메뉴를 추가하는 방법
워드 프레스 대시 보드에 로그인하여 외관> 메뉴 .
자체 하위 메뉴 링크가있는 각 상위 링크가있는 XNUMX 개의 상위 링크가있는 메뉴를 만듭니다. 아래 예에서는 XNUMX 개의 상위 메뉴 링크 각각 아래에 XNUMX 개의 하위 메뉴 항목을 추가합니다.
메가 메뉴 링크로 사용할 추가 링크를 만듭니다. 아래 예에서는이 링크를 "Main"이라고합니다. 그런 다음 두 개의 상위 메뉴 링크 (각각 하위 메뉴 링크 포함)를 기본 링크 아래로 끕니다.
이제 Megamenu를 생성하려면 "Main"이라는 최상위 메인 링크에 특별한 CSS 클래스를 추가해야합니다. 페이지 상단에있는 화면 옵션 링크를 클릭하고 CSS 클래스 옵션이 선택되어 있는지 확인하면됩니다.
마지막으로 방금 만든 "Main"링크에 CSS 클래스를 추가해야합니다. 추가 구성 옵션을 전환하려면 "기본"메뉴 항목의 오른쪽에있는 화살표를 클릭하십시오. CSS 클래스라는 제목의 텍스트 상자를 찾아 "메가 메뉴"클래스를 입력합니다.
이제 페이지를 새로 고침하면 이전의 모든 메뉴가 메가 메뉴 링크 아래에있는 거대한 메뉴에 배치 된 것을 볼 수 있습니다.
이것이 이 튜토리얼의 전부입니다. 이 튜토리얼을 통해 메가 메뉴를 만들 수 있기를 바랍니다. Divi 쉽게.