토론방

소스관련 상단 네비게이션 - 관련 페이지의 상단메뉴이름?을 마우스 온오버 상태로 두고싶어요

상단 네비게이션 메뉴에서 페이지에 들어가면 그 페이지관련된 메뉴 이름을 마우스 온오버 상태로 두고싶어요!

도와주세요ㅜㅜ

 

{@
$program_set[start_code] = ($var_set[code]) ? $var_set[code] : "00000000"; // 네비게이션 출력 위치를 입력해주세요.
$navi_category_menu = program_load(NAVI_CATEGORY_MENU);
@}

<load target="/img_up/shop_pds/pptip/design/jquery.min.js">

<style>
.pm-navigation_horizon3_{$this_group_code} {background:;}
.pm-navigation_horizon3_{$this_group_code} ul {margin:0; padding:0; list-style:none;}
.pm-navigation_horizon3_{$this_group_code} a {display:block; text-decoration:none;}

.pm-navigation_horizon3_{$this_group_code} .dep1 {position:relative;}
.pm-navigation_horizon3_{$this_group_code} .dep1:after {content:''; display:block; clear:both;}
.pm-navigation_horizon3_{$this_group_code} .dep1 > li {float:left;}
.pm-navigation_horizon3_{$this_group_code} .dep1 > li > a {padding:16px 0px; font-size:1px;}
.pm-navigation_horizon3_{$this_group_code} .dep1 > li.on > a,
.pm-navigation_horizon3_{$this_group_code} .dep1 > li:hover > a {color:fff#;}
.pm-navigation_horizon3_{$this_group_code} .dep1 > li > div {display:none; overflow:hidden; position:absolute; text-align:left;}
.pm-navigation_horizon3_{$this_group_code} .dep1 > li:hover > div {display:block;}

.pm-navigation_horizon3_{$this_group_code} .dep2 {display:inline-block; padding:5px 4px; vertical-align:top; white-space:nowrap;}
.pm-navigation_horizon3_{$this_group_code} .dep2 > li {display:inline-block; font-size:0;}
.pm-navigation_horizon3_{$this_group_code} .dep2 > li > a {display:block; padding:0px 7px; font-size:14px; color:#555;}
.pm-navigation_horizon3_{$this_group_code} .dep2 > li.on > a,
.pm-navigation_horizon3_{$this_group_code} .dep2 > li:hover > a {text-decoration:underline; font-weight:bold;}
</style>

<div id="pm_{$this_group_code}" class="pm-navigation_horizon3_{$this_group_code}">

<!-- 1 Depth -->
<ul class="dep1">

<!--@foreach($navi_category_menu[sub_menu] as $k=>$v)-->
<li cond="$v[visible]" class="on"|cond="$v[code]==$NAVI_INFO[parent]">
<a href="{$v[link_url]}" target="{$v[link_target]}"|cond="$v[link_target]">

<!--@if($v[bt1_img_url])-->
<!--@if($v[bt2_img_url])-->
<img src="{$v[bt1_img_url]}" onmouseover="this.src='{$v[bt2_img_url]}'" onmouseout="this.src='{$v[bt1_img_url]}'" alt="{$v[subject]}">

<!--@else-->
<img src="{$v[bt1_img_url]}" alt="{$v[subject]}">
<!--@end-->

<!--@else-->
{$v[subject]}
<!--@end-->
</a>

<div cond="$v[sub_menu]">

<!-- 2 Depth -->
<ul class="dep2">

<!--@foreach($v[sub_menu] as $k2=>$v2)-->
<li cond="$v2[visible]" class="on"|cond="$v2[code]==$NAVI_INFO[code]">
<a href="{$v2[link_url]}" target="{$v2[link_target]}"|cond="$v2[link_target]">

<!--@if($v2[bt1_img_url])-->
<!--@if($v2[bt2_img_url])-->
<img src="{$v2[bt1_img_url]}" onmouseover="this.src='{$v2[bt2_img_url]}'" onmouseout="this.src='{$v2[bt1_img_url]}'" alt="{$v2[subject]}">

<!--@else-->
<img src="{$v2[bt1_img_url]}" alt="{$v2[subject]}">
<!--@end-->

<!--@else-->
{$v2[subject]}
<!--@end-->

</a>
</li>
<!--@end-->
</ul>


<!-- // 2 Depth -->
</div>
</li>
<!--@end-->
</ul>


<!-- // 1 Depth -->
</div>

<script>
var navigationHorizon = new NavigationHorizon($('#pm_{$this_group_code}'));
function NavigationHorizon($this){
var
$dep1 = $this.find('.dep1')
,$lis1 = $dep1.children('li')
;
$lis1.each(function(){
var
$dep2div = $(this).children('div')
;
$(this).on('mouseenter',function(){
var
dep1width = $dep1.outerWidth(),
mdep2right = $dep2div.offset().left + $dep2div.width()
;
if(dep2right > dep1width){
$dep2div.css('right','0');
}
});
$(this).on('mouseleave',function(){
$dep2div.removeAttr('style');
});
});
}
</script>


<script>
var navigationHorizon = new NavigationHorizon($('#pm_{$this_group_code}'));
function NavigationHorizon($this){
var
$dep1 = $this.find('.dep1')
,$lis1 = $dep1.children('li')
,dep1right = $dep1.offset().left + $dep1.outerWidth()
;
$lis1.each(function(){
var
$dep2div = $(this).children('div')
;
$(this).on('mouseenter',function(){
var
dep2right = $dep2div.offset().left + $dep2div.outerWidth()
;
if(dep2right > dep1right){
$dep2div.css('right','0');
}
});
$(this).on('mouseleave',function(){
$dep2div.removeAttr('style');
});
});
}
</script>

게시글 공유 URL복사
댓글[1]

열기 닫기

  • Anybuild 2015-11-14
    위의 내용을 가지고는 저희쪽에서 답변을 드리기 어렵습니다.
    관리자 페이지에 홈페이지 유지보수를 통해서 내용을 남겨주시면 저희쪽에서 확인을 해서 다시 답변을 드리도록 하겠습니다.
댓글작성

열기 닫기

댓글작성
top