# 디스커스 헤더로 드롭다운 메뉴 추가하는 방법
**URL:** https://meta.discourse.org/t/how-to-add-dropdown-menu-with-discourse-headers/182507
**Category:** Support
**Created:** [3월 8, 2021, 4:04오후 UTC](https://meta.discourse.org/t/how-to-add-dropdown-menu-with-discourse-headers/182507 "2021-03-08T16:04:57Z")
**Posts on this page:** 5
**Page:** 1
### Author:  [@narayanan](https://meta.discourse.org/u/narayanan)
#### Post date: [3월 8, 2021, 4:04오후 UTC](https://meta.discourse.org/t/how-to-add-dropdown-menu-with-discourse-headers/182507/1 "2021-03-08T16:04:57Z")
Discourse 플러그인 API 구성 요소를 사용하여 헤더 메뉴를 추가했습니다. 하지만 해당 헤더에 드롭다운 메뉴를 추가하는 방법에 대해서는 전혀 모르겠습니다.
Discourse API 플러그인 또는 기타 방법으로 Discourse 헤더에 드롭다운 메뉴를 추가할 수 있을까요?
아래와 같은 출력을 기대하고 있습니다.
---
### Author:  [@simon](https://meta.discourse.org/u/simon)
#### Post date: [3월 9, 2021, 12:09오전 UTC](https://meta.discourse.org/t/how-to-add-dropdown-menu-with-discourse-headers/182507/2 "2021-03-09T00:09:24Z")
이 테마 컴포넌트를 살펴보는 것이 좋을 수 있습니다: [Header Submenus](https://meta.discourse.org/t/header-submenus/94584). 이 컴포넌트를 사용하면 서브메뉴가 있는 헤더 메뉴를 만들 수 있습니다. 해당 컴포넌트를 그대로 사용하거나, 자체 컴포넌트를 만드는 방법의 예시 코드로 참고할 수 있습니다.
---
### Author:  [@narayanan](https://meta.discourse.org/u/narayanan)
#### Post date: [3월 9, 2021, 5:25오전 UTC](https://meta.discourse.org/t/how-to-add-dropdown-menu-with-discourse-headers/182507/3 "2021-03-09T05:25:31Z")
테마 컴포넌트를 확인해 보았습니다.
현재 헤더와 서브메뉴는 Discourse 헤더 앞에 추가되어 있습니다. 아래에서 표시한 Discourse 헤더에 헤더와 서브메뉴가 추가되어야 합니다.
---
### Author:  [@narayanan](https://meta.discourse.org/u/narayanan)
#### Post date: [3월 16, 2021, 4:08오후 UTC](https://meta.discourse.org/t/how-to-add-dropdown-menu-with-discourse-headers/182507/4 "2021-03-16T16:08:31Z")
저는 discourse 플러그인 API 이벤트를 통해 커스텀 HTML을 삽입하는 방식으로 이 문제를 해결했습니다.
먼저 “Custom Header Links” 구성 요소를 설치하고 헤더를 평소처럼 설정했습니다. 그런 다음 헤더 DOM 요소가 로드되면 아래처럼 discourse API 이벤트를 사용해 헤더에 커스텀 HTML을 삽입했습니다.
```
api.onPageChange(url => {
if($(".header-buttons").length != 0 && i == 0) {
$('.custom-header-links .services-custom-header-links a').append("inserting icons");
$(".header-buttons").prepend("adding ul tag elements");
$(".resource-dropdown-menu").after("appending next ul element using first inserted ul element class name");
i++;
}
});
```
이 방법을 사용하면 헤더 DOM에 서브메뉴를 추가할 수 있습니다. 하지만 정렬 문제가 발생하므로 CSS를 통해 정렬을 유지해야 합니다. 또한, 서브메뉴를 열기 위한 클릭 함수와 헤더 배경색 변경 등도 작성해야 합니다. 감사합니다 🙂
---
### Author:  [@system](https://meta.discourse.org/u/system)
#### Post date: [4월 15, 2021, 4:09오후 UTC](https://meta.discourse.org/t/how-to-add-dropdown-menu-with-discourse-headers/182507/5 "2021-04-15T16:09:28Z")
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.