펼침상태를 유지하고자 합니다 채택완료
-------------test.html----------------
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; }
-------------test.html----------------
---결과페이지---
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; }
--------------------
위는 동작합니다..
위 내용대로 결과페이지에 선택한 서브메뉴("결과페이지로")가 나온 상태로 펼침 상태를 유지하려면 어데를 손봐야 하는지요..
미리 감사합니다.
답변 2개
#Menu ul ul { display:none; position:absolute; background-color:#5c5c5c; }
#Menu ul li:hover ul { display: block; } 여기보면 hover 했을떄 보이도록 해놓은거잖아요,
결과페이지에서는 그냥 저 빨간부분을 display:block; 으로 바꾸세요
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
호버로 하게 되면. 다른 메뉴를 찾다보면 접히지 않는 이슈가 발생될수 있을 것 같네요.
해당 메뉴를 클릭하였을때 그 서브메뉴가 지속적으로 살아 있길 원하시니.
click 이벤트 발생시 해당 메뉴에 class 부여로 display:block; 부여하면 될것 같습니다.
$(document).ready(function () { $("#menu ul li").click(function () { $(this).</code><code data-lang="javascript">parent('ul').addClass("on"); //해당 li를 클릭하면 그 위에 ul 에게 클래스 on을 부여한다. }); });</code></pre> <p><code data-lang="javascript">
그리고 빠져나와 다른 메뉴에 hover 시에는 removeClass 로 on 을 제거하는 방식으로 구현하면 될것같네요.
저는 당장 생각나는 방법은 이것뿐이네여..
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인