left 메뉴 고정
본문
안녕하세요! 지금 left 메뉴 소스가 호버 시에만 하위 메뉴들이 내려옵니다~
하위 메뉴들이 내려왔을 때 메뉴를 클릭해서 페이지를 이동하면
그 페이지에 해당하는 하위 메뉴가 내려와 있는 상태로 고정되어 있게 바꾸고 싶은데요.
좋은 방법 있을까요?
<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>
답변 1
보통 이런 경우
서버언어인 php나 jsp등에서 처리하는것이 일반적입니다
자바스크립트에서도 처리 할 수 있겠으나 컴퓨터에 따라 닫혀있다가 열리는것이 보이는 경우도 있고 해서 보기 좋지 않기 때문입니다.
해당 페이지의 고유값, 또는 페이지의 명에 따라 if문등의 비교문을 이용하여
display:none; display:block속성으로 조정해주시면 됩니다
답변을 작성하시기 전에 로그인 해주세요.
