슬라이딩 무한 탭메뉴
파일 열면
상단에
<?
$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 개수만 마춰서 사용하시면 됨니다.
상단에
<?
$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 개수만 마춰서 사용하시면 됨니다.
|
댓글을 작성하시려면 로그인이 필요합니다.
그누4 스킨
5,847건스킨의 저작권은 해당 스킨 제작자님께 있으며, 그누보드의 저작권과 다를 수 있습니다. 스킨 다운로드시 좋아요와 감사의 코멘트를 남기시면 제작자에게 큰 힘이됩니다. ^^y 그누보드와 관련이 있지만 스킨과 빌더가 아니면 플러그인 게시판에 올려주세요.
댓글 39개
아 그리고 공간 좁은 곳애서도 사용할 수 있게 레이어가 접혔다가 펼쳐지게 하는 거는 어렵겟죠? 그러면 왕대박될거 같아요^^
subject가 고정이면 몰라두요....
<td width="100%">
<? include_once("$g4[path]/include/tab01.php"); ?>
</td>
요즘 쇼핑몰 만들고 있어서 필요로하고 있었는데 ~! 감사합니다 ^^
적용하니 스크롤바가 사라지네요...??
휠도 안되구요... 확인 부탁드립니다.
body { margin:0; padding:0; overflow:hidden; }
이부분을 삭제하니 스크롤바가 나타납니다.
(정상 작동합니다.)
그리고 <html></html>, <head></head>, <body></body>를 지워서 사용하시는게 좋을듯합니다.
잘작동하네요...ㅎ
IETester 로 익스 5,6,7,8, 사파리, 크롬, 오페라, 파이어폭스 정도는 됬었는데
테스트 주소는 http://****ine.kr/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>
이렇게 하시면 될 것 같습니다
메인화면에 적용할경우 인터넷 열면 클릭하지 않더라도 기본적으로 설정한 최근게시물이 보여지게 하려면 어떻게 하죠?
암튼 정말감사히 쓰겠습니다.^^
추천 꾸욱~~~
고맙습니다. ^^
페이지를 리로드 해야 하네.아쉽다.