<!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;
}
header{
height:70px;
background:#111827;
color:white;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 30px;
}
.logo{
font-size:24px;
font-weight:bold;
}
.menu{
display:flex;
gap:30px;
list-style:none;
}
.menu li{
cursor:pointer;
}
.hamburger{
display:none;
font-size:30px;
cursor:pointer;
}
@media(max-width:768px){
.hamburger{
display:block;
}
.menu{
position:absolute;
top:70px;
left:0;
width:100%;
background:#1f2937;
flex-direction:column;
align-items:center;
gap:0;
display:none;
}
.menu li{
width:100%;
text-align:center;
padding:18px;
border-top:1px solid rgba(255,255,255,.1);
}
.menu.active{
display:flex;
}
}
</style>
</head>
<body>
<header>
<div class="logo">커사맨</div>
<ul class="menu" id="menu">
<li>홈</li>
<li>부산정보</li>
<li>골프</li>
<li>커뮤니티</li>
<li>AI정보</li>
</ul>
<div class="hamburger" id="hamburger">
☰
</div>
</header>
<script>
const hamburger = document.querySelector("#hamburger");
const menu = document.querySelector("#menu");
hamburger.addEventListener("click", function(){
menu.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;
}
header{
height:70px;
background:#111827;
color:white;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 30px;
}
.logo{
font-size:24px;
font-weight:bold;
}
.menu{
display:flex;
gap:30px;
list-style:none;
}
.menu li{
cursor:pointer;
}
.hamburger{
display:none;
font-size:30px;
cursor:pointer;
}
@media(max-width:768px){
.hamburger{
display:block;
}
.menu{
position:absolute;
top:70px;
left:0;
width:100%;
background:#1f2937;
flex-direction:column;
align-items:center;
gap:0;
display:none;
}
.menu li{
width:100%;
text-align:center;
padding:18px;
border-top:1px solid rgba(255,255,255,.1);
}
.menu.active{
display:flex;
}
}
</style>
</head>
<body>
<header>
<div class="logo">커사맨</div>
<ul class="menu" id="menu">
<li>홈</li>
<li>부산정보</li>
<li>골프</li>
<li>커뮤니티</li>
<li>AI정보</li>
</ul>
<div class="hamburger" id="hamburger">
☰
</div>
</header>
<script>
const hamburger = document.querySelector("#hamburger");
const menu = document.querySelector("#menu");
hamburger.addEventListener("click", function(){
menu.classList.toggle("active");
});
</script>
</body>
</html>
#햄버거 메뉴