jquery 메뉴바 현재페이지 설정 채택완료
가로형 메뉴바인데 현재 menu1 or 2 클릭하면 하단부 메뉴들이 나오고 다시 클릭하면 오버가 되는데 현재페이지일경우에 하단부메뉴도 나오게 하고싶은데... jquery에 워낙 지식이 없어서.... 제이쿼리 잘하시는 고수님들 부탁드려요
링크부분에 참고해서 만들긴했는데
----------------------------------
menu_ul.hide(); // 아래 추가 |
| if(!menu_ul.hasClass('active')) { |
| menu_ul.eq(0).show(); |
| } |
-----------------------------------
이렇게 하면 처음 화면딴 설정할때는 된다는데
eq(0)이 아닌 현재페이지 일경우 어떻게 해야할까요?
또한 현재페이지 확인이 <?php if($_SERVER["REQUEST_URI"]=='메뉴1경로'){echo '_on';}?>여기 메뉴1 경로를 다적어서 현재페이지랑 맞게 만들었는데.ㅠ ex) 'bbs/test1.php'이렇게 만들었는데 $_SERVER["REQUEST_URI"]와 같은 값인 현재페이지를 확인하는 경로를 머로 해야될까요?ㅠㅠㅠ
<script type="text/javascript">
$(function() {
var menu_ul = $('.menu > li > ul'),
menu_a = $('.menu > li > a');
menu_ul.hide();
menu_a.click(function(e) {
e.preventDefault();
if(!$(this).hasClass('active')) {
menu_a.removeClass('active');
menu_ul.filter(':visible').slideUp('normal');
$(this).addClass('active').next().stop(true,true).slideDown('normal');
} else {
$(this).removeClass('active');
$(this).next().stop(true,true).slideUp('normal');
}
});
});
</script>
<nav id="left">
<h2>메인메뉴</h2>
<UL class="menu">
<li class="item"><a>menu1</a>
<ul >
<li class="subitem<?php if($_SERVER["REQUEST_URI"]=='메뉴1경로'){echo '_on';}?>"><a href="#">menu1-1</a></li>
<li class="subitem"><a href="#">menu1-2</a></li>
<li class="subitem"><a href="#">menu1-3</a></li>
<li class="subitem"><a href="#">menu1-4</a></li>
</ul>
</li>
<li class="item"><a >menu2</a>
<ul>
<li class="subitem"><a href="#">menu2-1</a></li>
<li class="subitem"><a href="#">menu2-2</a></li>
<li class="subitem"><a href="#">menu2-3</a></li>
<li class="subitem"><a href="#">menu2-4</a></li>
</ul>
</li>
</UL>
</nav>
답변 2개
제가 제대로 이해 한건지 모르겠으나
메뉴 순서는 어차피 고정되어 있을테니 각 페이지 별로 eq값을 지정해주면 되지 않을까 싶습니다.
<?phpswitch($_SERVER['REQUEST_URI']){case "bbs/test2.php" : $eq = 1; break;case "bbs/test3.php" : $eq = 2; break;default : $eq = 0; break;}?>
이런식으로 페이지별로 eq값을 지정 해주고
menu.eq(<?=$eq?>).show();
이런식으로 처리 해주시면 될듯 합니다.
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
거기까지 가능했는데 그럼 클릭했을때 background를 넣고 싶은데 어떻게 하면될까요?ㅠㅠㅠ
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인