leftMenu.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{margin: 0; padding: 0; box-sizing: border-box;}
li {list-style: none;}
a {text-decoration: none; color: inherit;}
/* (display)블랙 이미지, 부드럽게 */
@keyframes fadeIn {
0% {opacity: 0.4;}
100%{opacity: 1;}
}
#header {
background: rgb(211, 93, 113);
text-align: center;
color: #fff;
position: relative;
height: 60px;
}
#header #toggle {
position: absolute;
width: 60px;
height: 100%;
display: flex;
flex-direction: column;
/* 세로 배치 ) 까먹지않기 ↑ ★★ */
justify-content: center;
align-items: center;
top: 0;
left: 0;
background: #555;
}
#header #toggle span {
width: 60%;
height: 4px;
background: #fff;
margin: 4px 0;
}
/* 어두운 배경 */
#blackbg {
position: absolute;
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, 0.5);
top: 0;
left: 0;
display: none;
/* 부드럽게 ↓ */
/* display 는 transition 안됨 */
animation: fadeIn 1s;
}
#blackbg.on {
display: block;
}
/* 메뉴 */
#leftmenu {
position: absolute;
width: 260px;
height: 100vh;
background: #fff;
top: 0;
left: -260px;
transition: 0.5s;
}
#leftmenu.on {
left: 0px;
}
/* 메뉴닫기 */
#leftmenu div {
height: 60px;
border-bottom: 1px solid #ccc;
}
#leftmenu div span {
float: right;
display: block;
width: 80px;
height: 100%;
background: tomato;
color: #fff;
text-align: center;
line-height: 60px;
}
/* 큰 메뉴 */
#leftmenu > ul > li {
border-bottom: 1px solid #ccc;
line-height: 40px;
height: 40px;
overflow: hidden;
transition: 0.5s;
}
/* on 꼭 붙여서 미리 확인해보기 */
#leftmenu > ul >li.on{
/* % 주면 부드럽게 안됨 */
height: 165px;
}
/* 서브메뉴 */
#leftmenu > ul > li li {
line-height: 30px;
padding-left: 20px;
border-top: 1px solid #ccc;
background: #eee;
}
</style>
</head>
<body>
<div id="header">
<h1>LOGO</h1>
<div id="toggle">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div id="blackbg"></div>
<div id="leftmenu">
<div>
<span id="menuClose">메뉴닫기</span>
</div>
<ul>
<li>
<a href="">회사정보</a>
<ul>
<li><a href="">서브메뉴1</a></li>
<li><a href="">서브메뉴2</a></li>
<li><a href="">서브메뉴3</a></li>
<li><a href="">서브메뉴4</a></li>
</ul>
</li>
<li>
<a href="">인재채용</a>
<ul>
<li><a href="">서브메뉴1</a></li>
<li><a href="">서브메뉴2</a></li>
<li><a href="">서브메뉴3</a></li>
<li><a href="">서브메뉴4</a></li>
</ul>
</li>
<li>
<a href="">교육신청</a>
<ul>
<li><a href="">서브메뉴1</a></li>
<li><a href="">서브메뉴2</a></li>
<li><a href="">서브메뉴3</a></li>
<li><a href="">서브메뉴4</a></li>
</ul>
</li>
<li>
<a href="">홍보센터</a>
<ul>
<li><a href="">서브메뉴1</a></li>
<li><a href="">서브메뉴2</a></li>
<li><a href="">서브메뉴3</a></li>
<li><a href="">서브메뉴4</a></li>
</ul>
</li>
<li>
<a href="">투자정보</a>
<ul>
<li><a href="">서브메뉴1</a></li>
<li><a href="">서브메뉴2</a></li>
<li><a href="">서브메뉴3</a></li>
<li><a href="">서브메뉴4</a></li>
</ul>
</li>
</ul>
</div>
<script>
let toggleBtn = document.querySelector('#toggle');
let leftClose = document.querySelector('#menuClose')
let lis = document.querySelectorAll('#leftmenu > ul > li');
toggleBtn.addEventListener('click', function() { // 이벤트 발생시 함수실행
// console.log('클릭됨'); // 이벤트 연결되었는지, 확인 해주기
// #blackbg 에 on클래스 붙이기
// #leftmenu 에 on클래스 붙이기
document.querySelector('#blackbg').classList.add('on'); // add = 붙임
document.querySelector('#leftmenu').classList.add('on');
})
leftClose.addEventListener('click', function() { // 클릭하면 함수실행
// #blackbg 에 on클래스 제거
// #leftmenu 에 on클래스 제거
document.querySelector('#blackbg').classList.remove('on');
document.querySelector('#leftmenu').classList.remove('on');
})
lis.forEach( (li, index) => {
li.addEventListener('click', function() {
// li.children('ul').classList.add('on');
li.classList.toggle('on');
lis.forEach( (li, index2) => { // 서브메뉴 클릭했을 때, 다른메뉴는 닫기
if(index != index2) {
li.classList.remove('on');
}
})
})
})
</script>
</body>
</html>
