<!DOCTYPE html>
<html lang="ko">
<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="reset.css">
<style>
a {
text-decoration: none;
width: max-content;
}
a:link {
color : black;
}
a:visited {
color : black;
}
a:hover {
color : red;
}
a:active {
color : yellow
}
#navigation{
/* width: 260px; */
/* display: inline-block; */
}
.step_1{
display: flex;
flex-direction:column;
position: relative;
transition: 3s;
font-size: 20px;
font-weight: bold;
}
.step_2, .step_3{
/* position: absolute; */
/* display: none; */
list-style: none;
opacity: 1;
color: black;
margin: 10px;
}
.step_2{
margin-left: 10px;
font-size: 18px;
}
.step_3{
display: none;
margin-left: 20px;
font-size: 16px;
}
.step_1 a:hover{
color: red;
}
.active>.step_2{
display: inline-block;
top: 0;
opacity: 1;
}
.slide{
display: none;
}
</style>
</head>
<body>
<div id="navigation">
<ul class="step_1"><a href="#">1</a>
<div class="slide">
<li class="step_2"><a href="#">2</a>
<li class="step_3"><a href="#">3</a></li>
<li class="step_3"><a href="#">4</a></li>
<li class="step_3"><a href="#">5</a></li>
</li>
<li class="step_2"><a href="#">6</a>
<li class="step_3"><a href="#">7</a></li>
<li class="step_3"><a href="#">8</a></li>
</li>
<li class="step_2"><a href="#">9</a>
<li class="step_3"><a href="#">10</a></li>
</li>
</div>
</ul>
<ul class="step_1"><a href="#">11</a>
<div class="slide">
<li class="step_2"><a href="#">12</a>
<li class="step_3"><a href="#">13</a></li>
<li class="step_3"><a href="#">14</a></li>
<li class="step_3"><a href="#">15</a></li>
</li>
<li class="step_2"><a href="#">16</a></li>
<li class="step_2"><a href="#">17</a></li>
<li class="step_2"><a href="#">18</a>
<li class="step_3"><a href="#">19</a></li>
<li class="step_3"><a href="#">20</a></li>
</li>
<li class="step_2"><a href="#">21</a>
<li class="step_3"><a href="#">22</a></li>
<li class="step_3"><a href="#">23</a></li>
<li class="step_3"><a href="#">24</a></li>
<li class="step_3"><a href="#">25</a></li>
<li class="step_3"><a href="#">26</a></li>
</li>
</div>
</ul>
<ul class="step_1"><a href="#">27</a>
<div class="slide">
<li class="step_2"><a href="#">28</a></li>
<li class="step_2"><a href="#">29</a>
<li class="step_3"><a href="#">30</a></li>
<li class="step_3"><a href="#">31</a></li>
</li>
<li class="step_2"><a href="#">32</a>
<li class="step_3"><a href="#">33</a></li>
<li class="step_3"><a href="#">34</a></li>
</li>
<li class="step_2"><a href="#">35</a>
<li class="step_3"><a href="#">36</a></li>
<li class="step_3"><a href="#">37</a></li>
</li>
<li class="step_2"><a href="#">38</a></li>
</div>
</ul>
<ul class="step_1"><a href="#">39</a>
<div class="slide">
<li class="step_2"><a href="#">40</a></li>
<li class="step_2"><a href="#">41</a></li>
<li class="step_2"><a href="#">42</a>
<li class="step_3"><a href="#">43</a></li>
<li class="step_3"><a href="#">44</a></li>
</li>
<li class="step_2"><a href="#">45</a></li>
</div>
</ul>
</div>
</body>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>;
<script>
let cons=document.querySelectorAll(".step_1 > a");
let check=0;
for(let i=0;i<cons.length;i++){
cons[i].addEventListener("mouseenter",function(){
console.log(check+"1");
if(check==0){
check=5;
console.log(check+"2");
$(cons[i]).next('.slide').slideDown(1000);
}
console.log(check+"3");
});
cons[i].addEventListener("mouseleave",function(){
console.log(check+"4");
$(cons[i]).next('.slide').slideUp(1000);
setTimeout(()=>{
check=0
},2000);
console.log(check+"5");
})
}
</script>
</html>
숫자에 마우스 포인터가 닿으면 아래로 숫자나오고 안닿으면 다시 원상태로 복원? 하는 반응형 웹 페이지 짜 볼려고하는데
여러번 닿으면 ㅈ버그 나는데 혹시 어디를 고치면 될까?
