월요일, 7월 22, 2024
HomeLanguageHTML TAB 구현하기

HTML TAB 구현하기

HTML TAB 구현하기

아래의 이미지와 같이 HTML CSS를 이용하여 탭메뉴(TAB MENU) 만드는 방법에 대한 포스트입니다.

htmltab001

<style>
span {
    padding-left:1px; 
    display:block;
}
input[readonly]
{
    background-color:#eeeeee;
    border: 0;
}
.button {
   border: 1px solid #0a3c59;
   background: #3e779d;
   background: -webkit-gradient(linear, left top, left bottom, from(#65a9d7), to(#3e779d));
   background: -webkit-linear-gradient(top, #65a9d7, #3e779d);
   background: -moz-linear-gradient(top, #65a9d7, #3e779d);
   background: -ms-linear-gradient(top, #65a9d7, #3e779d);
   background: -o-linear-gradient(top, #65a9d7, #3e779d);
   background-image: -ms-linear-gradient(top, #65a9d7 0%, #3e779d 100%);
   padding: 6px 12px;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
   -webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   -moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   text-shadow: #7ea4bd 0 1px 0;
   color: #06426c;
   font-size: 11px;
   font-family: helvetica, serif;
   text-decoration: none;
   vertical-align: middle;
   }
.button:hover {
   border: 1px solid #0a3c59;
   text-shadow: #1e4158 0 1px 0;
   background: #3e779d;
   background: -webkit-gradient(linear, left top, left bottom, from(#65a9d7), to(#3e779d));
   background: -webkit-linear-gradient(top, #65a9d7, #3e779d);
   background: -moz-linear-gradient(top, #65a9d7, #3e779d);
   background: -ms-linear-gradient(top, #65a9d7, #3e779d);
   background: -o-linear-gradient(top, #65a9d7, #3e779d);
   background-image: -ms-linear-gradient(top, #65a9d7 0%, #3e779d 100%);
   color: #fff;
   }
.button:active {
   text-shadow: #1e4158 0 1px 0;
   border: 1px solid #0a3c59;
   background: #65a9d7;
   background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#3e779d));
   background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
   background: -moz-linear-gradient(top, #3e779d, #65a9d7);
   background: -ms-linear-gradient(top, #3e779d, #65a9d7);
   background: -o-linear-gradient(top, #3e779d, #65a9d7);
   background-image: -ms-linear-gradient(top, #3e779d 0%, #65a9d7 100%);
   color: #fff;
   }
ul.tabs {
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    height: 32px;
    border-bottom: 1px solid #eee;
    border-left: 1px solid #eee;
    width: 100%;
    font-family:"dotum";
    font-size:12px;
}
ul.tabs li {
    float: left;
    text-align:center;
    cursor: pointer;
    width:120px;
    height: 31px;
    line-height: 31px;
    border: 1px solid #eee;
    border-left: none;
    font-weight: bold;
    background: #fafafa;
    overflow: hidden;
    position: relative;
}
ul.tabs li.active {
    background: #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
}
.tab_container {
    border: 1px solid #eee;
    border-top: none;
    clear: both;
    float: left;
    width:100%;
    background: #FFFFFF;
}
.tab_content {
    width:100%;
    padding: 5px;
    font-size: 12px;
    display: none;
}
.tab_container .tab_content ul {
    width:100%;
    margin:0px;
    padding:0px;
}
.tab_container .tab_content ul li {
    padding:5px;
    list-style:none
}
;
 #container {
    width:100%;
    margin: 0 auto;
}
</style>
<script type="text/javascript" src="/js/jquery-2.1.4.min.js"></script> <script>
$(function () {

    $(".tab_content").hide();
    $(".tab_content:first").show();

    $("ul.tabs li").click(function () {
        $("ul.tabs li").removeClass("active").css("color", "#333");
        //$(this).addClass("active").css({"color": "darkred","font-weight": "bolder"});
        $(this).addClass("active").css("color", "darkred");
        $(".tab_content").hide()
        var activeTab = $(this).attr("rel");
        $("#" + activeTab).fadeIn()
    });
});
</script>
<div id="container"> 

<ul class="tabs">
	<li style="list-style-type: none;">
<ul class="tabs">
	<li class="active">tab1</li>
</ul>
</li>
</ul>

 

<ul class="tabs">
	<li style="list-style-type: none;">
<ul class="tabs">
	<li>tab2</li>
</ul>
</li>
</ul>

 

<ul class="tabs">
	<li style="list-style-type: none;">
<ul class="tabs">
	<li>tab3</li>
</ul>
</li>
</ul>

 

<ul class="tabs">
	<li style="list-style-type: none;">
<ul class="tabs">
	<li>tab4</li>
</ul>
</li>
</ul>

   

<div class="tab_container"><!-- tab1 -->
<div id="tab1" class="tab_content"> 

<ul>
	<li style="list-style-type: none;">
<ul>
	<li>tab1</li>
</ul>
</li>
</ul>

 

<ul>
	<li style="list-style-type: none;">
<ul>
	<li><a class="button">조회</a></li>
</ul>
</li>
</ul>

   </div>
<!-- tab2 -->
<div id="tab2" class="tab_content"> 

<ul>
	<li style="list-style-type: none;">
<ul>
	<li>tab2</li>
</ul>
</li>
</ul>

 

<ul>
	<li style="list-style-type: none;">
<ul>
	<li><a class="button">조회</a></li>
</ul>
</li>
</ul>

   </div>
<!-- tab3 -->
<div id="tab3" class="tab_content"> 

<ul>
	<li style="list-style-type: none;">
<ul>
	<li>tab3</li>
</ul>
</li>
</ul>

 

<ul>
	<li style="list-style-type: none;">
<ul>
	<li><a class="button">조회</a></li>
</ul>
</li>
</ul>

   </div>
<!-- tab4 -->
<div id="tab4" class="tab_content"> 

<ul>
	<li style="list-style-type: none;">
<ul>
	<li>tab4</li>
</ul>
</li>
</ul>

 

<ul>
	<li style="list-style-type: none;">
<ul>
	<li><a class="button">조회</a></li>
</ul>
</li>
</ul>

   </div>
</div>
</div>

 

버튼 CSS 구현 참조사이트

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular