그누보드 - 탭메뉴(tab) 스타일쉬트 및 기타 정보 링크 사이트

탭메뉴(tab) 스타일쉬트 및 기타 정보 링크 사이트 > 그누4 팁자료실

그누4 팁자료실

그누보드4와 관련된 팁을 여러분들과 함께 공유하세요.
나누면 즐거움이 커집니다.

탭메뉴(tab) 스타일쉬트 및 기타 정보 링크 사이트 정보

탭메뉴(tab) 스타일쉬트 및 기타 정보 링크 사이트

본문

홈페이지내에 여러 정보가 들어있지만 tab메뉴만 소개해드립니다.

요즘 홈페이지에 탭(tab)메뉴 형식을 거의 다 활용하고 있지요.
그런점에서 참고할만한 유용한 팁이 있는곳을 소개합니다.

탭메뉴 만드실때 참고하시면 도움이 될듯하네요
1. http://html.nhndesign.com/ui_pattern_menu
2. http://findfun.tistory.com/entry/%ED%83%AD-%EB%A9%94%EB%89%B4-%EB%A7%8C%EB%93%A4%EA%B8%B0

탭의 활용및 탭메뉴 css, 자바스크립트, jQuery를 이용한 롤링등 다양한 정보가 있습니다

댓글 6개

forever 홈페이지 자기소개 아이디로 검색 전체게시물 회원게시물

홈페이지 자기소개 아이디로 검색 전체게시물 회원게시물

11.03.04 11:51:35

<style type='text/css'>
/* UI Object */
.tab_tite {
position:relative;
height:29px;
margin-top:20px;
background:url(http://static.naver.com/groupware/common/tab_menu.gif) repeat-x 0 100%;
font-family:'돋움',dotum;font-size:12px
}
.tab_tite ul,.tab_tite ul li {margin:0;padding:0}
.tab_tite ul li {list-style:none}
.tab_tite ul li,.tab_tite ul li a {
background:url(http://static.naver.com/groupware/2010/bg_tab2_off.gif) no-repeat
}
.tab_tite ul li {
float:left;
margin-right:-1px;
line-height:26px
}
.tab_tite ul li a {
display:inline-block;
padding:2px 16px 1px;_padding:3px 16px 0;
background-position: 100% 0;
font-weight:bold;color:#666;text-decoration:none !important
}
.tab_tite ul li a:hover {color:#000}
.tab_tite ul li.on,.tab_tite ul li.on a {
background-image:url(http://static.naver.com/groupware/2010/bg_tab2_on.gif)
}
.tab_tite ul li.on a{color:#3376b8}
/* //UI Object */
</style>

<script type='text/javascript'>
function viewContents(i)
{
document.getElementById('contents1').style.display = "none";
document.getElementById('contents2').style.display = "none";
document.getElementById('contents3').style.display = "none";
document.getElementById('contents4').style.display = "none";
document.getElementById('contents'+i).style.display = "";
}
</script>


<div class="tab_tite">
<ul>
<li class="on" onclick="viewContents(1)"><a href="#">탭메뉴01</a></li>
<li class="on" onclick="viewContents(2);"><a href="#">탭메뉴02</a></li>
<li class="on" onclick="viewContents(3);"><a href="#">탭메뉴03</a></li>
<li class="on" onclick="viewContents(4);"><a href="#">탭메뉴03</a></li>
</ul>
</div>


<div id="contents1" style="display:block; text-align:left;">
<table border="1" cellpadding="0" cellspacing="0" width="100%" height="100">
<tr>
<td bgcolor="#ffffff" colspan=3 >
첫번째 탭.
</td>
</tr>
</table>
</div>

<div id="contents2" style="display:none; text-align:left;">
<table border="1" cellpadding="0" cellspacing="0" width="300" height="100">
<tr>
<td bgcolor="#ffffff" colspan=3 >
2번째 탭.
</td>
</tr>
</table>
</div>

<div id="contents3" style="display:none; text-align:left;">
<table border="1" cellpadding="0" cellspacing="0" width="300" height="100">
<tr>
<td bgcolor="#ffffff" colspan=3 >
3번째 탭.
</td>
</tr>
</table>
</div>

<div id="contents4" style="display:none; text-align:left;">
<table border="1" cellpadding="0" cellspacing="0" width="300" height="100">
<tr>
<td bgcolor="#ffffff" colspan=3 >
4번째 탭.
</td>
</tr>
</table>
</div>

<div class="tab_tite">
<ul>
<li class="on" onclick="viewContents(1)"><a href="#">탭메뉴01</a></li>
<li class="on" onclick="viewContents(2);"><a href="#">탭메뉴02</a></li>
<li class="on" onclick="viewContents(3);"><a href="#">탭메뉴03</a></li>
<li class="on" onclick="viewContents(4);"><a href="#">탭메뉴03</a></li>
</ul>
</div>