 필요한 스크립트
*스타일시트
<style>
#dolphincontainer{position:relative;border-bottom: 2px solid navy; color:#E0E0E0;background:#143D55;
width:100%;font-family:Helvetica,Arial,Verdana,sans-serif;}
#dolphinnav{position:relative;height:33px;font-size:12px;text-transform:uppercase;font-weight:bold;background:#fff url(images/dolphin_bg.gif) repeat-x bottom left;padding:0 0 0 20px;}
#dolphinnav ul{margin:0;padding:0;list-style-type:none;width:auto;float:left;}
#dolphinnav ul li{display:block;float:left;margin:0 1px;}
#dolphinnav ul li a{display:block;float:left;color:#EAF3F8;text-decoration:none;padding:0 0 0 20px;height:33px;}
#dolphinnav ul li a span{padding:12px 20px 0 0;height:21px;float:left;}
#dolphinnav ul li a:hover{color:#fff;background:transparent url(images/dolphin_bg-OVER.gif) repeat-x bottom left;}
#dolphinnav ul li a:hover span{display:block;width:auto;cursor:pointer;}
#dolphinnav ul li a.current,#dolphinnav ul li a.current:hover{color:#fff;background:#1D6893 url(images/dolphin_left-ON.gif) no-repeat top left;line-height:275%;}
#dolphinnav ul li a.current span{display:block;padding:0 20px 0 0;width:auto;background:#1D6893 url(images/dolphin_right-ON.gif) no-repeat top right;height:33px;}
#dolphin_inner{color: white; padding: 5px; font-size: 80%; height: 1em}
#dolphin_inner a:link, #dolphin_inner a:visited, #dolphin_inner a:active{color: white}
#dolphin_inner a:hover{color: yellow}
.innercontent{display: none;margin:10}
</style>
* 스크립트
<script type="text/javascript">
var dolphintabs={
subcontainers:[], last_accessed_tab:null,
revealsubmenu:function(curtabref){
this.hideallsubs()
if (this.last_accessed_tab!=null)
this.last_accessed_tab.className=""
if (curtabref.getAttribute("rel")) //If there's a sub menu defined for this tab item, show it
document.getElementById(curtabref.getAttribute("rel")).style.display="block"
curtabref.className="current"
this.last_accessed_tab=curtabref
},
hideallsubs:function(){
for (var i=0; i<this.subcontainers.length; i++)
document.getElementById(this.subcontainers[i]).style.display="none"
},
init:function(menuId, selectedIndex){
var tabItems=document.getElementById(menuId).getElementsByTagName("a")
for (var i=0; i<tabItems.length; i++){
if (tabItems[i].getAttribute("rel"))
this.subcontainers[this.subcontainers.length]=tabItems[i].getAttribute("rel") //store id of submenu div of tab menu item
if (i==selectedIndex){ //if this tab item should be selected by default
tabItems[i].className="current"
this.revealsubmenu(tabItems[i])
}
tabItems[i].onmouseover=function(){
dolphintabs.revealsubmenu(this)
}
} //END FOR LOOP
}
}
</script>
 사용방법
이 탭메뉴를 사용하기 위해서는 상단에 적혀있는 스타일시트와 스크립트가 포함되어있어야 하며, 하단에 적혀있는 스크립트와 출력방식이 맞아야 합니다.
*본문부분
<div id="dolphincontainer">
<div id="dolphinnav">
<ul>
<li><a href="http://happycgi.com/" rel="home"><span>홈으로</span></a></li>
<li><a href="http://happycgi.com/" rel="tab1"><span>메뉴1</span></a></li>
<li><a href="http://happycgi.com/" rel="tab2"><span>메뉴2</span></a></li>
<li><a href="http://happycgi.com/" rel="tab3"><span>메뉴3</span></a></li>
<li><a href="http://happycgi.com/" rel="tab4"><span>메뉴4</span></a></li>
</ul>
</div>
<div id="dolphin_inner">
<div id="home" class="innercontent">
홈으로 화면 내용<br>
</div>
<div id="tab1" class="innercontent">
탭 메뉴 내용 1<br>
</div>
<div id="tab2" class="innercontent">
탭 메뉴 내용 2<br>
</div>
<div id="tab3" class="innercontent">
탭 메뉴 내용 3<br>
</div>
<div id="tab4" class="innercontent">
탭 메뉴 내용 4<br>
</div>
</div>
</div>
위의 태그처럼 div태그가 존재해야 합니다.
<script type="text/javascript">
dolphintabs.init("dolphinnav", 1) //최초 활성화시킬 탭 메뉴 선택 숫자 1은 첫번째 탭
</script>
가장하단에 위의 스크립트가 존재하여야 합니다. 위의 부분은 처음으로 오버되어있는 탭메뉴의 번호이며,
0 이 가장 첫번째의 메뉴입니다.
|
