{@ 태그에 닫는 태그가 없습니다. error :325 디자인팜 1.0 버젼 네비게이션을 디자인팜 2.0 처럼 아래로 스크롤할때 위에 고정되게 하는 방법

토론방

분류목록

디자인팜 디자인팜 1.0 버젼 네비게이션을 디자인팜 2.0 처럼 아래로 스크롤할때 위에 고정되게 하는 방법

PC버젼 기준

디자인팜 1.0 버젼 네비게이션을 디자인팜 2.0 처럼 아래로 스크롤할때 위에 고정되게 하는 방법

디자인팜 2.0 버젼을 써보려 했는데 자유롭지 못해서 애를 좀 먹고 있습니다

그래서 디자인팜 1.0 으로 제작을 다시 하는데

디자인팜 2.0 의 가장 맘에 드는 부분인 네비게이션이 아래로 스크롤 할때 위에 고정되게 하는 방법좀 알고 싶습니다

네비게이션 비율형 A를 사용중이며

소스코드는 

<!-- 네비게이션 (비율형 A) -->
 
{@
if($farm_skin_set[color]=='#d00000'){ // red
 
// Mobile
$bgColor1 = '#f8e4e6'; // 1뎁스 배경 색상
$borderColor1 = '#f6cccd'; // 1뎁스 하단선 색상
$textColor1 = '#d00000'; // 1뎁스 텍스트 색상
$bgColor2 = '#ffffff'; // 2뎁스 배경 색상
$borderColor2 = '#e1e2e3'; // 2뎁스 하단선 색상
$textColor2 = '#393939'; // 2뎁스 텍스트 색상
 
// PC
$pcTextColor1 = '#393939'; // 1뎁스 텍스트 색상
$pcTextOver1 = '#d00000'; // 1뎁스 텍스트 오버색상
$pcBgColor2 = '#ffffff'; // 2뎁스 배경 색상
$pcBgOver2  = '#f8e4e6'; // 2뎁스 배경 오버색상
$pcTextColor2 = '#393939'; // 2뎁스 텍스트 색상
$pcTextOver2 = '#d00000'; // 2뎁스 텍스트 오버색상
 
}else if($farm_skin_set[color]=='#e66d1e'){ // orange
 
// Mobile
$bgColor1 = '#faefe6'; // 1뎁스 배경 색상
$borderColor1 = '#f9e0d1'; // 1뎁스 하단선 색상
$textColor1 = '#e66d1e'; // 1뎁스 텍스트 색상
$bgColor2 = '#ffffff'; // 2뎁스 배경 색상
$borderColor2 = '#e1e2e3'; // 2뎁스 하단선 색상
$textColor2 = '#393939'; // 2뎁스 텍스트 색상
 
// PC
$pcTextColor1 = '#393939'; // 1뎁스 텍스트 색상
$pcTextOver1 = '#e66d1e'; // 1뎁스 텍스트 오버색상
$pcBgColor2 = '#ffffff'; // 2뎁스 배경 색상
$pcBgOver2  = '#faefe6'; // 2뎁스 배경 오버색상
$pcTextColor2 = '#393939'; // 2뎁스 텍스트 색상
$pcTextOver2 = '#e66d1e'; // 2뎁스 텍스트 오버색상
 
}else if($farm_skin_set[color]=='#5da02c'){ // green
 
// Mobile
$bgColor1 = '#eff5e8'; // 1뎁스 배경 색상
$borderColor1 = '#dfecd4'; // 1뎁스 하단선 색상
$textColor1 = '#5da02c'; // 1뎁스 텍스트 색상
$bgColor2 = '#ffffff'; // 2뎁스 배경 색상
$borderColor2 = '#e1e2e3'; // 2뎁스 하단선 색상
$textColor2 = '#393939'; // 2뎁스 텍스트 색상
 
// PC
$pcTextColor1 = '#393939'; // 1뎁스 텍스트 색상
$pcTextOver1 = '#5da02c'; // 1뎁스 텍스트 오버색상
$pcBgColor2 = '#ffffff'; // 2뎁스 배경 색상
$pcBgOver2  = '#eff5e8'; // 2뎁스 배경 오버색상
$pcTextColor2 = '#393939'; // 2뎁스 텍스트 색상
$pcTextOver2 = '#5da02c'; // 2뎁스 텍스트 오버색상
 
}else if($farm_skin_set[color]=='#0256d0'){ // blue
 
// Mobile
$bgColor1 = '#e7eefb'; // 1뎁스 배경 색상
$borderColor1 = '#cedef7'; // 1뎁스 하단선 색상
$textColor1 = '#0256d0'; // 1뎁스 텍스트 색상
$bgColor2 = '#ffffff'; // 2뎁스 배경 색상
$borderColor2 = '#e1e2e3'; // 2뎁스 하단선 색상
$textColor2 = '#393939'; // 2뎁스 텍스트 색상
 
// PC
$pcTextColor1 = '#393939'; // 1뎁스 텍스트 색상
$pcTextOver1 = '#0256d0'; // 1뎁스 텍스트 오버색상
$pcBgColor2 = '#ffffff'; // 2뎁스 배경 색상
$pcBgOver2  = '#e7eefb'; // 2뎁스 배경 오버색상
$pcTextColor2 = '#393939'; // 2뎁스 텍스트 색상
$pcTextOver2 = '#0256d0'; // 2뎁스 텍스트 오버색상
 
}else if($farm_skin_set[color]=='#7e49bf'){ // purple
 
// Mobile
$bgColor1 = '#f1ecf8'; // 1뎁스 배경 색상
$borderColor1 = '#e5d9f4'; // 1뎁스 하단선 색상
$textColor1 = '#7e49bf'; // 1뎁스 텍스트 색상
$bgColor2 = '#ffffff'; // 2뎁스 배경 색상
$borderColor2 = '#e1e2e3'; // 2뎁스 하단선 색상
$textColor2 = '#393939'; // 2뎁스 텍스트 색상
 
// PC
$pcTextColor1 = '#393939'; // 1뎁스 텍스트 색상
$pcTextOver1 = '#7e49bf'; // 1뎁스 텍스트 오버색상
$pcBgColor2 = '#ffffff'; // 2뎁스 배경 색상
$pcBgOver2  = '#f1ecf8'; // 2뎁스 배경 오버색상
$pcTextColor2 = '#393939'; // 2뎁스 텍스트 색상
$pcTextOver2 = '#7e49bf'; // 2뎁스 텍스트 오버색상
 
}else if($farm_skin_set[color]=='#e0008c'){ // pink
 
// Mobile
$bgColor1 = '#f8e4f0'; // 1뎁스 배경 색상
$borderColor1 = '#f2cce0'; // 1뎁스 하단선 색상
$textColor1 = '#e0008c'; // 1뎁스 텍스트 색상
$bgColor2 = '#ffffff'; // 2뎁스 배경 색상
$borderColor2 = '#e1e2e3'; // 2뎁스 하단선 색상
$textColor2 = '#393939'; // 2뎁스 텍스트 색상
 
// PC
$pcTextColor1 = '#393939'; // 1뎁스 텍스트 색상
$pcTextOver1 = '#e0008c'; // 1뎁스 텍스트 오버색상
$pcBgColor2 = '#ffffff'; // 2뎁스 배경 색상
$pcBgOver2  = '#f8e4f0'; // 2뎁스 배경 오버색상
$pcTextColor2 = '#393939'; // 2뎁스 텍스트 색상
$pcTextOver2 = '#e0008c'; // 2뎁스 텍스트 오버색상
 
}else if($farm_skin_set[color]=='#964a3c'){ // brown
 
// Mobile
$bgColor1 = '#f1e8e6'; // 1뎁스 배경 색상
$borderColor1 = '#e7d4ce'; // 1뎁스 하단선 색상
$textColor1 = '#964a3c'; // 1뎁스 텍스트 색상
$bgColor2 = '#ffffff'; // 2뎁스 배경 색상
$borderColor2 = '#e1e2e3'; // 2뎁스 하단선 색상
$textColor2 = '#393939'; // 2뎁스 텍스트 색상
 
// PC
$pcTextColor1 = '#393939'; // 1뎁스 텍스트 색상
$pcTextOver1 = '#964a3c'; // 1뎁스 텍스트 오버색상
$pcBgColor2 = '#ffffff'; // 2뎁스 배경 색상
$pcBgOver2  = '#f1e8e6'; // 2뎁스 배경 오버색상
$pcTextColor2 = '#393939'; // 2뎁스 텍스트 색상
$pcTextOver2 = '#964a3c'; // 2뎁스 텍스트 오버색상
 
}else if($farm_skin_set[color]=='#777777'){ // gray
 
// Mobile
$bgColor1 = '#ececec'; // 1뎁스 배경 색상
$borderColor1 = '#dcdcdc'; // 1뎁스 하단선 색상
$textColor1 = '#777777'; // 1뎁스 텍스트 색상
$bgColor2 = '#ffffff'; // 2뎁스 배경 색상
$borderColor2 = '#e1e2e3'; // 2뎁스 하단선 색상
$textColor2 = '#393939'; // 2뎁스 텍스트 색상
 
// PC
$pcTextColor1 = '#393939'; // 1뎁스 텍스트 색상
$pcTextOver1 = '#777777'; // 1뎁스 텍스트 오버색상
$pcBgColor2 = '#ffffff'; // 2뎁스 배경 색상
$pcBgOver2  = '#ececec'; // 2뎁스 배경 오버색상
$pcTextColor2 = '#393939'; // 2뎁스 텍스트 색상
$pcTextOver2 = '#777777'; // 2뎁스 텍스트 오버색상
 
}else if($farm_skin_set[color]=='#ffffff'){ // white
 
// Mobile
$bgColor1 = '#252525'; // 1뎁스 배경 색상
$borderColor1 = '#111111'; // 1뎁스 하단선 색상
$textColor1 = '#d7d7d7'; // 1뎁스 텍스트 색상
$bgColor2 = '#363636'; // 2뎁스 배경 색상
$borderColor2 = '#111111'; // 2뎁스 하단선 색상
$textColor2 = '#d7d7d7'; // 2뎁스 텍스트 색상
 
// PC
$pcTextColor1 = '#d7d7d7'; // 1뎁스 텍스트 색상
$pcTextOver1 = '#ffffff'; // 1뎁스 텍스트 오버색상
$pcBgColor2 = '#363636'; // 2뎁스 배경 색상
$pcBgOver2  = '#252525'; // 2뎁스 배경 오버색상
$pcTextColor2 = '#d7d7d7'; // 2뎁스 텍스트 색상
$pcTextOver2 = '#ffffff'; // 2뎁스 텍스트 오버색상
 
}else{ // black
 
// Mobile
$bgColor1 = '#ececec'; // 1뎁스 배경 색상
$borderColor1 = '#dcdcdc'; // 1뎁스 하단선 색상
$textColor1 = '#000000'; // 1뎁스 텍스트 색상
$bgColor2 = '#ffffff'; // 2뎁스 배경 색상
$borderColor2 = '#e1e2e3'; // 2뎁스 하단선 색상
$textColor2 = '#393939'; // 2뎁스 텍스트 색상
 
// PC
$pcTextColor1 = '#393939'; // 1뎁스 텍스트 색상
$pcTextOver1 = '#000000'; // 1뎁스 텍스트 오버색상
$pcBgColor2 = '#ffffff'; // 2뎁스 배경 색상
$pcBgOver2  = '#ececec'; // 2뎁스 배경 오버색상
$pcTextColor2 = '#393939'; // 2뎁스 텍스트 색상
$pcTextOver2 = '#000000'; // 2뎁스 텍스트 오버색상
 
}
@}
 
{@
$program_set[start_code] = ($farm_skin_set[code]) ? $farm_skin_set[code] : "00000000"; // 네비게이션 코드
$nav = program_load(NAVI_CATEGORY_MENU);
 
$navArr = array();
foreach($nav[sub_menu] as $k=>$v) {
if(!$v[visible]) continue;
$arrNum = count($navArr);
array_push($navArr, $v);
 
$navArr[$arrNum][sub_menu] = array();
foreach($v[sub_menu] as $k2=>$v2) {
if(!$v2[visible]) continue;
array_push($navArr[$arrNum][sub_menu], $v2);
}
}
$navSize = count($navArr);
$liWidth = ($navSize) ? (100 / $navSize).'%' : '100%';
@}
 
<load target="/img_up/_addon/_plugin/modernizr/modernizr.custom.media.query.js">
 
<style>
.lnb_118431_ {font-size:0;}
.lnb_118431_ * {box-sizing:border-box;}
.lnb_118431_ ul {margin:0; padding:0; list-style:none;}
.lnb_118431_ a {
display:block; position:relative; height:40px; line-height:40px; font-weight:bold; text-align:left; text-decoration:none; text-align:;
overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
.lnb_118431_ .dep1 > li > a {
padding:0 15px 0 30px; border-bottom:1px solid {$borderColor1}; background:{$bgColor1}; font-size:14px; color:{$textColor1};
}
.lnb_118431_ .dep1 > li > a:before {
content:''; display:block; position:absolute; left:20px; top:50%; width:3px; height:3px; margin-top:-1px; background:{$textColor1};
}
.lnb_118431_ .dep2 > li > a {
padding:0 15px 0 45px; border-bottom:1px solid {$borderColor2}; background:{$bgColor2}; font-size:13px; color:{$textColor2};
}
.lnb_118431_ .dep3_li > a:before {content:'- '; padding-left:15px;}
 
@media (min-width:1024px){
/* dep1 */
.lnb_118431_ .dep1:after {content:''; display:block; clear:both;}
.lnb_118431_ .dep1 > li {float:left; position:relative; z-index:600; width:{$liWidth};}
.lnb_118431_ .dep1 > li:hover {z-index:610;}
.lnb_118431_ .dep1 > li > div {
display:none; position:absolute; left:0; width:100%; padding:5px 0;
border:3px solid {$pcTextOver1}; background:{$pcBgColor2};
}
.lnb_118431_ .dep1 > li:hover > div {display:block;}
.lnb_118431_ .dep1 > li > a {
z-index:620; height:{$farm_skin_set[height]}px; line-height:{$farm_skin_set[height]}px; padding:0 20px;
border-bottom:none; background:none; color:{$pcTextColor1}; text-align:center;
}
.lnb_118431_ .dep1 > li.on > a,
.lnb_118431_ .dep1 > li:hover > a {color:{$pcTextOver1};}
.lnb_118431_ .dep1 > li > a:before {display:none;}
 
/* dep2 */
.lnb_118431_ .dep2 > li > a {
height:30px; line-height:30px; padding:0 20px;
border-bottom:none; background:{$pcBgColor2}; color:{$pcTextColor2};
}
.lnb_118431_ .dep2 > li.on > a,
.lnb_118431_ .dep2 > li:hover > a {background:{$pcBgOver2}; color:{$pcTextOver2};}
 
/* dep1 triangle */
.lnb_118431_ .dep1 > li.has_sub:before,
.lnb_118431_ .dep1 > li.has_sub:after {
content:''; display:none; position:absolute; left:50%; z-index:630; margin-left:-8px;
border-left:8px solid transparent; border-right:8px solid transparent;
}
.lnb_118431_ .dep1 > li.has_sub:before {bottom:0; border-bottom:8px solid {$pcTextOver1};}
.lnb_118431_ .dep1 > li.has_sub:after {bottom:-3px; border-bottom:8px solid {$pcBgColor2};}
.lnb_118431_ .dep1 > li.has_sub:hover:before,
.lnb_118431_ .dep1 > li.has_sub:hover:after {display:block;}
}
 
@media \0screen{
/* dep1 */
.lnb_118431_ .dep1:after {content:''; display:block; clear:both;}
.lnb_118431_ .dep1 > li {float:left; position:relative; z-index:600; width:{$liWidth};}
.lnb_118431_ .dep1 > li:hover {z-index:610;}
.lnb_118431_ .dep1 > li > div {
display:none; position:absolute; left:0; width:100%; padding:5px 0;
border:3px solid {$pcTextOver1}; background:{$pcBgColor2};
}
.lnb_118431_ .dep1 > li:hover > div {display:block;}
.lnb_118431_ .dep1 > li > a {
z-index:620; height:{$farm_skin_set[height]}px; line-height:{$farm_skin_set[height]}px; padding:0 20px;
border-bottom:none; background:none; color:{$pcTextColor1}; text-align:center;
}
.lnb_118431_ .dep1 > li.on > a,
.lnb_118431_ .dep1 > li:hover > a {color:{$pcTextOver1};}
.lnb_118431_ .dep1 > li > a:before {display:none;}
 
/* dep2 */
.lnb_118431_ .dep2 > li > a {
height:30px; line-height:30px; padding:0 20px;
border-bottom:none; background:{$pcBgColor2}; color:{$pcTextColor2};
}
.lnb_118431_ .dep2 > li.on > a,
.lnb_118431_ .dep2 > li:hover > a {background:{$pcBgOver2}; color:{$pcTextOver2};}
 
/* dep1 triangle */
.lnb_118431_ .dep1 > li.has_sub:before,
.lnb_118431_ .dep1 > li.has_sub:after {
content:''; display:none; position:absolute; left:50%; z-index:630; margin-left:-8px;
border-left:8px solid transparent; border-right:8px solid transparent;
}
.lnb_118431_ .dep1 > li.has_sub:before {bottom:0; border-bottom:8px solid {$pcTextOver1};}
.lnb_118431_ .dep1 > li.has_sub:after {bottom:-3px; border-bottom:8px solid {$pcBgColor2};}
.lnb_118431_ .dep1 > li.has_sub:hover:before,
.lnb_118431_ .dep1 > li.has_sub:hover:after {display:block;}
}
</style>
 
<div id="farmBoxLnb" class="lnb_118431_" data-device="mobile"|cond="$mobile_conn_yn">
<!-- 1 Depth -->
<ul class="dep1">
<!--@foreach($navArr as $k=>$v)-->
{@
$li1 = '';
$li1 .= ($k==$NAVI_INFO[position_arr][0]-1) ? ' on' : '';
$li1 .= ($k==0) ? ' first' : '';
$li1 .= ($k+1==$navSize) ? ' last' : '';
$li1 .= (count($v[sub_menu])) ? ' has_sub' : '';
@}
<li class="{$li1}"|cond="$li1">
<a href="{$v[link_url]}" target="{$v[link_target]}"|cond="$v[link_target]">{$v[subject]}</a>
<div cond="$v[sub_menu]">
<!-- 2 Depth -->
<ul class="dep2">
<!--@foreach($v[sub_menu] as $k2=>$v2)-->
{@
$li2 = '';
$li2 .= ($k==$NAVI_INFO[position_arr][0]-1) && ($k2==$NAVI_INFO[position_arr][1]-1) ? ' on' : '';
@}
<li class="{$li2}"|cond="$li2">
<a href="{$v2[link_url]}" target="{$v2[link_target]}"|cond="$v2[link_target]">{$v2[subject]}</a>
</li>
<!--@foreach($v2[sub_menu] as $k3=>$v3)-->
{@
$li3 = '';
$li3 .= ($k==$NAVI_INFO[position_arr][0]-1) && ($k2==$NAVI_INFO[position_arr][1]-1) && ($k3==$NAVI_INFO[position_arr][2]-1) ? ' on' : '';
@}
<li class="dep3_li {$li3}">
<a href="{$v3[link_url]}" target="{$v3[link_target]}"|cond="$v3[link_target]">{$v3[subject]}</a>
</li>
<!--@end-->
<!--@end-->
</ul>
<!-- // 2 Depth -->
</div>
</li>
<!--@end-->
</ul>
<!-- // 1 Depth -->
</div>
 
<script>
jQuery(function($){
mobileTap_118431_()
 
$(window).on('resize',function(){
mobileTap_118431_()
});
});
 
function mobileTap_118431_(){
if(Modernizr.mq('only all and (min-width:1024px)')==true){
$('.lnb_118431_[data-device=mobile] .has_sub > a').on('click',function(){
if(!$(this).hasClass('tap')){
$(this).parent().siblings().children('a').removeClass('tap');
$(this).addClass('tap');
return false;
}
});
}else{
$('.lnb_118431_[data-device=mobile] .has_sub > a').off();
}
}
</script>
게시글 공유 URL복사
출력
목록
댓글[1]

열기 닫기

  • Anybuild 2018-10-23
    죄송합니다만 사이트 정보를 알지 못하면 저희쪽에서 확인이 어렵습니다.
    문의 사항은 관리자 페이지 상단에 있는 홈페이지 유지보수를 통해서 남겨주시기 바랍니다.
댓글작성

열기 닫기

댓글작성
prev 이전글
디자인팜 2.0 프로그램블록 컨텐츠 크기 개별설정 방법
next 다음글
하단 sns 이미지 정렬 수정문의 드립니다.
top