제이쿼리 질문드립니다.
본문
제가 홈페이지 메뉴부분을 효과를 만들고 있는데 서브페이지에 있으면 계속 그페이지에 해당되는 메뉴 css가 실행되었으면 하는데 페이지에서 css가 먹히는데 다른메뉴에 마우스를 올리면 메뉴효과가 사라지네요 ㅠㅠ 어떻게 해야될까요???? 다른메뉴에 갔다 오더라도 다시 그메뉴에 css가 돌아왔으면 합니다. 도와주세요 선배님들..
<?php
$pName = explode("/",$_SERVER['REQUEST_URI']);
if(!@$pName[3])$pName[3] = $pName[2];
$pageName = explode(".", $pName[2]);
$pn = $pageName[0];
echo $pn;
?>
<!-- 상단 시작 { -->
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script>
$(document).ready(function(){
$('#sub_menu li').hover(function(){
$('ul:first',this).addClass("un_on");
}, function (){
$('ul:first',this).removeClass("un_on");
});
$('.un_ul a').hover(function(){
$(this).css('color','#068fcd')
}, function (){
$(this).css('color','#939393')
});
$('#sub_menu > li').hover(function() {
$(this).css("border-bottom","3px solid #068fcd");
},function(){
$(this).css("border-bottom","none");
});
$(".un_ul > li").not(".<?=$pn?>").hover(function(){
$(".<?=$pn?> > a").css('color','#939393');
// $(".<?=$pn?> > a").css('color','#939393');
}, function(){
$(".<?=$pn?> > a").css('color','#068fcd');
$(".<?=$pn?>").parents("ul").addClass("un_on");
});
if($(".un_ul > li").hasClass("<?=$pn?>") === true){
$(".<?=$pn?>").parents("ul").addClass("un_on");
$(".<?=$pn?>").parents("ul").parents("li").css("border-bottom","3px solid #068fcd");
$(".<?=$pn?>").children("a").css("color","#068fcd");
}
});
</script>
<div class="head_wrap">
<div class="menu_wrap">
<div class="logo"><a href="/"><img src="/gnu/img/main/logo.png"></a></div>
<?
if($pn == main){
?>
<div class="menu">
<ul id="sub_menu">
<li>
<a href="/gnu/test.php">회사소개</a>
</li>
<li>
<a href="/gnu/consulting/consulting.php">컨설팅</a>
</li>
<li><a href="/gnu/education/education.php">교육</a></li>
<li><a href="/gnu/onoff/index.php">온/오프라인 마케팅</a></li>
<li><a href="#">병원인테리어</a></li>
<li><a href="/gnu/bbs/board.php?bo_table=news">커뮤니티</a>
</li>
</ul>
</div>
<?} else {?>
<div class="menu">
<ul id="sub_menu">
<li>
<a href="/gnu/test.php">회사소개</a>
<ul class="un_ul">
<li class="intro"><a href="/gnu/test.php">MEDI：ON</a></li>
<li class="ceomessage"><a href="#">CEO Message</a></li>
<li class="company"><a href="/gnu/intro/company.php">ORGANIZATION</a></li>
<li class="location"><a href="/gnu/intro/location.php">LOCATION</a></li>
</ul>
</li>
<li>
<a href="/gnu/consulting/consulting.php">컨설팅</a>
<ul class="un_ul" >
<li><a href="/gnu/consulting/consulting.php">브랜드 컨설팅</a></li>
<li><a href="/gnu/consulting/marketing.php">마케팅 컨설팅</a></li>
</ul>
</li>
<li><a href="/gnu/education/education.php">교육</a></li>
<li><a href="/gnu/onoff/index.php">온/오프라인 마케팅</a></li>
<li><a href="#">병원인테리어</a></li>
<li><a href="/gnu/bbs/board.php?bo_table=news">커뮤니티</a>
<ul class="un_ul" style="left:900px;">
<li><a href="/gnu/bbs/board.php?bo_table=news">메디온 소식</a></li>
<li><a href="/gnu/bbs/board.php?bo_table=media">언론홍보/보도자료</a></li>
<li><a href="/gnu/bbs/board.php?bo_table=gallery">갤러리</a></li>
<li><a href="/gnu/bbs/board.php?bo_table=online">상담문의</a></li>
</ul>
</li>
</ul>
</div>
<?}?>
<a href="/gnu/bbs/board.php?bo_table=online"><div style="position:absolute; top:35px; width:140px;right:360px; text-align:left; ">
<ul>
<li style="float:left;"><img src="/gnu/img/main/online_icon.png"></li>
<li style="margin-top:2px; margin-left:5px; font-size:15px; float:left;">상담하기</li>
</ul>
</div></a>
</div>
</div>
답변 1
"다른메뉴에 갔다 오더라도 다시 그메뉴에 css가 돌아왔으면 합니다. "
물론 저것도 가능하겠지만.. 복잡합니다.
일단 활성화된 메뉴는 계속 활성화된 상태가 되도록 한다고 생각하세요.
방법은 활성화 된 메뉴에 별도의 class를 주시고..
다른 메뉴 활성화 시킬때 해당 메뉴도 활성화 되도록 구성해보세요.
글로 설명하려니 어렵네요,,..
답변을 작성하시기 전에 로그인 해주세요.