left 메뉴 고정
본문
안녕하세요! 지금 left 메뉴 소스가 호버 시에만 하위 메뉴들이 내려옵니다~
하위 메뉴들이 내려왔을 때 메뉴를 클릭해서 페이지를 이동하면
그 페이지에 해당하는 하위 메뉴가 내려와 있는 상태로 고정되어 있게 바꾸고 싶은데요.
좋은 방법 있을까요?
<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>
답변을 작성하시기 전에 로그인 해주세요.
