안녕하세요! 지금 left 메뉴 소스가 호버 시에만 하위 메뉴들이 내려옵니다~
하위 메뉴들이 내려왔을 때 메뉴를 클릭해서 페이지를 이동하면
그 페이지에 해당하는 하위 메뉴가 내려와 있는 상태로 고정되어 있게 바꾸고 싶은데요.
좋은 방법 있을까요?
Copy
<script type="text/javascript" language="javascript" src="../js/jquery_left.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
//slides the element with class "menu_body" when paragraph with class "menu_head" is clicked
$("#firstpane p.menu_head").click(function()
{
$(this)//.css({backgroundImage:"url(<?php echo G5_THEME_URL ?>/img/sub/down.png)"})
.next("div.menu_body").slideToggle(100).siblings("div.menu_body").slideUp("slow");
$(this).siblings()//.css({backgroundImage:"url(<?php echo G5_THEME_URL ?>/img/sub/left.png)"});
});
//slides the element with class "menu_body" when mouse is over the paragraph
$("#secondpane p.menu_head").mouseover(function()
{
$(this)//.css({backgroundImage:"url(<?php echo G5_THEME_URL ?>/img/sub/down.png)"})
.next("div.menu_body").slideDown(200).siblings("div.menu_body").slideUp("slow");
$(this).siblings()//.css({backgroundImage:"url(<?php echo G5_THEME_URL ?>/img/sub/left.png)"});
});
});
</script>
<style type="text/css">
.menu_list {
width: 200px;
margin-top:30px;
font-size:15px;
}
.menu_head {
cursor: pointer;
position: relative;
margin:1px;
border-bottom:1px solid #e1e1e1;
/* font-weight:bold; */
background: #fff url('<?php echo G5_THEME_URL ?>/img/sub/left.png') center right no-repeat;
}
.menu_head:hover {background-color:#004083; color:white;}
.menu_head a:hover { color:white; }
.menu_body {
display:none;
}
.menu_body a{
display:block;
color:#006699;
background-color:#EFEFEF;
padding:10px 10px;
/* font-weight:bold; */
text-decoration:none;
padding-left:22px;
}
.menu_body a:hover{
color: #000000;
text-decoration:underline;
}
</style>
<script>
// html dom 이 다 로딩된 후 실행된다.
$(document).ready(function(){
// menu 클래스 바로 하위에 있는 a 태그를 클릭했을때
$(".menu>a").hover(function(){
var submenu = $(this).next("ul");
// submenu 가 화면상에 보일때는 위로 보드랍게 접고 아니면 아래로 보드랍게 펼치기
if( submenu.is(":visible") ){
submenu.slideUp();
}else{
submenu.slideDown();
}
});
});
</script>
답변 1개
채택된 답변
+20 포인트
조나단입니다
6년 전
document.ready(function() 에서
활성화된 페이지를 구분할 수 있는 값을 가져와서 조건문을 추가해 slideDown()을 호출하면 될것같습니다.
답변을 작성하려면 로그인이 필요합니다.