위키원
탭메뉴
탭메뉴(tab menu)는 상단 메뉴를 클릭하면 하단의 내용 콘텐츠 부분이 보여지는 메뉴다.
 .jpg) |
개요
탭메뉴는 탭 방식으로 화면을 전환하는 인터페이스를 말한다. 탭 방식이 자주 사용되는 이유는, 제한된 웹페이지 공간에 보여 줄 일부 콘텐츠를 레이어로 구분하여 숨기길 수 있기 때문이다. 숨겨진 영역만큼 확보된 영역에 원하는 콘텐츠를 선택해 보여줄 수 있게 되므로, 많은 콘텐츠를 보여줘야 하는 경우 많이 쓰인다. 사실 숨겨서 보여주는 화면 인터렉션 방법은 이 외에도 다양한 방법이 존재한다. 예를 들어 어코디언 방식 또는 햄거버 버튼 등도 비슷한 이유로 사용되는 방법이다. 하지만 탭메뉴가 선호되는 이유는 다른 메뉴간의 이동이 매우 간편하기 때문이다. 즉, 사용성이 매우 편리한 방법이다. 탭 방식은 고정된 메뉴 영역을 클릭을 통해 마음대로 이동할 수 있기 때문에 간편한 인터페이스를 가지고 있으며 매우 직관적인 것이 장점이다.[1]
기본 구조
- tab은 활성화되기 위한 클래스(on, active, current...)를 따로 부여해야 한다.
- tab의 on 클래스에는 활성화되었을 때 색상을 따로 지정한다.
- contents에도 활성화되기 위한 클래스(on, active, current...)를 지정한다.
- contents는 tab이 on이 아닐 때에는 보이지 않게 하기 위해서 display: none;을 넣어야 한다.
- contents의 on 클래스에 display: block;과 너비, 높이 등 보여질 부분의 속성을 지정한다.[2]
코드 예제
- HTML
<!-- /* 탭메뉴 시작*/ -->
<ul class="tabmenu">
<!-- /* 공지사항 시작*/ -->
<li class="active">
<a href="#">공지사항</a>
<div class="notice">
<ul>
<li><a href="#">3월 재입고 품목을 알려드립니다.<span>2020.03.14</span></a></li>
<li><a href="#">반품/환불 규정에 대해 알려드립니다.<span>2020.03.14</span></a></li>
<li><a href="#">S/S 시즌 신규 의류 신상품 안내<span>2020.03.14</span></a></li>
<li><a href="#">신규회원 대상 할인 이벤트 안내<span>2020.03.14</span></a></li>
</ul>
</div>
</li>
<!-- /* 공지사항 끝*/ -->
<!-- /* 갤러리 시작*/ -->
<li>
<a href="#">갤러리</a>
<div class="gallery">
<ul>
<li><a href="#"><img src="images/icon1.jpg" alt="갤러리1"></a></li>
<li><a href="#"><img src="images/icon2.jpg" alt="갤러리2"></a></li>
<li><a href="#"><img src="images/icon3.jpg" alt="갤러리3"></a></li>
</ul>
</div>
</li>
<!-- /* 갤러리 끝*/ -->
</ul>
<!-- /* 탭메뉴 끝*/ -->
- CSS
.tabmenu{
float: left;
width: 400px;
height: 180px;
margin-top: 10px;
margin-bottom: 10px;
}
.tabmenu>li{
float: left;
width: 100px;
line-height: 30px;
}
.tabmenu>li.active>a{
background-color: #ffffff;
}
.tabmenu>li:first-child a {
border-right: none;
}
.tabmenu>li>a{
display: block;
font-size: 16px;
text-align: center;
background-color: #cccccc;
border: 1px solid #dddddd;
border-bottom: none;
}
.tabmenu>li.active{
border-right: none;
}
.tabmenu>li.active div{
width: 392px;
height: 148px;
border: 1px solid #dddddd;
z-index: 1;
}
.tabmenu>li div{
position: absolute;
left: 0;
top: 40px;
overflow: hidden;
height: 0;
}
.notice ul{
float: left;
width: 380px;
margin-top: 12px;
margin-bottom: 12px;
}
.notice li{
height: 32px;
line-height: 32px;
font-size: 15px;
margin-left: 10px;
}
.notice li span{
float: right;
}
.notice li:nth-child(2n){
background-color: #dddddd;
}
.notice li:hover{
font-weight: bold;
}
.gallery li{
float: left;
margin-top: 15px;
margin-left: 5px;
}
.gallery img{
width: 100px;
height: 100px;
padding: 10px;
}
.gallery li:hover{
opacity: 0.5;
}
- 자바스크립트
$(function(){
$('.tabmenu>li>a').click(function(){
$(this).parent().addClass("active").siblings().removeClass("active");
return false;
});
});[3]
각주
- ↑ 〈Html로 탭메뉴(Tab Menu) 만드는 방법〉, 《웹이즈프리》, 2019-08-23
- ↑ 코딩하는라민 , 〈Jquery 탭 메뉴 만들기〉, 《티스토리》, 2022-09-26
- ↑ 용씨, 〈웹디자인실기: 탭메뉴 만들기〉, 《벨로그》, 2021-09-03
참고자료
- 〈Html로 탭메뉴(Tab Menu) 만드는 방법〉, 《웹이즈프리》, 2019-08-23
- 용씨, 〈웹디자인실기: 탭메뉴 만들기〉, 《벨로그》, 2021-09-03
- 코딩하는라민 , 〈Jquery 탭 메뉴 만들기〉, 《티스토리》, 2022-09-26
같이 보기
