애니빌드.LAB
토론방
디자인팜 서브메뉴를 고정하고 싶은데 어떤 소스를 만져야할지 모르겠어요
- h**medeco
- 2016-04-21 19:01:00
- hit3992
- http://lab.anybuild.co.kr/bbs/qna/5462
마우스 롤오버가 되면 서브메뉴가 밑으로 내려오고 마우스를 다른데로 가면 서브메뉴가 사라지는데
그페이지면 서브메뉴가 그냥 고정되게 있었으면 합니다.
그럴려면 어떤 소스를 만져야하는지 잘모르겠어요
도와주시면 감사해요
게시글 공유
URL복사
댓글작성
열기 닫기
열기 닫기
1. [디자인관리 > 고급 디자인 관리 > 스킨 관리]
custom2 : homedeco (sub) - 디자인팜 수정으로 들어갑니다.
2. 네비게이션 - 고급자용 소스수정을 클릭합니다.
3. css를 다음과 같이 수정합니다. (파란색 부분을 추가해주세요.)
{@
$program_set[start_code] = ($farm_skin_set[code]) ? $farm_skin_set[code] : "00000000"; // 네비게이션 출력 위치를 입력해주세요.
$navi_category_menu = program_load(NAVI_CATEGORY_MENU);
@}
<style>
html, body {overflow-x:hidden; min-height:100%;width:100%; height:auto !important;}
.pm-navigation_horizon3__35807_ {background:#ffffff;}
.pm-navigation_horizon3__35807_ ul {margin:0; padding:0; list-style:none;}
.pm-navigation_horizon3__35807_ a {display:block; text-decoration:none;}
.pm-navigation_horizon3__35807_ .dep1 {position:relative; z-index:1001;}
.pm-navigation_horizon3__35807_ .dep1:after {content:''; display:block; clear:both;}
.pm-navigation_horizon3__35807_ .dep1 > li {float:left;}
.pm-navigation_horizon3__35807_ .dep1 > li > a {padding:20px 25px; background:#ffffff; font-size:16px; color:#000000;font-weight: bold;}
.pm-navigation_horizon3__35807_ .dep1 > li.on > a,
.pm-navigation_horizon3__35807_ .dep1 > li:hover > a {background:#ffffff; color:#EB2802;}
.pm-navigation_horizon3__35807_ .dep1 > li > div {display:none; overflow:hidden; position:absolute; text-align:left;}
.pm-navigation_horizon3__35807_ .dep1 > li.on > div,
.pm-navigation_horizon3__35807_ .dep1 > li:hover > div {display:block; background:red;}
.pm-navigation_horizon3__35807_ .dep1:hover > li.on > div {display:none;}
.pm-navigation_horizon3__35807_ .dep1:hover > li.on:hover > div {display:block;}
.pm-navigation_horizon3__35807_ .dep2 {display:inline-block; padding:5px 4px; background:#E36C08; vertical-align:top; white-space:nowrap;}
.pm-navigation_horizon3__35807_ .dep2 > li {display:inline-block; font-size:0;}
.pm-navigation_horizon3__35807_ .dep2 > li > a {display:block; padding:6px 15px; font-size:13px; color:#ffffff;}
.pm-navigation_horizon3__35807_ .dep2 > li.on > a,
.pm-navigation_horizon3__35807_ .dep2 > li:hover > a {color:#000; text-decoration:underline;}
.pm-navigation_horizon3__35807_ .dep2:hover > li.on > a {color:#fff; text-decoration:none;}
.pm-navigation_horizon3__35807_ .dep2:hover > li.on:hover > a {color:#000; text-decoration:underline;}
.pm-navigation_horizon3__35807_ .dep2_bg {display:block; position:absolute; left:50%; z-index:1000; height:37px; background:#E36C08;}
.pm-navigation_horizon3__35807_ .dep2_bg.on {display:block;}
</style>
4. 페이지 아래에 있는 js 소스를 수정합니다.
function NavigationHorizon($this){
var
$dep1 = $this.find('.dep1')
,$lis1 = $dep1.children('li')
,$lis1sub = $dep1.children('li[has=submenu]')
,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');
$('.dep2_bg').removeClass('on');
});
});
$lis1sub.each(function(){
$(this).on('mouseenter',function(){
$('.dep2_bg').addClass('on');
});
});
}