펼침상태를 유지하고자 합니다
본문
-------------test.html----------------
<style type="text/css">
div, ul, li { margin:0; padding:0; }
#Menu {
float:left;
margin:0px 5px 3px 5px;
padding:0 0 3px 0;
background-color:#5c5c5c;
}
#Menu ul li {
float:left;
list-style-type:none;
}
#Menu a {
height:16px;
color:#f1f1f1;
font-family:arial;
font-size:12px;
padding:0 10px 0 10px;
text-decoration:none;
}
#Menu ul ul {
display:none;
position:absolute;
background-color:#5c5c5c;
}
#Menu ul li:hover ul {
display: block;
}
#Menu ul ul li {
float:none;
}
</style>
<div id="Menu">
<ul>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a>
<ul>
<li><a href="end.html">결과페이지로</a></li>
<li><a href="#">Sub Menu 2</a></li>
<li><a href="#">Sub Menu 3</a></li>
</ul>
</li>
</ul>
</div>
-------------test.html----------------
---결과페이지---
<style type="text/css">
div, ul, li { margin:0; padding:0; }
#Menu {
float:left;
margin:0px 5px 3px 5px;
padding:0 0 3px 0;
background-color:#5c5c5c;
}
#Menu ul li {
float:left;
list-style-type:none;
}
#Menu a {
height:16px;
color:#f1f1f1;
font-family:arial;
font-size:12px;
padding:0 10px 0 10px;
text-decoration:none;
}
#Menu ul ul {
display:none;
position:absolute;
background-color:#5c5c5c;
}
#Menu ul li:hover ul {
display: block;
}
#Menu ul ul li {
float:none;
}
</style>
<div id="Menu">
<ul>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a>
<ul>
<li><a href="end.html">결과페이지로</a></li>
<li><a href="#">Sub Menu 2</a></li>
<li><a href="#">Sub Menu 3</a></li>
</ul>
</li>
</ul>
</div>
<div>
결과페이지입니다! <br>
선택한 서브메뉴("결과페이지로")가 나온 상태로 펼침 상태가 유지 되고자 합니다.
</div>
--------------------
위는 동작합니다..
위 내용대로 결과페이지에 선택한 서브메뉴("결과페이지로")가 나온 상태로 펼침 상태를 유지하려면 어데를 손봐야 하는지요..
미리 감사합니다.
답변 2
#Menu ul ul {
display:none;
position:absolute;
background-color:#5c5c5c;
}
#Menu ul li:hover ul {
display: block;
}
여기보면 hover 했을떄 보이도록 해놓은거잖아요,
결과페이지에서는 그냥 저 빨간부분을 display:block; 으로 바꾸세요
아... 열심히 공부하겠습니다.. 감사합니다
호버로 하게 되면. 다른 메뉴를 찾다보면 접히지 않는 이슈가 발생될수 있을 것 같네요.
해당 메뉴를 클릭하였을때 그 서브메뉴가 지속적으로 살아 있길 원하시니.
click 이벤트 발생시 해당 메뉴에 class 부여로 display:block; 부여하면 될것 같습니다.
$(document).ready(function () { $("#menu ul li").click(function () { $(this).parent('ul').addClass("on"); //해당 li를 클릭하면 그 위에 ul 에게 클래스 on을 부여한다. }); });
그리고 빠져나와 다른 메뉴에 hover 시에는 removeClass 로 on 을 제거하는 방식으로 구현하면 될것같네요.
저는 당장 생각나는 방법은 이것뿐이네여..
옙! 모르지만 한 번 도전해 보겠습니다.. 감사합니다.
