애니빌드.LAB
토론방
소스관련 상단 네비게이션 - 관련 페이지의 상단메뉴이름?을 마우스 온오버 상태로 두고싶어요
- 01210
- 2015-11-13 11:26:11
- hit4000
- http://lab.anybuild.co.kr/bbs/qna/5014
상단 네비게이션 메뉴에서 페이지에 들어가면 그 페이지관련된 메뉴 이름을 마우스 온오버 상태로 두고싶어요!
도와주세요ㅜㅜ
{@
$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>
열기 닫기
열기 닫기
관리자 페이지에 홈페이지 유지보수를 통해서 내용을 남겨주시면 저희쪽에서 확인을 해서 다시 답변을 드리도록 하겠습니다.