1. 기본 환경
- hugo extended
- papermod theme
2. 단계별 설치 및 설정
2.1. html 레이아웃 추가
####### layouts/partials/menu-overlay.html
<button id="menu-trigger" aria-label="Open Menu">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
</button>
<div id="full-menu" class="overlay">
<button id="menu-close" aria-label="Close Menu">×</button>
<nav class="overlay-content">
<div class="menu-grid">
{{- range .Site.Menus.main }}
<a href="{{ .URL | relLangURL }}">{{ .Name }}</a>
{{- end }}
</div>
</nav>
</div>
####### layouts/partials/header.html 에서 기존 메뉴관련 소스 삭제 후
{{ partial "menu-overlay.html" . }}
2.2. JavaScript 설정
####### assets/js/menu-overlay.js
document.addEventListener('DOMContentLoaded', () => {
const trigger = document.getElementById('menu-trigger');
const close = document.getElementById('menu-close');
const overlay = document.getElementById('full-menu');
// 요소가 존재할 때만 이벤트 리스너 등록 (에러 방지)
if (trigger && close && overlay) {
trigger.addEventListener('click', () => {
overlay.classList.add('open');
document.body.style.overflow = 'hidden';
});
close.addEventListener('click', () => {
overlay.classList.remove('open');
document.body.style.overflow = 'auto';
});
}
});
####### layouts/partials/extend_footer.html
{{- $menuJS := resources.Get "js/menu-overlay.js" | minify | fingerprint -}}
<script defer src="{{ $menuJS.RelPermalink }}" integrity="{{ $menuJS.Data.Integrity }}"></script>
2.3. CSS 설정
- 전체화면 오버레이
####### assets/css/extended/custom.css
/* 오버레이 기본 스타일 */
.overlay {
height: 100%;
width: 100%;
display: none; /* 기본은 숨김 */
position: fixed;
z-index: 9999;
top: 0;
left: 0;
background-color: var(--theme); /* PaperMod 테마 색상 연동 */
overflow-y: auto;
transition: 0.3s;
}
/* 오버레이 활성화 시 */
.overlay.open {
display: block;
}
/* 닫기 버튼 */
#menu-close {
position: absolute;
top: 15px;
right: 45px;
font-size: 60px;
background: none;
border: none;
color: var(--primary);
cursor: pointer;
}
/* 메뉴 리스트 배치 */
.overlay-content {
position: relative;
top: 15%;
width: 80%;
margin: 0 auto;
text-align: center;
}
.menu-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 메뉴가 많으므로 그리드 활용 */
gap: 20px;
}
.overlay-content a {
padding: 15px;
text-decoration: none;
font-size: 1.2rem;
font-weight: bold;
color: var(--primary);
display: block;
transition: 0.2s;
border: 1px solid var(--tertiary);
border-radius: 8px;
}
.overlay-content a:hover {
background: var(--tertiary);
}
- 모달 스타일
.overlay {
/* ... 기존 속성 유지 ... */
background-color: rgba(0, 0, 0, 0.8); /* 배경을 반투명한 검정으로 (취향껏 조절) */
display: flex;
align-items: center;
justify-content: center;
}
.overlay-content {
top: 0; /* 기존 top: 15% 해제 */
width: 90%; /* 가로 폭 */
max-width: 800px; /* 최대 폭 제한 */
max-height: 80vh; /* 높이 제한 (화면의 80%) */
background: var(--theme); /* 메뉴판 배경은 테마색 */
padding: 40px;
border-radius: 15px; /* 모서리 둥글게 */
box-shadow: 0 10px 30px rgba(0,0,0,0.5); /* 그림자 효과 */
overflow-y: auto; /* 내용이 많으면 박스 안에서 스크롤 */
}
- 슬라이드 다운
.overlay {
/* ... 기존 속성 유지 ... */
height: 60vh; /* 화면의 60% 높이만 차지 */
border-bottom: 5px solid var(--tertiary); /* 하단 경계선 */
}
- 좌우측 슬라이드
.overlay {
/* ... 기존 속성 유지 ... */
width: 400px; /* 너비 고정 */
left: auto;
right: 0; /* 오른쪽에 붙임 */
transform: translateX(100%); /* 처음에 숨김 */
transition: transform 0.3s ease-in-out;
display: block !important; /* display 대신 transform으로 제어 */
}
.overlay.open {
transform: translateX(0); /* 열릴 때 미끄러져 들어옴 */
}
【참고자료】
