메뉴의 페이지 인식 관련
본문
안녕하세요
메뉴의 페이지 인식 관련하여,
class="<?php echo ($row['me_name'] == $board['bo_subject']) ? 'gnb_1da menu_on' : 'gnb_1da' ?>"
a 태그에 위와 같이 클래스를 주어 페이지를 인식 하도록 했습니다.
제가 구현하고 싶은 것은 다른 메뉴에 마우스오버를 했을 때 페이지 인식 스타일을 일시적으로 없애고 마우스오버된 메뉴만 스타일(페이지 인식 된 메뉴와 동일한 스타일)을 주었다가 마우스아웃이 되면 다시 원래대로 현재 페이지의 메뉴 스타일이 활성화 되는 것입니다.
현재 페이지를 나타내는 메뉴 스타일을 그대로 두고 마우스오버 기능만 넣는건 쉬운데 일시적으로 현재 페이지 활성화 스타일을 없애려니 좀 어렵네요 ㅠㅠ
제이쿼리를 활용해봤지만 결국 실패한 코드 남겨둡니다.
$("#gnb .gnb_1dli").mouseover(function(){
$(this).siblings().children("a").removeClass("menu_on");
$(this).children("a").addClass("menu_on");
})
$("#gnb").mouseout(function(){
$("#gnb .gnb_1dli > a").removeClass("menu_on");
if (<?php $row['me_name'] == $board['bo_subject']?>) {
$("#gnb .gnb_1dli > a").addClass("menu_on");
}
})
도움 부탁드려요
감사합니다.
답변 1
다음 코드가 도움이 될지 모르겠습니다.
<style>
#gnb ul {
list-style-type: none;
width: 20%;
padding: 0;
}
#gnb a {
display: block;
padding: 0.5em 0 0.5em 1em;
}
#gnb a.gnb_1da,
#gnb ul:hover a.gnb_1da.menu_on {
background-color: #eee;
}
#gnb a.gnb_1da:hover,
#gnb a.gnb_1da.menu_on,
#gnb ul:hover a.gnb_1da.menu_on:hover {
background-color: #ccc;
}
</style>
<nav id="gnb">
<ul>
<li class="gnb_1dli"><a href="#" class="gnb_1da">1</a></li>
<li class="gnb_1dli"><a href="#" class="gnb_1da menu_on">23</a></li>
<li class="gnb_1dli"><a href="#" class="gnb_1da">456</a></li>
<li class="gnb_1dli"><a href="#" class="gnb_1da">7890</a></li>
</ul>
</nav>
답변을 작성하시기 전에 로그인 해주세요.