이야기에 앞서
2025년 7월, 엘리멘터(Elementor) 3.30 업데이트에서 기존 메뉴 위젯도 함께 업데이트되었다. 그동안 성능문제와 버그로 사용이 어려웠던 메가메뉴를 이제는 프로덕션 사이트에서도 사용할 수 있는 수준으로 개선되었다. 다만, 편집화면에서의 성능 버그와 UX 제약사항은 여전히 존재하므로 사용에 유의해야 한다.
배경요소와 지시자를 추가하면 메가메뉴를 좀 더 다이나믹하게 표현할 수 있다.
이러한 성능 이슈가 심각하게 발생하거나 엘리멘터 메뉴 위젯을 사용하지 않고 메가메뉴를 구성하고 싶다면 Imran Siddiq – Web Squadron의 Elementor Mega Menu without a Plugin 영상을 참고해 직접 만들수도 있다. 하지만 UX적인 구체적인 내용은 다루지 않으므로 직접 구현해야 한다.
메뉴 위젯 사용 시 유의사항
대부분 편집화면에서 버그가 많다.
- 메뉴 내부 컨텐츠가 증가하면 편집화면이 로드된 후, 얼마간 메뉴 토글이 작동하지 않는다. (많이 개선되었지만 여전히 오래 걸린다)
- 메뉴 이름 우측 토글 아이콘을 삭제하거나 사용자 업로드 아이콘으로 변경하면 메모리가 폭주하며 편집이 불가능한 수준으로 느려진다. 메뉴 토글도 제대로 작동하지 않는다.
- 모바일 화면에서는 편집모드에서 토글이 작동하지 않으며, 메뉴 전체 높이가 뷰포트로 제한되어 내용이 긴 컨텐츠는 잘릴 수 있다.
- 위젯 컨트롤 패널의
Dropdown Effect를Click으로 설정하면 컨텐츠 없이 이름만 있는 메뉴 클릭 시 자바스크립트 에러가 발생한다(라이브에서도 발생)
메뉴 위젯 추가
메가메뉴는 엘리멘터 프로 라이선스가 필요하며, 위젯 검색에서 Menu로 검색하면 찾을 수 있다. 메뉴 위젯은 보통 헤더 템플릿과 함께 사용한다. 이 부분은 설명이 필요 없으므로 넘어간다.
메뉴 위젯의 개선
메뉴 위젯은 현재 Fade In 효과 외에는 어떠한 UX 관련 선택지가 없다. 밋밋한 메가메뉴를 더욱 다이나믹하게 바꿔본다. 토글에 의해 나타나는 메뉴의 높이에 따라 배경이 애니메이션 되도록 변경하고, 현재 Active 상태의 메뉴에 지시자를 추가해 보자.
기본 구조와 클래스
위젯 내부 요소들은 이미 위젯에 정의된 스크립트에 의해 통제되고 있으니 별도의 DOM 요소와 자바스크립트를 사용해야 한다. 아래 이미지는 전체적인 레이어 구조와 필수로 추가해야 할 클래스를 보여준다. 클래스는 자바스크립트에서 DOM 요소를 선택하기 위해 필요하다.
- 메가메뉴를 포함한 전체 네비게이션 컨테이너. 자식요소들이
:has()선택자를 사용할 수 있도록 아무 클래스나 하나 지정해야 한다. 이미지에서는jetcraft-header라는 클래스를 추가하였다. - 토글되어 나타나는 메뉴 컨텐츠의 높이에 따라 애니메이션 할 배경 요소. 이 포스트의 핵심요소이며
jetcraft-megamenu-bg와use-bg클래스를 추가하였다. 메뉴 배경을 사용하고 싶지 않을 때는 use-bg 클래스를 삭제할 수 있다.
이 요소는 반드시Full Width컨테이너의 자식 요소이어야 한다. - 메가메뉴 위젯을 포함하는 부모 컨테이너.
jetcraft-section-megamenu클래스와use-indicator클래스를 추가하였다. 활성화 된 메뉴를 따라다니는 지시자를 사용하고 싶지 않다면 use-indicator 클래스를 삭제할 수 있다. - 활성화 된 메뉴의 컨텐츠를 포함하는 부모 컨테이너.
item #1과 같은 컨테이너는 위젯에서 예약한 요소이므로 어떠한 변경도 하지 않는것이 좋다. 클래스는.item-real-content를 추가하였다.
자바스크립트 추가
배경요소와 지시자 행동을 정의할 자바스크립트 코드를 작성한다. 위치는 어떤 곳이든 상관없다. 예시에서는 메뉴 위젯을 감싸는 컨테이너(3번 요소)에 Settings - jetcraft-section-megamenu라는 이름의 HTML 위젯이다.
메뉴 위젯은 Full Width, Fit to Content, Hover, Click 등 선택지가 많아져 처리해야 할 부분 역시 많아졌다. 코드에서 몇 가지 주목할 만한 점을 간단히 살펴보면.
- 메뉴 위젯은 편집모드에서
Click형태로만 확인할 수 있으므로 모든 코드는 라이브에서만 작동하도록DOMContentLoaded이벤트를 사용한다. - 메가메뉴는 보통 한 페이지에 하나만 사용하는하여 반복문을 생략하였지만 예외적인 상황을 위해 추가하는 것이 안전하겠다.
- 토글에 의한 메뉴 컨텐츠의 숨기고 감추는 부분이 위젯 내부 코드에서
display: none에 의해 처리되고 있어 후속 애니메이션 처리가 불편하다.requestAnimationFrame함수를 통해 이 문제를 해결하였다. - Click 선택지에 대한 부분도 1차적인 테스트는 마쳤지만 앞서 설명한 위젯 버그로 인한 에러 발생 이후의 후속처리는 다음 엘리멘터 위젯 업데이트 이후로 미루었다.
- 자바스크립트에서는
height,width,offset과 같은 계산에 관련된 부분만 처리하고 모든 애니메이션은 CSS에서 처리한다. 따라서 코드 내부에opacity: 0과 같은 구문은 없다.
CSS 추가
CSS가 추가 될 요소는 배경요소(위 이미지 2번)와 메뉴 위젯의 부모요소(3번)에 추가한다. 메뉴 위젯 자체는 해당 위젯 고유한 커스터마이징을 위해 어떠한 CSS도 추가하지 않았다.
배경 요소에 CSS 추가 – jetcraft-megamenu-bg
배경 요소에 use-bg 클래스를 추가한 경우에만 지금까지의 모든 코드가 작동하도록 한다. 엘리멘터 버전 3.30 업데이트 이후 Optimized Markup 기능이 코어에 통합되면서 Custom CSS의 명시도 처리가 바뀌어 border나 border-radius같은 일부 속성을 Custom CSS 필드에 명시하면 컨트롤 패널에서 변경이 안되는 문제가 있다. 그런 부분들은 코드 최상단에 지역 변수를 통해 설정할 수 있도록 하였다.
변경된 명시도는 아마도 엘리멘터측의 추가 업데이트가 있을 것을 보인다.
메뉴 위젯의 부모요소에 CSS 추가 – jetcraft-section-megamenu
메뉴 위젯 자체는 사용자가 고유한 클래스를 명시할 수 있도록 놔두고 부모 요소에 클래스를 추가하고 정의한다. 이 CSS 코드는 현재 활성화 된 메뉴 하단에 지시자를 표시하고 애니메이션하는 부분을 정의한다. 사용자는 코드 최상단 지역변수를 통해 지시자를 사용자정의할 수 있다. 그리고 사용자는 이 요소에 use-indicator 클래스를 추가하거나 삭제하여 해당 기능을 사용할지 선택할 수 있다.
CSS 수정 시 유의사항
메뉴 위젯은 토글하여 나타나는 컨텐츠 요소들을 display: none과 display: flex를 통해 제어하고 있으므로 애니메이션 처리가 매우 까다롭다. 따라서 애니메이션과 관련된 부분을 수정할 때는 항상 이 부분을 염두해야 한다.
마치며
메뉴 위젯은 엘리멘터에서 가장 업데이트가 느린 위젯이다. 계층형 요소(Nested Elements) 기능과 맞물려 최적화 부분의 문제를 해결하는데 어려움이 있는 것으로 보인다. 따라서 지금까지 구현한 코드와 CSS는 메뉴 위젯의 업데이트에 따라 지속적으로 감시하며 유지보수해야 한다.