<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>사이드 메뉴</title>
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
font-family:Arial, sans-serif;
background:#f1f5f9;
}
/* 상단 헤더 */
header{
height:70px;
background:#111827;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 30px;
color:white;
}
/* 햄버거 */
.menu-btn{
font-size:30px;
cursor:pointer;
}
/* 사이드 메뉴 */
.sidebar{
position:fixed;
top:0;
left:0;
width:280px;
height:100vh;
background:#1f2937;
padding-top:80px;
transform:translateX(-100%);
transition:.4s;
}
/* 열렸을 때 */
.sidebar.active{
transform:translateX(0);
}
/* 닫기 버튼 */
.close-btn{
position:absolute;
top:20px;
right:20px;
color:white;
font-size:35px;
cursor:pointer;
}
/* 메뉴 */
.sidebar ul{
list-style:none;
}
.sidebar li{
border-bottom:1px solid rgba(255,255,255,.1);
}
.sidebar a{
display:block;
padding:20px 30px;
color:white;
text-decoration:none;
transition:.3s;
}
.sidebar a:hover{
background:#374151;
padding-left:40px;
}
/* 내용 */
.content{
padding:50px;
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>
<ul>
<li><a href="#">홈</a></li>
<li><a href="#">골프</a></li>
<li><a href="#">커뮤니티</a></li>
<li><a href="#">AI정보</a></li>
<li><a href="#">마이페이지</a></li>
</ul>
</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");
});
</script>
</body>
</html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>사이드 메뉴</title>
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
font-family:Arial, sans-serif;
background:#f1f5f9;
}
/* 상단 헤더 */
header{
height:70px;
background:#111827;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 30px;
color:white;
}
/* 햄버거 */
.menu-btn{
font-size:30px;
cursor:pointer;
}
/* 사이드 메뉴 */
.sidebar{
position:fixed;
top:0;
left:0;
width:280px;
height:100vh;
background:#1f2937;
padding-top:80px;
transform:translateX(-100%);
transition:.4s;
}
/* 열렸을 때 */
.sidebar.active{
transform:translateX(0);
}
/* 닫기 버튼 */
.close-btn{
position:absolute;
top:20px;
right:20px;
color:white;
font-size:35px;
cursor:pointer;
}
/* 메뉴 */
.sidebar ul{
list-style:none;
}
.sidebar li{
border-bottom:1px solid rgba(255,255,255,.1);
}
.sidebar a{
display:block;
padding:20px 30px;
color:white;
text-decoration:none;
transition:.3s;
}
.sidebar a:hover{
background:#374151;
padding-left:40px;
}
/* 내용 */
.content{
padding:50px;
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>
<ul>
<li><a href="#">홈</a></li>
<li><a href="#">골프</a></li>
<li><a href="#">커뮤니티</a></li>
<li><a href="#">AI정보</a></li>
<li><a href="#">마이페이지</a></li>
</ul>
</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");
});
</script>
</body>
</html>
#사이드 메뉴