[HTML/CSS] tab menu, 탭메뉴 만들기

이번엔 웹에서 자주 사용되는 방식의 tab메뉴를 위주로 한번 만들어보려고 한다.

 

TabMenu의 메뉴 단부분과 메뉴 클릭 시 보여지는 창 부분을 잡아주어야 한다.

<ul>에 <li>를 이용해 메뉴의 단 부분의 틀을 만들고, <ul>에는 id값으로 "intTab", <li>안에 <a>태그를 이용하였다.

<a>의 title값에 "tab1","tab2","tab3"으로 각자 값을 주었다.

​

tab메뉴의 창부분은 <div>를 이용해 각각 잡아주었으며,

id값은 단부분 메뉴 <a>에 사용했던 title값과 동일하게 주었다.

 

HTML

<div class="board_list_box">
    <div id="intTab" class="tab_menu">
         <ul class="tab">
             <li><a href="#" title="subTab1">전체</a></li>
             <li><a href="#" title="subTab2">메뉴1</a></li>
             <li><a href="#" title="subTab3">메뉴2</a></li>
             <li><a href="#" title="subTab4">메뉴3</a></li>
             <li><a href="#" title="subTab5">메뉴4</a></li>
             <li><a href="#" title="subTab6">메뉴5</a></li>
          </ul>
    </div>
    <div id="subTab" class="tab_form">
        <div id="subTab1">test1</div>
        <div id="subTab2">test2</div>
        <div id="subTab3">test3</div>
        <div id="subTab4">test4</div>
        <div id="subTab5">test5</div>
        <div id="subTab6">test6</div>
    </div>
</div>

 

CSS

li {list-style-type: none;}
a {color: #333; text-decoration: none;}

/* tab_menu */
.tab_menu {overflow: hidden; width: 100%;}
.tab_menu .tab {display: block;}
.tab_menu .tab li{float: left; width: 12%; height: 60px; line-height: 58px; text-align: center; border: 1px solid #d5d5d3; background-color: #eee;}
.tab_menu .tab li a {font-size: 18px; font-weight: 500;}
.tab_menu .tab li:hover, .tab_menu .tab li:focus {border: 1px solid #7346a9; background-color: #FFF;}
.tab_menu .tab li:hover a, .tab_menu .tab li:focus a {color: #7346a9;}

.tab_form {position: relative; display: block; width: 100%;}

 

JS

$(document).ready(function(){
			$("#subTab div").hide();
			$("#intTab li:first").attr("id","current");
			$("#subTab div:first").fadeIn();

			$('#intTab a').click(function(e){
				e.preventDefault();
				$("#subTab div").hide();
				$("intTab li").attr("id","");
				$(this).parent().attr("id","current");
				$('#'+$(this).attr('title')).fadeIn();
			});
		});

​

마지막으로 메뉴 단을 클릭했을 때, 선택한 메뉴의 창부분으로 갈 수 있도록 자바스크립트로 잡아준다.

​

Tab메뉴를 누른 메뉴대로 "메뉴1(클릭) --> 메뉴1 창 부분 | 메뉴2(클릭) --> 메뉴2 창 부분 | 메뉴3(클릭) --> 메뉴3 창 부분"

이렇게 보여질 수 있도록 잡아주어야한다.

​

ul의 id값인 "intTab"안에 li를 클릭했을 때, title값과 id값이 동일한 <div> 창 부분을 제외하고 안보이게 처리해준다