세로형 3단 메뉴 질문있습니다.
본문
순수 자바스크립트로 메뉴 구현을 공부하고있습니다.
각 번호의 메뉴를 클릭하면 서브메뉴가 나오도록 하고싶은데 방법이 없을까요?
클릭한 그 요소만 선택해서 할수있을것같은데 아무리 생각을 해봐도 방법을 모르겠습니다.
링크 걸어 두었습니다.
답변 3
2단메뉴에서부터 코드가 좀 오류가있네요,
우리가 클릭할것은 li 들이여서 오류가 나고있는부분입니다. ul 을 클릭하였을때. 가 되어 버리니까 하위 자식을 찾아서 보여져라~ 하기도 어렵구요
html 구조도 3단메뉴는 각 li 안에 들어가 있어야 할듯합니다.
감사합니다 아직 배움이 부족한거같네요 ㅠ
저라면 아래처럼 코드를 구성할 것입니다. 옆으로 스르르 이동하는 건 본인이 보태 넣으세요.
<style>
.menu { margin-left:20px; cursor:pointer; }
.sub { margin-left:40px; }
</style>
<div id=buttonDiv style=cursor:pointer>메뉴</div>
<div id=toggleDiv style=display:none>
<div class=menu>메뉴1</div>
<div class=sub>
<div>메뉴1_1</div>
<div>메뉴1_2</div>
<div>메뉴1_3</div>
<div>메뉴1_4</div>
<div>메뉴1_5</div>
</div>
<div class=menu>메뉴2</div>
<div class=sub>
<div>메뉴2_1</div>
<div>메뉴2_2</div>
<div>메뉴2_3</div>
<div>메뉴2_4</div>
<div>메뉴2_5</div>
</div>
<div class=menu>메뉴3</div>
<div class=sub>
<div>메뉴3_1</div>
<div>메뉴3_2</div>
<div>메뉴3_3</div>
<div>메뉴3_4</div>
<div>메뉴3_5</div>
</div>
<div class=menu>메뉴4</div>
<div class=sub>
<div>메뉴4_1</div>
<div>메뉴4_2</div>
<div>메뉴4_3</div>
<div>메뉴4_4</div>
<div>메뉴4_5</div>
</div>
<div class=menu>메뉴5</div>
<div class=sub>
<div>메뉴5_1</div>
<div>메뉴5_2</div>
<div>메뉴5_3</div>
<div>메뉴5_4</div>
<div>메뉴5_5</div>
</div>
</div>
<script>
buttonDiv.onclick = function() {
toggleDiv.style.display = toggleDiv.style.display == "block" ? "none" : "block";
}
function subNone() {
for (i of document.getElementsByClassName("sub")) i.style.display = "none";
}
menu = document.getElementsByClassName("menu");
for (j = 0; j < menu.length; j++) {
menu[j].j = j;
menu[j].onclick = function() {
subNone();
document.getElementsByClassName("sub")[this.j].style.display = "block";
}
}
subNone();
</script>
감사합니다.. 그런데 메뉴가 펼쳐진 상태에서는 다시는 안들어가는데 그거는 어느부분을 고쳐야하는가요?
그런데 메뉴가 펼쳐진 상태에서는 다시는 안들어가는데... 이게 무슨 의미인지 모르겠습니다.
<div>메뉴1_1</div> 이것의 경우는 본인이 아래처럼 링크를 거셔야죠.
<div><a href="경로">메뉴1_1</a></div>
그 링크페이지까지 만들어 달라시려면 제작의뢰를 하셔야 합니다.
제가 말을 잘못한거같네요.
펼쳐진 메뉴가 있는 상태일때 메뉴를 접었다펼치면
계속 펼쳐진 상태로 되더라구요 전 그부분을 고치고싶어서 그랬습니다 바쁘신데 답글은 안 달아 주셔도 될것같습니다
그니까 각개 버튼에 토글기능을 넣고 싶은 거군요.
그리 어렵진 않습니다. 스크립트만 아래처럼 고치세요.
"토글기능"이라는 단어 한 마디만 하셨으면 처음부터 서로 의사소통이 편했을 텐데요.
<script>
buttonDiv.onclick = function() {
toggleDiv.style.display = toggleDiv.style.display == "block" ? "none" : "block";
}
function subNone() {
for (i of document.getElementsByClassName("sub")) i.style.display = "none";
}
menu = document.getElementsByClassName("menu");
for (j = 0; j < menu.length; j++) {
menu[j].j = j;
menu[j].onclick = function() {
for (k = 0; k < menu.length; k++) {
if (k == this.j) document.getElementsByClassName("sub")[k].style.display = document.getElementsByClassName("sub")[k].style.display == "block" ? "none" : "block";
else document.getElementsByClassName("sub")[k].style.display = "none";
}
}
}
subNone();
</script>
감사합니다.. ㅠㅠ
