국내형(?) 메가메뉴 만들기
IMPREZA 테마로 워드프레스 웹사이트 만들기
메가 메뉴는 웹사이트에서 일반적인 드롭다운 메뉴보다 훨씬 큰, 여러 가지 하위 카테고리나 항목들을 한 번에 표시하는 데 있어 매우 효과적인 메뉴입니다. 구글에서 메가 메뉴를 한 번 검색해 봤습니다.
그런데, 국내 사이트 구축 시 원하는 메가 메뉴란 상위 메뉴마다 다른 주제들로 드롭다운 내용을 구성하는 위 검색 내용과 같은 방식이 아니라, 한 번에 전체 메뉴를 보이는 방식(상위 메뉴와 하위 메뉴들이 구분은 돼 있으면서 열은 딱 맞춰서 보이는 구조)이 대부분이었습니다. 이것도 게시판처럼 비슷한 구조에 익숙해서일까요?
위와 같은 구조를 플러그인을 설치해서 만드는 걸 한 번 가정해 봅니다. 대표적인 플러그인이 이런 것인데, 문제는 내용 구성하고 옵션 설정하고 등등 구현할 구조보다 알아야 할 게 너무 많다는 겁니다.
그럼 플러그인을 설치해서 구현을 하자니 너무 기능은 넘치고, 좀 단순하게 적용을 할 수 있는 방법은 없을까?
네 있습니다. Impreza 테마의 메뉴 드롭다운 옵션과 재사용 블록(Reusable Block)을 이용하고, css와 jQuery만 살짝 추가하면 어렵지 않게 구현을 할 수 있습니다.
작업 순서대로 한 번 소개를 해 보겠습니다.
1. 재사용 블록으로 서브 메뉴에 나올 콘텐츠 만들기
Impreza 테마 개발사에서 'Reusable Blocks'이라는 포스트 타입을 미리 만들고, 이걸 메뉴로 등록을 할 수 있도록 개발을 해 놨습니다.(※ 재사용 블록은 푸터를 구성하여 사이트 아래에 붙이거나, 페이지에서도 공통 영역을 붙이는 데에도 사용 가능) 재사용 블록 콘텐츠는 페이지 빌더를 이용해서 쉽게 구성을 할 수 있게 돼 있어서 원하는 대로 레이아웃을 만들 수 있습니다.
예시로 만들어 볼 헤더의 상위 메뉴가 4개이므로, 4개의 칼럼으로 표시될 구조를 만들었습니다. 메뉴를 구성하는 사이트 네비의 총 넓이와 이 블록의 넓이가 일치하고, 4개 칼럼이므로 25%의 넓이를 가지고 표시될 겁니다. 메뉴 링크들은 텍스트(Text) 요소에 링크를 넣어서 관리할 수 있습니다.
로우 편집 옵션 중에 Columns 탭에서 'Add extra padding...' 필드에 체크를 하면 모든 칼럼은 안쪽에서 동일 넓이를 가지고 있게 됩니다. 옵션을 켰을 때와 안 켰을 때의 차이는 이 페이지를 보면 좀 더 이해가 쉽습니다. > https://impreza.us-themes.com/elements/columns/
다음으로 안쪽의 칼럼의 스타일을 원하는 대로 조정해 줍니다. (※ 패딩 설정을 안 하면 기본 상하좌우 4rem 패딩 적용)
아래의 칼럼 모양을 위한 디자인 설정입니다.
2. 메뉴에 등록
어드민 '외모 > 메뉴'에서 만든 블록을 메뉴의 서브 메뉴로 등록합니다. 이때 4개의 상위 메뉴 아래 동일한 블록이 등록되어야 합니다. 그래야 모든 메뉴 위에 마우스를 올렸을 때 같은 서브 메뉴가 보이게 됩니다.
Exclude Rows and Columns 옵션은 기본적으로 체크가 돼 있는데 체크를 해제해야 만든 구조 그대로 보이게 됩니다. (※ 체크가 된 경우 가져올 블록에서 로우와 칼럼을 제외한 안쪽 콘텐츠만 남게 됩니다.)
메뉴에 서브 메뉴를 넣고 저장을 하게 되면 제일 상위의 메뉴에 'Dropdown Settings'라는 버튼이 추가됩니다. 기본은 Auto로 서브 메뉴가 속한 부모 메뉴의 넓이를 따르는 방식이고, Full Width로 설정하면 화면의 최대 넓이로 표시되도록 바뀝니다. 이때 배경도 끝까지 표시되는 거로 옵션을 켭니다.
3. 헤더에 연결 및 표시 설정
메뉴 구조를 만든 다음 이제 헤더에 노출되도록 설정할 차례입니다.
[Templates > Headers]에서 가운데 메뉴가 나오도록 구성 후 2번에서 만든 'mega-menu'를 연결합니다.
이때 아래로 나오는 드롭다운이 메뉴의 전체 넓이까지만 나오도록 설정을 하면 서브 메뉴로 만든 블록은 이제 메뉴와 같은 넓이로 표시됩니다. 옵션을 안 켜면 2번에서 설정한 대로 화면 전체로 드롭다운이 나오고, 옵션을 켜면 드롭다운은 알아서 넓이가 맞춰진 걸 볼 수 있습니다.
여기까지 메뉴가 나오는 과정에 대해 잠시 요약해 봅니다.
- 페이지 블록이라는 포스트 타입으로 원하는 구조를 빌더로 만든 다음 메뉴에 등록할 수 있다.
- 드롭다운 메뉴를 부모 메뉴의 넓이에 영향을 받지 않고 화면에 꽉 차게 늘일 수 있다.
- 헤더에 만든 메가 메뉴를 표시되도록 할 때, 넓이를 메뉴 전체의 넓이만큼으로 제한을 할 수 있다.
3. 스타일 수정
이제 옵션이나 기본 설정으로 할 수 없는 것들은 약간의 css 추가로 스타일 수정이 필요합니다.
1) 서브 메뉴의 배경 영역을 화면 끝까지 나오도록 수정
크롬 브라우저의 개발자도구로 확인해 보니, 패딩과 마진이 계산식으로 적용된 걸 볼 수 있습니다. 마진과 패딩이 서로 맞물려서 영역을 만들고 있는데, 값을 아래와 같이 수정하니 화면 끝까지 펼쳐집니다.
.header_hor .w-nav.type_desktop .w-nav-list.level_2 {
margin: 0 -50vw!important;
padding: 0px 50vw!important;
}
2) 메뉴의 최소 넓이 및 각 메뉴의 넓이 지정
각 메뉴들은 25%씩 넓이를 갖도록 하고, 총메뉴의 넓이는 css의 최소 넓이를 지정해서 넓힐 수 있습니다.
.header_hor .w-nav.type_desktop>.w-nav-list>.menu-item {
width: 25%;
text-align: center;
}
@media (min-width:1366px) {
.ush_menu_1.type_desktop { width:700px; }
}
@media (max-width:1365px) {
.ush_menu_1.type_desktop { width:500px; }
}
모바일 메뉴가 나오기 전까지 미디어쿼리를 이용해서 최소 넓이를 지정하면서 메뉴 전체 넓이를 조정하고, 각 메뉴 1개는 아래 서브 메뉴와 동일하게 각각 25%(1/4)씩 갖게 했습니다.
4. 마우스가 호버 된 현재 위치 표시를 위한 조치
1) 서브 메뉴의 칼럼에 호버 시 배경색 변경
서브 메뉴의 칼럼에 호버 시 배경색을 반투명 상태에서 불투명 색 백그라운드로 변경하려면 css의 ':hover'선택자를 사용하면 됩니다. 그러면 마우스를 해당 요소 위에 올렸을 때의 스타일을 지정할 수 있습니다.
#section-sub-menu .g-cols > .vc_column_container:hover {
background:lightgray;
}
2) 상위 메뉴의 호버가 바뀌면 아래 칼럼의 호버 상태도 따라서 표시하기
메뉴1에서 메뉴2로 마우스를 옮기면 아래 칼럼의 호버 상태도 바뀌도록 하려면, css 정의만으로는 어렵고 클래스를 넣었다 빼는 조치가 필요하게 됩니다. 이럴 땐 jQuery를 이용하면 되겠습니다.
자식테마의 functions.php에 스크립트 코드를 추가합니다. (※ 자식테마로 테마 커스텀하기)
(function($) {
$(function() {
// 상위 부모 메뉴가 호버 됐을 때 아래 열도 현재 위치 표시 (칼럼에 p-hover 클래스 추가 또는 제거)
$('.header_hor .w-nav.type_desktop>.w-nav-list > li > a').hover(
function() { // 호버 될 때
var idx = $(this).closest('.menu-item').index();
// 구체적으로 타고 내려가면 적용됨
$(this).closest('.menu-item').find('.vc_col-sm-3').eq(idx).addClass('p-hover');
},
function() { // 호버를 벗어날 때
var idx = $(this).closest('.menu-item').index();
$(this).closest('.menu-item').find('.vc_col-sm-3').eq(idx).removeClass('p-hover');
}
);
});
})( jQuery );
원리는 이렇습니다. 메뉴 1~4까지 상위 메뉴에 마우스가 호버(.hover())되면 메뉴 묶음 중 몇 번째인지를 체크합니다. .closet()으로 부모 쪽으로 가장 가까운 클래스명을 가진 요소를 찾고, 거기서부터 다시 .find()를 이용해서 찾고자 하는 요소들까지 내려간 다음, 아까 체크한 몇 번째와 동일한 번째의 칼럼에 'p-hover'라는 클래스를 추가합니다. 호버 상태를 벗어날 때에는 있던 클래스를 빼는 것도 작동 됩니다.
이제 p-hover라는 클래스명을 가진 요소는 이렇게 색을 지정해 주면 배경이 같이 바뀌게 됩니다.
#section-sub-menu .p-hover {background:lightgray;}
3) 아래 서브 메뉴의 칼럼에서 호버 상태가 바뀌면 부모의 호버 스타일도 변경하기
반대로 아래쪽 서브 메뉴에서 다른 칼럼으로 호버 상태가 바뀔 때, 상위 메뉴의 스타일도 바뀌면 현재 위치가 따라서 바뀌는 효과를 줄 수 있습니다.
// 반대로 아래 서브 메뉴의 칼럼을 호버 시 상위 parent 메뉴도 현재 위치 표시 (메뉴에 c-hover 클래스 추가 또는 제거)
$('.section-sub-menu .vc_col-sm-3').hover(
function() {
var idx = $(this).index();
$('.w-nav-list.level_1 > .menu-item').eq(idx).addClass('c-hover');
},
function() {
var idx = $(this).index();
$('.w-nav-list.level_1 > .menu-item').eq(idx).removeClass('c-hover');
}
);
상위 메뉴는 고정돼 있는 거라, 몇 번째인지만 찾아서 'c-hover'라는 클래스만 추가 및 제거합니다.
.menu-item.c-hover > a {color:#277cea;}
여기까지 적용하면 이런 모습이 완성됩니다.
> http://oks-together.hol.es/wpcomponent/megamenu/
메가 메뉴를 구성할 때 전체 메뉴가 계속 표시가 되려면 우선은 모든 서브 메뉴들이 똑같은 모양을 가지고 있어야 하는 것부터 출발합니다. 이걸 한곳에서 만들 수 있게 되면 가장 관리가 간편하고요. Impreza의 경우 재사용 블록이라는 콘텐츠 타입이 있고 페이지 빌더를 이용해서 구성을 할 수 있기에 만들기가 편리합니다. 그다음 드롭다운이 되는 스타일이나 동작 등은 css나 jQuery로 보완을 하게 되는데, 전체 넓이로 바꾸거나 메뉴와 동일한 넓이를 갖도록 하는 것은 이미 조치가 되어 있어서 작업이 훨씬 간소화 됩니다.
테마의 개발 내용이나 특성을 잘 파악하면 Impreza가 아니더라도 메가 메뉴를 좀 더 쉽게 구성하는 방법은 가능할 것인데요, 메가 메뉴를 구성하고자 할 때 이렇게 하면 되는구나 한 번 참고해 보시면 좋겠습니다.
끝.
