<!DOCTYPE html>
<html leng="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>document</title>
<style>
#slide, #panel {
padding: 5px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
width: 100%;
height: 100%;
}
/* #penel의 스타일의 기본이 display:none으로 되어 있다. */
#panel {
padding: 50px;
display: none;
background-color: #ffff00;
}
</style>
</head>
<body>
<!-- 메뉴바를 두 부분으로 나누고 마우스를 올릴곳과 나타날 곳을 만들고 이 둘을 묶을 div를 만든다. -->
<div id="menu" style="margin-top: 300px;">
<!-- 마우스가 올라가는 부분 -->
<div id="slide">메뉴바</div>
<!-- 처음엔 안보였다 나중에 보이는 부분 -->
<div id="panel">메뉴바 안의 내용을 넣습니다.<br></div>
</div>
<!-- 제이쿼리 가져옴 -->
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function() {
// timer변수를 만들어 약간의 딜레이를 줄건데 딜레이가 없으면 마우스가 지나갈 때마다
// 메뉴바가 나오고 사라지고 해서 눈에 거슬림
var timer;
$("#slide").mouseenter(function(){ //#slide에 mouseenter이벤트를 만듬
timer = setTimeout(function() { //딜레이를 설정하면서 (0.1초) 해당 시간 후에 아래와 같은 동작을 함
$("#panel").not(':animated') //에니메이션이 Queue에 쌓이는 것을 방지하기 위해서 not(':animated')설정을 해준다.
.css({color: "red"}) //css수정
.slideDown(500) //display가 none에서 block으로 바뀌면서 슬라이드 효과가 생기면서 보여지게 됨
}, 100);
})
$("#menu").mouseleave(function(){ //#menu에 mouseleave이벤트를 만듬
clearTimeout(timer); //위에서 딜레이를 설정하고 그 시간 안에 mouseleave 이벤트가 일어나면 해당 timer변수가 사라져서
$("#panel") //mouseenter이벤트 시의 동작이 일어나지 않음
.css({color: "blue"}) //css수정
.slideUp(500) //display가 none에서 block으로 바뀌면서 슬라이드 효과가 생기면서 보여지게 됨
});
});
</script>
</body>
</html>