* 오늘은 자바스크립트로 드롭다운 메뉴 만들기 도전
* 저번에 못 만들고 타협해서 셀렉트 박스로 바꿨었는데
<!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>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="dropdown closed"> // class에서 dropdown과 closed 2가지를 선언
<h2 class="icon">DropDown <sapn>✓</sapn></h2>
<ul class="menu">
<li><a href="https://www.youtube.com/" target="_blank">유튜브</a></li>
<li><a href="#">menu 2</a></li>
<li><a href="#">menu 3</a></li>
<li><a href="#">menu 4</a></li>
</ul>
</div>
<script src="app2.js"></script>
</body>
</html>* class에서 띄어쓰기를 하면 하나의 class가 아닌 다른 class로 선언된다.
body {
margin: 0;
font-family: Courier New;
font-size: 20px;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
a {
text-decoration: none;
color: black;
}
.dropdown {
transition: all 0.2s ease-in-out;
overflow: hidden; // overflow 속성 값을 hidden으로 해야 dropdown의 자식요소 부분이 숨겨진다.
margin: 30px;
background: rgb(248, 248, 248);
border: solid 1px rgb(222, 222, 222);
width: 320px;
cursor: pointer;
}
.icon {
display: flex;
justify-content: space-between;
padding: 0 25px 0 10px;
}
.menu {
height: auto;
}
.menu li {
font-size: 20px;
text-align: center;
text-transform: uppercase;
padding: 14px 10px;
border-top: solid 1px rgb(202, 202, 202);
}
.dropdown.closed .menu {
height: 0px;
} // dropdown의 자식요소인 메뉴의 범위?
* 0px로 설정해야 메뉴바의 모습이 통째로 가려진다.
* overflow : hidden; 과 같이 써야 드롭다운 메뉴에서 하위 메뉴들이 표시가 되지않더라...고 지웠다 썼다를 반복한 끝에 알았다... 머리는 알겠는데 설명이 부족하다..
const dropDown = document.querySelector(".dropdown")
function mouseenter () {
if(dropDown.classList.contains('closed')) {
dropDown.classList.remove('closed')
}
} // contains( String ) 지정한 클래스 값이 엘리먼트의 class 속성에 존재하는지 확인한다.
// if 문을 쓰지않고 dropDown.classList.toggle('closed') 만 함수에 사용해도 똑같이 작동한다.
// 본문에 쓰인건 조건문을 이용한 토글 기능
function mouseleave() {
if(!dropDown.classList.contains('closed')) {
dropDown.classList.add('closed')
}
} // !는 논리 연산자 NOT을 뜻 합니다.
// dropDown 클래스에 closed가 들어가 있지 않으면 closed를 추가해줍니다.
dropDown.addEventListener("mouseenter", mouseenter);
dropDown.addEventListener("mouseleave", mouseleave);* 이렇게 하면 드롭다운 위에 마우스를 올렸을 때 하위 메뉴바들이 나타나며, 마우스가 드롭다운 위에서 떠났을 때 하위 메뉴바들이 사라집니다.
댓글