<!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 type="text/css">
/* 기본 속성 초기화 */
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
/* float 처리 */
.pull-left {
float: left;
}
.clearfix:after {
content: '';
display: block;
float: none;
clear: both;
}
/* 메뉴에 포함된 모든 링크에 대한
크기,배경 지정 및 글자 꾸미기 */
.menu a {
display: block;
width: 179px;
height: 48px;
background: url('img/btn.png');
line-height: 48px;
text-align: center;
font-weight: bold;
color: #cfdfb5;
text-decoration: none;
}
/* 마우스가 올라간 링크에 대한 배경이미지 변경 */
.menu a:hover {
background: url('img/btn_over.png');
}
/* 서브메뉴가 펼쳐지더라도 다른 요소들 위에 떠 있어야 하므로,position처리 */
.sub {
position: absolute;
z-index: 1000;
max-height: 0;
overflow: hidden;
transition: max-height 180ms ease-out;
}
/* 서브메뉴의 기준점을 부모요소로 지정하기 위한 처리 */
.menu-item {
position: relative;
}
</style>
</head>
<body>
<ul class="menu clearfix">
<li class="menu-item pull-left">
<a href="#">Frontend</a>
<ul class="sub">
<li><a href="#">HTML+CSS</a></li>
<li><a href="#">Javascript</a></li>
<li><a href="#">jQuery</a></li>
</ul>
</li>
<li class="menu-item pull-left">
<a href="#">Backend</a>
<ul class="sub">
<li><a href="#">PHP</a></li>
<li><a href="#">JSP</a></li>
<li><a href="#">Node.js</a></li>
</ul>
</li>
<li class="menu-item pull-left">
<a href="#">Mobile</a>
<ul class="sub">
<li><a href="#">iOS</a></li>
<li><a href="#">Android</a></li>
<li><a href="#">Hybrid</a></li>
</ul>
</li>
</ul>
<h1>Hello World</h1>
<script>
const menuItem = document.querySelectorAll(".menu-item");
for (let menu of menuItem) {
menu.addEventListener('mouseover', (e) => {
const current = e.currentTarget;
const sub = current.querySelector('.sub');
//scrollHeight는 요소의 크기를 벗어난 만큼의 높이를 의미
sub.style.maxHeight = sub.scrollHeight + "px"
});
menu.addEventListener('mouseout', (e) => {
const current = e.currentTarget;
const sub = current.querySelector(".sub");
sub.style.maxHeight = null;
});
}
</script>
</body>
</html>
냠소현 개발일지