<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>사이드 메뉴 + 아코디언</title>
<style>
*{ margin:0; padding:0; box-sizing:border-box; }
body{
font-family:Arial, sans-serif;
background:#f1f5f9;
}
header{
height:70px;
background:#111827;
color:white;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 30px;
}
.menu-btn{
font-size:30px;
cursor:pointer;
}
.sidebar{
position:fixed;
top:0;
left:0;
width:280px;
height:100vh;
background:#1f2937;
transform:translateX(-100%);
transition:.4s;
padding-top:70px;
}
.sidebar.active{
transform:translateX(0);
}
.close-btn{
position:absolute;
top:18px;
right:20px;
color:white;
font-size:34px;
cursor:pointer;
}
.menu-title{
width:100%;
padding:18px 25px;
background:none;
border:none;
color:white;
text-align:left;
font-size:17px;
cursor:pointer;
border-bottom:1px solid rgba(255,255,255,.1);
}
.menu-title:hover{
background:#374151;
}
.submenu{
display:none;
background:#111827;
}
.submenu.active{
display:block;
}
.submenu a{
display:block;
padding:14px 40px;
color:#d1d5db;
text-decoration:none;
font-size:15px;
}
.submenu a:hover{
background:#374151;
color:white;
}
.content{
padding:60px;
text-align:center;
}
</style>
</head>
<body>
<header>
<div class="menu-btn" id="menuBtn">☰</div>
<h2>커사맨 포털</h2>
</header>
<div class="sidebar" id="sidebar">
<div class="close-btn" id="closeBtn">×</div>
<button class="menu-title"> 골프 ▼</button>
<div class="submenu">
<a href="#">스크린 골프</a>
<a href="#">필드 골프</a>
<a href="#">골프 동호회</a>
</div>
<button class="menu-title"> 커뮤니티 ▼</button>
<div class="submenu">
<a href="#">자유게시판</a>
<a href="#">후기게시판</a>
<a href="#">질문답변</a>
</div>
<button class="menu-title"> AI정보 ▼</button>
<div class="submenu">
<a href="#">AI툴 모음</a>
<a href="#">AI 수익화</a>
<a href="#">쇼츠 제작</a>
</div>
</div>
<div class="content">
<h1>사이드 메뉴 + 아코디언 서브메뉴</h1>
<p>☰ 버튼을 누른 뒤 메뉴를 클릭해보세요.</p>
</div>
<script>
const menuBtn = document.querySelector("#menuBtn");
const closeBtn = document.querySelector("#closeBtn");
const sidebar = document.querySelector("#sidebar");
menuBtn.addEventListener("click", function(){
sidebar.classList.add("active");
});
closeBtn.addEventListener("click", function(){
sidebar.classList.remove("active");
});
const menuTitles = document.querySelectorAll(".menu-title");
const submenus = document.querySelectorAll(".submenu");
for(let i = 0; i < menuTitles.length; i++){
menuTitles[i].addEventListener("click", function(){
submenus[i].classList.toggle("active");
});
}
</script>
</body>
</html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>사이드 메뉴 + 아코디언</title>
<style>
*{ margin:0; padding:0; box-sizing:border-box; }
body{
font-family:Arial, sans-serif;
background:#f1f5f9;
}
header{
height:70px;
background:#111827;
color:white;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 30px;
}
.menu-btn{
font-size:30px;
cursor:pointer;
}
.sidebar{
position:fixed;
top:0;
left:0;
width:280px;
height:100vh;
background:#1f2937;
transform:translateX(-100%);
transition:.4s;
padding-top:70px;
}
.sidebar.active{
transform:translateX(0);
}
.close-btn{
position:absolute;
top:18px;
right:20px;
color:white;
font-size:34px;
cursor:pointer;
}
.menu-title{
width:100%;
padding:18px 25px;
background:none;
border:none;
color:white;
text-align:left;
font-size:17px;
cursor:pointer;
border-bottom:1px solid rgba(255,255,255,.1);
}
.menu-title:hover{
background:#374151;
}
.submenu{
display:none;
background:#111827;
}
.submenu.active{
display:block;
}
.submenu a{
display:block;
padding:14px 40px;
color:#d1d5db;
text-decoration:none;
font-size:15px;
}
.submenu a:hover{
background:#374151;
color:white;
}
.content{
padding:60px;
text-align:center;
}
</style>
</head>
<body>
<header>
<div class="menu-btn" id="menuBtn">☰</div>
<h2>커사맨 포털</h2>
</header>
<div class="sidebar" id="sidebar">
<div class="close-btn" id="closeBtn">×</div>
<button class="menu-title"> 골프 ▼</button>
<div class="submenu">
<a href="#">스크린 골프</a>
<a href="#">필드 골프</a>
<a href="#">골프 동호회</a>
</div>
<button class="menu-title"> 커뮤니티 ▼</button>
<div class="submenu">
<a href="#">자유게시판</a>
<a href="#">후기게시판</a>
<a href="#">질문답변</a>
</div>
<button class="menu-title"> AI정보 ▼</button>
<div class="submenu">
<a href="#">AI툴 모음</a>
<a href="#">AI 수익화</a>
<a href="#">쇼츠 제작</a>
</div>
</div>
<div class="content">
<h1>사이드 메뉴 + 아코디언 서브메뉴</h1>
<p>☰ 버튼을 누른 뒤 메뉴를 클릭해보세요.</p>
</div>
<script>
const menuBtn = document.querySelector("#menuBtn");
const closeBtn = document.querySelector("#closeBtn");
const sidebar = document.querySelector("#sidebar");
menuBtn.addEventListener("click", function(){
sidebar.classList.add("active");
});
closeBtn.addEventListener("click", function(){
sidebar.classList.remove("active");
});
const menuTitles = document.querySelectorAll(".menu-title");
const submenus = document.querySelectorAll(".submenu");
for(let i = 0; i < menuTitles.length; i++){
menuTitles[i].addEventListener("click", function(){
submenus[i].classList.toggle("active");
});
}
</script>
</body>
</html>
#사이드 메뉴 + 아코디언