슬라이딩 무한 탭메뉴 정보
기타 슬라이딩 무한 탭메뉴관련링크
http://homeine.x-y.net/tab.php
2090회 연결
첨부파일
본문
상단에
<?
$slide_tab_width = 300; // 가로크기
$slide_tab_height = 300; // 메뉴부분을 제외한 내용부분 세로크기
?>
설정하셔서 사용하시면 되구요.
하단 태그 부분에서
<div class="slide-tab">
<div id="slide-tab-menu"><?
$subject_arr = array();
$subject_arr[0] = "도서";
$subject_arr[1] = "G마켓";
$subject_arr[2] = "인터파크";
$subject_arr[3] = "11번가";
$subject_arr[4] = "옥션";
$subject_arr[5] = "롯데닷컴";
$subject_arr[6] = "CJmall";
$subject_arr[7] = "신세계몰";
$subject_arr[8] = "Hmall";
for ($i=0; $i<count($subject_arr); $i++)
echo "<a href=\"javascript:;\">$subject_arr[$i]</a>";
?></div>
<div class="slide-tab-line bb1cc"></div>
<div id="slide-tab-content"><? // 아래 div 개수는 $subject_arr 개수와 같아야 합니다 ?>
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
</div>
위 링크와 아래 DIV 개수만 마춰서 사용하시면 됨니다.
추천
25
25
댓글 전체
와 최고!
우와~~~ 대박~~!!!! 추천꾸욱!!!
우선 추천부터.....ㅎㅎㅎ 고맙습니다...
와..... 보기만 해도 멋져보여요~!!!! 추천!
첨부파일을 올리고 불러 올려면 어케넣어줘야되는지좀 알려주세요
멋집니다..^^ 새해선물,,ㅎ
이거를 특정한 자리에 불러 오려면 어케 해야 하는지요,,
아 그리고 공간 좁은 곳애서도 사용할 수 있게 레이어가 접혔다가 펼쳐지게 하는 거는 어렵겟죠? 그러면 왕대박될거 같아요^^
아 그리고 공간 좁은 곳애서도 사용할 수 있게 레이어가 접혔다가 펼쳐지게 하는 거는 어렵겟죠? 그러면 왕대박될거 같아요^^
감사합니다.
그런데 이거 마우스 오버만 해도 탭변경되게끔 할려면 어떻게 해야되는지? ㅎ..
subject가 마우스따라서 움직이는거라 마우스오버에 탭변경은 이상해 질듯하네요..
subject가 고정이면 몰라두요....
subject가 고정이면 몰라두요....
붙이는 방법좀 알려주세요...
아래처럼 그냥 붙였어요.....속에 사이즈나 변수쬐금 바꾸고......
<td width="100%">
<? include_once("$g4[path]/include/tab01.php"); ?>
</td>
<td width="100%">
<? include_once("$g4[path]/include/tab01.php"); ?>
</td>
굿이네요 ^^
요즘 쇼핑몰 만들고 있어서 필요로하고 있었는데 ~! 감사합니다 ^^
요즘 쇼핑몰 만들고 있어서 필요로하고 있었는데 ~! 감사합니다 ^^
멋지네요...
활용도 굿~ 추천해요!!
오..멋지네요..이런건 활용하면 멋질것 같아요.
잘작동은 하는데...
적용하니 스크롤바가 사라지네요...??
적용하니 스크롤바가 사라지네요...??
저도 적용하니 스크롤바가 없어집니다.
휠도 안되구요... 확인 부탁드립니다.
휠도 안되구요... 확인 부탁드립니다.
파일안에
body { margin:0; padding:0; overflow:hidden; }
이부분을 삭제하니 스크롤바가 나타납니다.
(정상 작동합니다.)
그리고 <html></html>, <head></head>, <body></body>를 지워서 사용하시는게 좋을듯합니다.
body { margin:0; padding:0; overflow:hidden; }
이부분을 삭제하니 스크롤바가 나타납니다.
(정상 작동합니다.)
그리고 <html></html>, <head></head>, <body></body>를 지워서 사용하시는게 좋을듯합니다.
지민이생각님 감사합니다..
잘작동하네요...ㅎ
잘작동하네요...ㅎ
사용하고 싶은데...브라우져 지원이 안되는게 많네요.
제가 테스트 해본결과는
IETester 로 익스 5,6,7,8, 사파리, 크롬, 오페라, 파이어폭스 정도는 됬었는데
테스트 주소는 http://****ine.kr/tab.php 여기 이구요
IETester 로 익스 5,6,7,8, 사파리, 크롬, 오페라, 파이어폭스 정도는 됬었는데
테스트 주소는 http://****ine.kr/tab.php 여기 이구요
슬라이딩 무한 탭메뉴 그누보드가 최고인듯^^
대박입니다.ㅎㅎ
무한가능성이 보입니다.^^
적용만 잘하면.. 암튼 대박느낌이^^
네이버보단괜찮네요^^
감사합니다.
대박입니다.ㅎㅎ
무한가능성이 보입니다.^^
적용만 잘하면.. 암튼 대박느낌이^^
네이버보단괜찮네요^^
감사합니다.
감사합니다.
어떻게 적용하죠 ;
1. tab.php 파일 열고, 아래 소스를 복사해서 교체하세요.
<?
$slide_tab_width = 180; // 가로크기
$slide_tab_height = 200; // 메뉴부분을 제외한 내용부분 세로크기
?>
<style type="text/css">
a:link, a:visited, a:active { text-decoration:none; color:#555555; }
a:hover { text-decoration:underline; color:#000000; }
div { font-family:Dotum; font-size:12px; }
.br1cc { border-right:1px solid #cccccc; }
.bt1cc { border-top:1px solid #cccccc; }
.bl1cc { border-left:1px solid #cccccc; }
.bb1cc { border-bottom:1px solid #cccccc; }
.bb1f5 { border-bottom:1px solid #f5f5f5; }
.slide-tab { border:1px solid #cccccc; overflow-x:hidden; position:relative; margin:0 auto; width:<?php echo $slide_tab_width?>px; z-index:10; }
.slide-tab-line { height:32px; position:relative; width:<?php echo $slide_tab_width?>px; z-index:10; }
#slide-tab-menu
{
clear:both;
font-family:Dotum;
font-size:11px;
letter-spacing:-1px;
position:absolute;
white-space:nowrap;
z-index:20;
}
#slide-tab-menu a { display:inline-block; height:32px; line-height:32px; padding:0 20px 0 20px; margin:0; }
#slide-tab-menu a.select { background-color:#f5f5f5; color:#000000; font-weight:bold; text-decoration:underline; }
#slide-tab-menu a.noselect { }
#slide-tab-content { background-color:#f5f5f5; clear:both; height:<?php echo $slide_tab_height?>px; }
#slide-tab-content div { display:none; height:100%; width:100%; }
</style>
<div class="slide-tab">
<div id="slide-tab-menu"><?
$subject_arr = array();
$subject_arr[0] = "도서";
$subject_arr[1] = "G마켓";
$subject_arr[2] = "인터파크";
$subject_arr[3] = "11번가";
$subject_arr[4] = "옥션";
$subject_arr[5] = "롯데닷컴";
$subject_arr[6] = "CJmall";
$subject_arr[7] = "신세계몰";
$subject_arr[8] = "Hmall";
for ($i=0; $i<count($subject_arr); $i++)
{
$class = $i == 0 ? "select bb1f5" : "noselect bl1cc";
echo "<a href=\"javascript:;\" class='{$class}'>$subject_arr[$i]</a>";
}
?></div>
<div class="slide-tab-line bb1cc"></div>
<div id="slide-tab-content"><? // 아래 div 개수는 $subject_arr 개수와 같아야 합니다 ?>
<div style="display:block;">0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
</div>
<script type="text/javascript">
var tabs = document.getElementById("slide-tab-menu");
window.onload = function()
{
tabs.func_onclick = function(e)
{
var e = e || window.event;
var target = e.srcElement || e.target;
if (target.nodeName.toUpperCase() == "A")
{
target.blur();
if (target == this.target)
return;
if (this.target_obj != null)
this.target_obj.className = "";
this.target_obj = target;
var childs = this.children;
for (var i=0; i<childs.length; i++)
{
if (childs[0] == childs[i])
{
if (target == childs[i])
childs[i].className = "select bb1f5";
else
childs[i].className = "noselect";
}
else if (childs[childs.length] == childs[i])
{
if (target == childs[i])
childs[i].className = "select bb1f5";
else
childs[i].className = "noselect";
}
else
{
if (target == childs[i])
{
childs[i-1].className = "noselect bl1cc br1cc";
childs[i].className = "select bb1f5";
}
else
childs[i].className = "noselect bl1cc";
}
document.getElementById("slide-tab-content").children[i].style.display = target == childs[i] ? "block" : "none";
}
}
};
tabs.func_get_position = function(obj)
{
var tmp_obj = obj;
var result = {width : 0, height : 0, left : 0, top : 0};
while (tmp_obj.offsetParent)
{
if (result.width == 0) result.width = tmp_obj.offsetWidth;
if (result.height == 0) result.height = tmp_obj.offsetHeight;
result.left += tmp_obj.offsetLeft;
result.top += tmp_obj.offsetTop;
tmp_obj = tmp_obj.offsetParent;
}
return result;
};
tabs.func_slide = function()
{
tabs.left -= (tabs.left - tabs.targetLeft) * 0.1;
tabs.style.left = -tabs.left + "px";
if (Math.round(tabs.left) == tabs.targetLeft)
return;
tabs.move_timeout = setTimeout(tabs.func_slide, 1);
};
tabs.onclick = tabs.func_onclick;
window.onresize = function() { tabs.position = tabs.func_get_position(tabs); };
tabs.onmousemove = function(e)
{
var e = e || window.event;
this.percent = ((e.clientX - this.position.left) / tabs.parentNode.offsetWidth) * 100;
this.targetLeft = Math.round(((this.offsetWidth - tabs.parentNode.offsetWidth) / 100) * this.percent);
clearTimeout(this.move_timeout);
this.move_timeout = setTimeout(tabs.func_slide, 1);
};
tabs.left = 0;
tabs.is_move = false;
tabs.target_obj = null;
tabs.position = tabs.func_get_position(tabs);
tabs.onselectstart = function() { return false; };
tabs.ondragstart = function() { return false; };
};
</script>
2. tab.php 파일 FTP 업로드 경로 : 그누 루트
3. 원하는 위치에 불러오기
<div><? include_once("tab.php"); // 슬라이딩 무한탭메뉴 ?></div>
이렇게 하시면 될 것 같습니다
<?
$slide_tab_width = 180; // 가로크기
$slide_tab_height = 200; // 메뉴부분을 제외한 내용부분 세로크기
?>
<style type="text/css">
a:link, a:visited, a:active { text-decoration:none; color:#555555; }
a:hover { text-decoration:underline; color:#000000; }
div { font-family:Dotum; font-size:12px; }
.br1cc { border-right:1px solid #cccccc; }
.bt1cc { border-top:1px solid #cccccc; }
.bl1cc { border-left:1px solid #cccccc; }
.bb1cc { border-bottom:1px solid #cccccc; }
.bb1f5 { border-bottom:1px solid #f5f5f5; }
.slide-tab { border:1px solid #cccccc; overflow-x:hidden; position:relative; margin:0 auto; width:<?php echo $slide_tab_width?>px; z-index:10; }
.slide-tab-line { height:32px; position:relative; width:<?php echo $slide_tab_width?>px; z-index:10; }
#slide-tab-menu
{
clear:both;
font-family:Dotum;
font-size:11px;
letter-spacing:-1px;
position:absolute;
white-space:nowrap;
z-index:20;
}
#slide-tab-menu a { display:inline-block; height:32px; line-height:32px; padding:0 20px 0 20px; margin:0; }
#slide-tab-menu a.select { background-color:#f5f5f5; color:#000000; font-weight:bold; text-decoration:underline; }
#slide-tab-menu a.noselect { }
#slide-tab-content { background-color:#f5f5f5; clear:both; height:<?php echo $slide_tab_height?>px; }
#slide-tab-content div { display:none; height:100%; width:100%; }
</style>
<div class="slide-tab">
<div id="slide-tab-menu"><?
$subject_arr = array();
$subject_arr[0] = "도서";
$subject_arr[1] = "G마켓";
$subject_arr[2] = "인터파크";
$subject_arr[3] = "11번가";
$subject_arr[4] = "옥션";
$subject_arr[5] = "롯데닷컴";
$subject_arr[6] = "CJmall";
$subject_arr[7] = "신세계몰";
$subject_arr[8] = "Hmall";
for ($i=0; $i<count($subject_arr); $i++)
{
$class = $i == 0 ? "select bb1f5" : "noselect bl1cc";
echo "<a href=\"javascript:;\" class='{$class}'>$subject_arr[$i]</a>";
}
?></div>
<div class="slide-tab-line bb1cc"></div>
<div id="slide-tab-content"><? // 아래 div 개수는 $subject_arr 개수와 같아야 합니다 ?>
<div style="display:block;">0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
</div>
<script type="text/javascript">
var tabs = document.getElementById("slide-tab-menu");
window.onload = function()
{
tabs.func_onclick = function(e)
{
var e = e || window.event;
var target = e.srcElement || e.target;
if (target.nodeName.toUpperCase() == "A")
{
target.blur();
if (target == this.target)
return;
if (this.target_obj != null)
this.target_obj.className = "";
this.target_obj = target;
var childs = this.children;
for (var i=0; i<childs.length; i++)
{
if (childs[0] == childs[i])
{
if (target == childs[i])
childs[i].className = "select bb1f5";
else
childs[i].className = "noselect";
}
else if (childs[childs.length] == childs[i])
{
if (target == childs[i])
childs[i].className = "select bb1f5";
else
childs[i].className = "noselect";
}
else
{
if (target == childs[i])
{
childs[i-1].className = "noselect bl1cc br1cc";
childs[i].className = "select bb1f5";
}
else
childs[i].className = "noselect bl1cc";
}
document.getElementById("slide-tab-content").children[i].style.display = target == childs[i] ? "block" : "none";
}
}
};
tabs.func_get_position = function(obj)
{
var tmp_obj = obj;
var result = {width : 0, height : 0, left : 0, top : 0};
while (tmp_obj.offsetParent)
{
if (result.width == 0) result.width = tmp_obj.offsetWidth;
if (result.height == 0) result.height = tmp_obj.offsetHeight;
result.left += tmp_obj.offsetLeft;
result.top += tmp_obj.offsetTop;
tmp_obj = tmp_obj.offsetParent;
}
return result;
};
tabs.func_slide = function()
{
tabs.left -= (tabs.left - tabs.targetLeft) * 0.1;
tabs.style.left = -tabs.left + "px";
if (Math.round(tabs.left) == tabs.targetLeft)
return;
tabs.move_timeout = setTimeout(tabs.func_slide, 1);
};
tabs.onclick = tabs.func_onclick;
window.onresize = function() { tabs.position = tabs.func_get_position(tabs); };
tabs.onmousemove = function(e)
{
var e = e || window.event;
this.percent = ((e.clientX - this.position.left) / tabs.parentNode.offsetWidth) * 100;
this.targetLeft = Math.round(((this.offsetWidth - tabs.parentNode.offsetWidth) / 100) * this.percent);
clearTimeout(this.move_timeout);
this.move_timeout = setTimeout(tabs.func_slide, 1);
};
tabs.left = 0;
tabs.is_move = false;
tabs.target_obj = null;
tabs.position = tabs.func_get_position(tabs);
tabs.onselectstart = function() { return false; };
tabs.ondragstart = function() { return false; };
};
</script>
2. tab.php 파일 FTP 업로드 경로 : 그누 루트
3. 원하는 위치에 불러오기
<div><? include_once("tab.php"); // 슬라이딩 무한탭메뉴 ?></div>
이렇게 하시면 될 것 같습니다
새로고침하면 초기 게시물이 뜨지않고 메뉴클릭해야 나타나는데요..
메인화면에 적용할경우 인터넷 열면 클릭하지 않더라도 기본적으로 설정한 최근게시물이 보여지게 하려면 어떻게 하죠?
메인화면에 적용할경우 인터넷 열면 클릭하지 않더라도 기본적으로 설정한 최근게시물이 보여지게 하려면 어떻게 하죠?
링크는 어떻게 거나요 ? 아무리 봐도 링크 넣는곳을 못찾겠어요 ... 부탁드립니다.
좋네요 감사히 쓰겠습니다
ㅁ
그런데 인덱스페이지에서 여러개를 사용할수는없는건가요?
암튼 정말감사히 쓰겠습니다.^^
추천 꾸욱~~~
암튼 정말감사히 쓰겠습니다.^^
추천 꾸욱~~~
메인 스마트폰 자유게시판, 포인트샵(상세정보,한줄게시판, 배송정보..)
소셜 탭메뉴(오른쪽부분에 순위)
위쪽에 있는 탭을 왼쪽으로 상하로 놓고 싶은데 어디를 수정하면될까요??
언제가 한번은 써먹을 것 같아 스크랩해봐용.
고맙습니다. ^^
고맙습니다. ^^
이걸 메인페이지에 3개 넣으려면 어딜수정해야 될까요
아...추천해도 바로 숫자가 올라가지 않는 군요...
페이지를 리로드 해야 하네.아쉽다.
페이지를 리로드 해야 하네.아쉽다.
슬라이딩 무한탭
감사합니다.
