---
url: 'https://dxpr.com/ko/hc/documentation/learn-dxpr-theme/low-code-theme-customization/responsive-multi-level-mega-menus'
title: 'DXPR Theme의 반응형 다단계 메가 메뉴 | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T08:39:12+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  DXPR Theme은 Drupal 자체 메뉴 시스템으로 메가 메뉴를 만듭니다. 구조 › 메뉴에서 구조를 만들면 테마가 이를 드롭다운으로 바꿉니다. 항목이 늘면 여러 열로 나뉘고, 3단계까지 중첩되며, 호버나 클릭으로 열리고, 휴대폰에서는 햄버거 메뉴로 접힙니다. 메가 메뉴 모듈도 추가 구성도 필요 없으며, 데스크톱과 모바일에 같은 링크를 제공합니다.
          이 가이드는 Drupal 10.3과 Drupal 11의 DXPR Theme 8.2.1 이상을 다룹니다. 스크린샷은 2026년 10월에 촬영한 것으로, DXPR Theme 8.2.2와 3단계 예시 메뉴를 사용한 Drupal 11.4 사이트의 화면입니다.
tags:
  - 'Thema aanpassen met low-code'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T08:39:12+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      '@type': FAQPage
      mainEntity:
        -
          '@type': Question
          name: 'DXPR Theme에 메가 메뉴 모듈이 필요한가요?'
          acceptedAnswer:
            '@type': Answer
            text: '<p>아니요. 열, 3단계, 호버와 클릭 동작, 키보드 지원, 모바일 메뉴는 테마에서 제공합니다. 부모에 <em>펼침으로 표시</em>가 있는 중첩 메뉴만 있으면 되며, 메뉴 블록의 <em>모든 메뉴 링크 펼치기</em>를 사용해도 됩니다.</p>'
        -
          '@type': Question
          name: '드롭다운이 클릭으로만 열리는 이유는 무엇인가요?'
          acceptedAnswer:
            '@type': Answer
            text: '<p>메뉴 어딘가의 드롭다운에 세 번째 단계가 있기 때문입니다. 그러면 테마가 전체 메뉴를 클릭 전용으로 바꿔 포인터가 이동하는 동안 하위 메뉴가 닫히지 않습니다. 모든 곳에서 호버를 쓰려면 구조를 2단계로 평평하게 만드세요. 터치 화면과 너비 992픽셀 미만의 창에서는 항상 클릭을 사용합니다.</p>'
        -
          '@type': Question
          name: '전체 너비 메가 메뉴 레이아웃은 어떻게 만드나요?'
          acceptedAnswer:
            '@type': Answer
            text: '<p>드롭다운에 직접 하위 항목을 15개 이상 넣으세요. 3열부터 헤더 전체 너비에 걸쳐 표시됩니다. 하위 항목이 8~14개면 부모 링크 아래에 2열이 생기며, 그보다 적으면 1열로 유지됩니다.</p>'
        -
          '@type': Question
          name: '부모 링크가 이동 없이 드롭다운만 열 수 있나요?'
          acceptedAnswer:
            '@type': Answer
            text: '<p>예. 다음을 &lt;nolink&gt; 또는 &lt;button&gt;을 링크로 입력하세요. 둘 다 Drupal 코어에 내장되어 있습니다. 그러면 부모가 드롭다운을 여닫기만 하고 자체 페이지가 없어집니다.</p>'
    -
      '@type': TechArticle
      headline: 'DXPR Theme의 반응형 다단계 메가 메뉴'
      description: |-
        DXPR Theme은 Drupal 자체 메뉴 시스템으로 메가 메뉴를 만듭니다. 구조 › 메뉴에서 구조를 만들면 테마가 이를 드롭다운으로 바꿉니다. 항목이 늘면 여러 열로 나뉘고, 3단계까지 중첩되며, 호버나 클릭으로 열리고, 휴대폰에서는 햄버거 메뉴로 접힙니다. 메가 메뉴 모듈도 추가 구성도 필요 없으며, 데스크톱과 모바일에 같은 링크를 제공합니다.
                이 가이드는 Drupal 10.3과 Drupal 11의 DXPR Theme 8.2.1 이상을 다룹니다. 스크린샷은 2026년 10월에 촬영한 것으로, DXPR Theme 8.2.2와 3단계 예시 메뉴를 사용한 Drupal 11.4 사이트의 화면입니다.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T08:39:12+0000'
      dateModified: '2026-10-24T08:39:12+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/ko/hc/documentation/learn-dxpr-theme/low-code-theme-customization/responsive-multi-level-mega-menus'
      articleSection: 'Thema aanpassen met low-code'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/ko/hc/documentation/learn-dxpr-theme/low-code-theme-customization/responsive-multi-level-mega-menus'
      description: |-
        DXPR Theme은 Drupal 자체 메뉴 시스템으로 메가 메뉴를 만듭니다. 구조 › 메뉴에서 구조를 만들면 테마가 이를 드롭다운으로 바꿉니다. 항목이 늘면 여러 열로 나뉘고, 3단계까지 중첩되며, 호버나 클릭으로 열리고, 휴대폰에서는 햄버거 메뉴로 접힙니다. 메가 메뉴 모듈도 추가 구성도 필요 없으며, 데스크톱과 모바일에 같은 링크를 제공합니다.
                이 가이드는 Drupal 10.3과 Drupal 11의 DXPR Theme 8.2.1 이상을 다룹니다. 스크린샷은 2026년 10월에 촬영한 것으로, DXPR Theme 8.2.2와 3단계 예시 메뉴를 사용한 Drupal 11.4 사이트의 화면입니다.
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: 홈
            item: 'https://dxpr.com/ko'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: ko
---
[Help Center](/ko/node/75)/[Documentation](/ko/hc/documentation) /[Learn DXPR Theme](/hc/documentation/learn-dxpr-theme) /[Thema aanpassen met low-code](/hc/documentation/learn-dxpr-theme/thema-aanpassen-met-low-code) # DXPR Theme의 반응형 다단계 메가 메뉴.

 Learn DXPR ThemeThema aanpassen met low-code

   ## In this guide

DXPR Theme은 Drupal 자체 메뉴 시스템으로 메가 메뉴를 만듭니다. *구조 › 메뉴*에서 구조를 만들면 테마가 이를 드롭다운으로 바꿉니다. 항목이 늘면 여러 열로 나뉘고, 3단계까지 중첩되며, 호버나 클릭으로 열리고, 휴대폰에서는 햄버거 메뉴로 접힙니다. 메가 메뉴 모듈도 추가 구성도 필요 없으며, 데스크톱과 모바일에 같은 링크를 제공합니다.

이 가이드는 Drupal 10.3과 Drupal 11의 DXPR Theme 8.2.1 이상을 다룹니다. 스크린샷은 2026년 10월에 촬영한 것으로, DXPR Theme 8.2.2와 3단계 예시 메뉴를 사용한 Drupal 11.4 사이트의 화면입니다.

## 메뉴의 동작 방식

- **들여쓰기로 만드는 드롭다운.** 하위 항목이 있는 모든 메뉴 링크는 드롭다운이 됩니다. 자체 페이지가 있는 부모는 분할 컨트롤을 가집니다. 링크는 이동하고, 옆의 캐럿은 드롭다운을 엽니다. 페이지가 없는 부모는 한 번의 클릭으로 드롭다운을 엽니다.
- **링크 수에 따른 열.** 직접 하위 항목이 8개 이상인 드롭다운은 2열로, 15개 이상은 3열로, 21개 이상은 4열로, 28개 이상은 5열로 나뉩니다. 3열부터 드롭다운은 헤더 전체 너비로 펼쳐지며, 이것이 메가 메뉴 레이아웃입니다.
- **3단계.** 드롭다운 안의 링크도 하위 항목을 가질 수 있습니다. 부모 아래에 들여쓰기된 채 드롭다운 안에서 펼쳐지므로, 서비스 › 연구 › 실험실 같은 구조를 평평하게 만들지 않고도 사용할 수 있습니다.
- **호버 또는 클릭.** 마우스가 있는 데스크톱에서는 드롭다운이 호버로 열리며 클릭으로는 항상 열립니다. 메뉴의 드롭다운 중 하나라도 세 번째 단계를 가지면 모든 드롭다운이 클릭 전용으로 바뀌어, 포인터가 이동하는 동안 하위 메뉴가 닫히지 않습니다. 터치 화면과 너비 992픽셀 미만의 창에서는 항상 클릭을 사용합니다.
- **키보드와 스크린 리더.** 화살표 키, Enter, Space, Escape, Tab으로 메뉴를 이동하며, 토글은 다음으로 상태를 알립니다: `aria-expanded`. WAI 디스클로저 탐색 패턴을 따릅니다.
- **오른쪽에서 왼쪽으로 쓰는 언어**에는 드롭다운과 하위 메뉴가 거울처럼 반전되어 표시됩니다.
- **휴대폰과 태블릿.** 모바일 중단점(기본값 1200픽셀) 아래에서는 헤더에 햄버거 아이콘이 표시됩니다. 아이콘을 누르면 페이지 위에 메뉴가 열리며, 각 부모 옆의 캐럿이 하위 항목을 그 자리에서 펼칩니다. 첫 번째 단계에서처럼 두 번째 단계에서도 마찬가지입니다.

## 1. 구조 만들기

1. 다음으로 이동하세요: *구조 › 메뉴 › 주 탐색* (`/admin/structure/menu/manage/main`).
2. 필요한 링크를 추가하세요: *링크 추가*. 자체 페이지가 없는 부모의 링크에는 `<button>` (네이티브 키보드 버튼) 또는 `<nolink>`을 입력하세요. 둘 다 드롭다운을 엽니다.
3. 하위 항목을 부모 아래로 끌어 한 단계 들여쓰고, 세 번째 단계는 한 단계 더 들여쓴 뒤 **저장**을 누르세요.
4. 모든 부모 링크를 편집하여 *펼침으로 표시*에 체크하고 **저장**을 누르세요. 모든 부모를 한 번에 펼치려면 주 메뉴 블록 설정에서 *모든 메뉴 링크 펼치기*에 체크하세요.

이것이 구성의 전부입니다. 드롭다운이 렌더링하는 최대 단계는 3단계이며, 더 깊은 링크는 메뉴가 아니라 페이지에 두세요.

메뉴 관리 화면. 하위 항목이 부모 아래에 들여쓰기되어 있고, 두 번째 단계 아래에 세 번째 단계가 있음.

부모 링크에 *펼침으로 표시*가 없으면 자체 페이지를 제외하고 하위 항목 없이 렌더링됩니다.

## 2. 데스크톱 메뉴 확인하기

사이트를 열고 부모 링크 옆의 캐럿에 호버하거나 클릭하세요. 페이지가 없는 부모도 클릭으로 열립니다. 메뉴에 세 번째 단계가 있으면 드롭다운은 클릭으로만 열립니다. 짧은 목록은 1열 드롭다운으로 열리고, 긴 목록은 여러 열로 퍼지며, 3열부터는 헤더 전체 너비에 걸쳐 표시됩니다. 순서는 메뉴 관리 화면의 링크 가중치를 열 단위로 따릅니다.

데스크톱의 서비스 드롭다운. 세 번째 단계가 안에서 펼쳐져 있음.

## 3. 모바일 메뉴 확인하기

브라우저를 모바일 중단점 아래로 좁히거나 휴대폰에서 사이트를 여세요. 햄버거 아이콘을 누르면 페이지 위에 메뉴가 열립니다. 부모 옆의 캐럿을 탭하면 하위 항목이 그 자리에서 펼쳐지고, 2단계 링크 옆의 캐럿을 탭하면 세 번째 단계가 펼쳐집니다. 구성할 것은 없습니다. 같은 메뉴입니다.

서비스가 펼쳐진 모바일 메뉴. 연구 옆의 캐럿이 세 번째 단계를 엽니다.

## 4. 헤더와 메뉴 꾸미기

겉모습에 관한 모든 것은 테마 설정의 *헤더 및 주 메뉴* 탭에 있습니다(*모양*에서 DXPR Theme이나 서브테마 옆의 *설정* 클릭). 설정을 바꾸는 동안 설정 페이지에 실시간 미리 보기가 표시됩니다.

- **레이아웃**: *일반(로고 왼쪽, 메뉴 오른쪽)*부터 가운데 쌓기와 인라인 변형을 거쳐 *로고 오른쪽, 메뉴 왼쪽*까지 일곱 가지 헤더 레이아웃.
- **헤더 스타일**: *일반*, 또는 투명 배경으로 페이지 콘텐츠 위에 헤더를 올리는 *오버레이*. 헤더 불투명도, 높이, 로고 높이도 설정합니다. **고정 위치**는 스크롤 중에도 헤더를 화면에 유지합니다. 켜져 있으면 **스티키 헤더**가 스크롤 오프셋 이후 헤더를 더 작은 높이와 별도 불투명도로 바꿉니다.
- **주 메뉴 링크**: *드롭다운 너비*(자동 또는 100~500픽셀 고정 너비), *글꼴 스타일*(일반, 대문자, 굵게, 리드 텍스트), *링크 간격*, 그리고 불투명도·색상 배경·색상 텍스트·테두리(위 또는 아래, 왼쪽·오른쪽·가운데에서 밀려 들어오거나 위에서 페이드인) 중 하나의 *호버 스타일*.
- **모바일 헤더**와 **모바일 메뉴 옵션**: 모바일 중단점(항상 모바일 헤더를 쓰려면 최대값 4100으로 설정), 모바일 헤더 높이와 위치, 햄버거 아이콘(세 줄 또는 두 줄)과 애니메이션, 메뉴 정렬.
- **사용자 정의 헤더 색상**: 열여섯 가지 색상. 내비바, 헤더 블록, 메뉴, 드롭다운, 모바일 메뉴의 배경과 텍스트, 그리고 뒤의 세 항목에 대한 호버 배경과 텍스트를 테마 팔레트에서 고르거나 사용자 정의 값으로 설정.

모든 변경은 CSS가 아니라 설정이므로 테마 업데이트 후에도 유지됩니다. 서브테마에는 자체 설정이 있으므로 서브테마의 설정 페이지에서 변경하세요.

## Better Mega Menu나 다른 메뉴 모듈에서 옮겨올 때

모듈을 제거하고 코어 *주 탐색* 블록을 테마의 *탐색(접기 가능)* 리전에 두세요(아직 없다면). 작은 화면에서 햄버거 메뉴가 접히는 리전이 바로 그곳입니다. 모듈이 구성으로 하던 모든 일(열, 단계, 호버, 모바일 메뉴)을 DXPR Theme은 메뉴 구조에서 처리합니다. 이어지지 않는 것은 이미지나 텍스트 블록 같은 드롭다운 안의 콘텐츠입니다. 그런 콘텐츠는 메뉴가 가리키는 랜딩 페이지에 두세요.

## 메뉴 만들기를 AI 에이전트에게 맡기기

메뉴는 계층이 있는 링크 목록으로, 코딩 에이전트가 잘하는 종류의 구조화된 작업입니다. 다음을 설치하면 [Drush Webmaster 스킬](/drupal-agent-skills) (`drush wm:setup-ai`). 에이전트가 브리프로 메뉴 링크를 만들고 정렬합니다. 예를 들어 “연구, 교육, 시설이 있는 서비스 메뉴. 연구 아래에 실험실 셋” 같은 브리프입니다. DXPR Theme 스킬(`drush dxt:setup-ai`)과 함께라면 브랜드에 맞게 헤더 레이아웃, 스티키 동작, 메뉴 색상도 정해줍니다. 결과는 사이트에서 검토하세요.

## DXPR Theme 메가 메뉴에 대한 질문

### DXPR Theme에 메가 메뉴 모듈이 필요한가요?

아니요. 열, 3단계, 호버와 클릭 동작, 키보드 지원, 모바일 메뉴는 테마에서 제공합니다. 부모에 *펼침으로 표시*가 있는 중첩 메뉴만 있으면 되며, 메뉴 블록의 *모든 메뉴 링크 펼치기*를 사용해도 됩니다.

### 드롭다운이 클릭으로만 열리는 이유는 무엇인가요?

메뉴 어딘가의 드롭다운에 세 번째 단계가 있기 때문입니다. 그러면 테마가 전체 메뉴를 클릭 전용으로 바꿔 포인터가 이동하는 동안 하위 메뉴가 닫히지 않습니다. 모든 곳에서 호버를 쓰려면 구조를 2단계로 평평하게 만드세요. 터치 화면과 너비 992픽셀 미만의 창에서는 항상 클릭을 사용합니다.

### 전체 너비 메가 메뉴 레이아웃은 어떻게 만드나요?

드롭다운에 직접 하위 항목을 15개 이상 넣으세요. 3열부터 헤더 전체 너비에 걸쳐 표시됩니다. 하위 항목이 8~14개면 부모 링크 아래에 2열이 생기며, 그보다 적으면 1열로 유지됩니다.

### 부모 링크가 이동 없이 드롭다운만 열 수 있나요?

예. 다음을 `<nolink>` 또는 `<button>`을 링크로 입력하세요. 둘 다 Drupal 코어에 내장되어 있습니다. 그러면 부모가 드롭다운을 여닫기만 하고 자체 페이지가 없어집니다.