[jquery/css] 간단한 탭메뉴 만들기 tab menu

jquery 와 css 을 이용한 간단한 탭메뉴 만들기 

head 부분에 jquery 호출
 

tab 메뉴를 구현할 box 만들기 

box는 가로 200px 세로길이는 컨텐츠에 따라 자동으로 늘어나는 auto height로 구성

height:auto;
overflow:hidden;

	.tab{
		width:200px;
		height:auto;
		overflow:hidden;
	}

클릭하여 동작할 tab 부분 css 작업 

tab을 3개 넣을거라 33.3333% 로 작업 / 같은 크기의 3개의 탭

높이는 텍스트의 line-height 로 잡음 (40px)

tab을 클릭해야 함으로 cursor:pointer 로 마우스 커스를 올렸을때 손가락 모양이 나오게 함

그리고 tab이 선택된 것을 표시하기 위해 .on 클래스로 표기함 

마우스 오버와 선택된 것을 동일하게 적용하기 위해 

.tab ul li:hover,.tab ul li.on{ /*css*/ }

위와같이 구현함

	.tab{
		width:200px;
		height:auto;
		overflow:hidden;
	}

	.tab ul{
		padding:0;
		margin:0;
		list-style:none;
		width:100%:
		height:auto;
		overflow:hidden;
	}

	.tab ul li{
		display:inline-block;
		width:33.3333%;
		float:left;
		line-height:40px;
		text-align:center;
		cursor:pointer;
	}

	.tab ul li:hover,
	.tab ul li.on{
		background:#ccc;
	}

	

		
tab #1
		
tab #2
		
tab #3
	

tab 선택에 따라 보여줄 content box 작업

content box는 선택된 것만 보여줄 것이므로 기본적으로 display:none 으로 처리 

선택된 것을 표시하기 위해 .on 클래스를 추가하여 display:block 속성을 줌

	.tab{
		width:200px;
		height:auto;
		overflow:hidden;
	}

	.tab ul{
		padding:0;
		margin:0;
		list-style:none;
		width:100%:
		height:auto;
		overflow:hidden;
	}

	.tab ul li{
		display:inline-block;
		width:33.3333%;
		float:left;
		line-height:40px;
		text-align:center;
		cursor:pointer;
	}

	.tab ul li:hover,
	.tab ul li.on{
		background:#ccc;
	}

	.tab .conBox{
		width:100%;
		height:auto;
		overflow:hidden;
		min-height:200px;
		background:#ccc;
		display:none;
		text-align:center;
	}

	.tab .conBox.on{
		display:block;
	}

	

		
tab #1
		
tab #2
		
tab #3
	
	

		cont1
	
	

		cont2
	
	

		cont3
	

이렇게 되면 기본적인 틀을 되었음 

이제 jquery 작업 시작 

선택된 li 에 대한 index 값으로도 content box의 id 를 호출 할 수 있고, 
그외 다른 방법들로도 구현은 가능하나, 
이번에는 data 값을 주어 그 값으로 호출함

간단하게 jquery와 css를 이용하여 탭메뉴 만들기 끝 

완성코드 

CSS

	.tab{
		width:200px;
		height:auto;
		overflow:hidden;
	}

	.tab ul{
		padding:0;
		margin:0;
		list-style:none;
		width:100%:
		height:auto;
		overflow:hidden;
	}

	.tab ul li{
		display:inline-block;
		width:33.3333%;
		float:left;
		line-height:40px;
		text-align:center;
		cursor:pointer;
	}

	.tab ul li:hover,
	.tab ul li.on{
		background:#ccc;
	}

	.tab .conBox{
		width:100%;
		height:auto;
		overflow:hidden;
		min-height:200px;
		background:#ccc;
		display:none;
		text-align:center;
	}

	.tab .conBox.on{
		display:block;
	}

HTML / JAVASCRIPT

	

		
tab #1
		
tab #2
		
tab #3
	
	

		cont1
	
	

		cont2
	
	

		cont3