728x90
http://jsfiddle.net/chunyong/5kd8nkyg/
웹접근성에 맞는 탭메뉴 - JSFiddle - Code Playground
jsfiddle.net
구글에서 검색가능한 위 접근성 메뉴를 참조하여 나름의 해석과 공부한 흔적입니다. 접근성 탭메뉴 제작시 도움이 될까 하여 공유합니다. 위 코드를 기반하여 만들었으며 뺄꺼빼고 넣을꺼 넣고 해석할거 해석하고 ! 해서 수정하였습니다. 감사합니다.
JQuery 버전은 3.5.1 을 사용하였습니다.
html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<script src="jquery-3.5.1.min.js"></script>
<script src="main.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>접근성 탭 메뉴</title>
</head>
<body>
<div class="tab list">
<ul>
<li class="active"><a href="#none"><span>공지사항</span></a>
<ul>
<li>› <a href="#none">이것은 첫 번째 탭의 공지사항 목록 입니다.</a> <span class="time">2010.12.24</span></li>
<li class="more">› <a href="#none">공지사항 더보기</a></li>
</ul>
</li>
<li><a href="#none"><span>보도자료</span></a>
<ul>
<li>› <a href="#none">이것은 두 번째 탭의 보도자료 목록 입니다.</a> <span class="time">2010.12.24</span></li>
<li>› <a href="#none">이것은 두 번째 탭의 보도자료 목록 입니다.</a> <span class="time">2010.12.24</span></li>
<li>› <a href="#none">이것은 두 번째 탭의 보도자료 목록 입니다.</a> <span class="time">2010.12.24</span></li>
<li>› <a href="#none">이것은 두 번째 탭의 보도자료 목록 입니다.</a> <span class="time">2010.12.24</span></li>
<li class="more">› <a href="#none">보도자료 더보기</a></li>
</ul>
</li>
<li><a href="#none"><span>자료실</span></a>
<ul>
<li>› <a href="#none">이것은 세 번째 탭의 자료실 목록 입니다.</a> <span class="time">2010.12.24</span></li>
<li>› <a href="#none">이것은 세 번째 탭의 자료실 목록 입니다.</a> <span class="time">2010.12.24</span></li>
<li>› <a href="#none">이것은 세 번째 탭의 자료실 목록 입니다.</a> <span class="time">2010.12.24</span></li>
<li>› <a href="#none">이것은 세 번째 탭의 자료실 목록 입니다.</a> <span class="time">2010.12.24</span></li>
<li>› <a href="#none">이것은 세 번째 탭의 자료실 목록 입니다.</a> <span class="time">2010.12.24</span></li>
<li>› <a href="#none">이것은 세 번째 탭의 자료실 목록 입니다.</a> <span class="time">2010.12.24</span></li>
<li class="more">› <a href="#none">자료실 더보기</a></li>
</ul>
</li>
<li><a href="#none"><span>해명자료</span></a>
<ul>
<li>› <a href="#none">이것은 네 번째 탭의 해명자료 목록 입니다.</a> <span class="time">2010.12.24</span></li>
<li>› <a href="#none">이것은 네 번째 탭의 해명자료 목록 입니다.</a> <span class="time">2010.12.24</span></li>
<li>› <a href="#none">이것은 네 번째 탭의 해명자료 목록 입니다.</a> <span class="time">2010.12.24</span></li>
<li>› <a href="#none">이것은 네 번째 탭의 해명자료 목록 입니다.</a> <span class="time">2010.12.24</span></li>
<li>› <a href="#none">이것은 네 번째 탭의 해명자료 목록 입니다.</a> <span class="time">2010.12.24</span></li>
<li>› <a href="#none">이것은 네 번째 탭의 해명자료 목록 입니다.</a> <span class="time">2010.12.24</span></li>
<li>› <a href="#none">이것은 네 번째 탭의 해명자료 목록 입니다.</a> <span class="time">2010.12.24</span></li>
<li>› <a href="#none">이것은 네 번째 탭의 해명자료 목록 입니다.</a> <span class="time">2010.12.24</span></li>
<li>› <a href="#none">이것은 네 번째 탭의 해명자료 목록 입니다.</a> <span class="time">2010.12.24</span></li>
<li>› <a href="#none">이것은 네 번째 탭의 해명자료 목록 입니다.</a> <span class="time">2010.12.24</span></li>
<li>› <a href="#none">이것은 네 번째 탭의 해명자료 목록 입니다.</a> <span class="time">2010.12.24</span></li>
<li>› <a href="#none">이것은 네 번째 탭의 해명자료 목록 입니다.</a> <span class="time">2010.12.24</span></li>
<li>› <a href="#none">이것은 네 번째 탭의 해명자료 목록 입니다.</a> <span class="time">2010.12.24</span></li>
<li class="more">› <a href="#none">해명자료 더보기</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
css
@charset "utf-8";
/* 전체 크기 조절 */
.tab.list{
width: 500px;
margin: 0 auto;
}
/* 전체 ul 조정 */
.tab.list ul{
position:relative;
margin:0;
padding:0;
list-style:none;
border-bottom:1px solid #ccc;
font-family:Tahoma, Sans-serif;
font-size:12px;
}
/* 각 탭 메뉴 float 해제를 위한 가상요소 */
.tab.list ul:after{
content:"";
display:block;
clear:both;
}
/* 각 탭 메뉴 float속성과 border-bottom 의 선을 합치기 위한 마진 -1px */
.tab.list li{
float:left;
margin-bottom:-1px;
}
/* 모든 a태그 스타일 지정 */
.tab.list li a{
position:relative;
float:left;
text-decoration:none;
border:1px solid #eee;
border-bottom-color:#ccc;
background:#fafafa;
color:#666
}
/* 각 탭 메뉴 제목에 대한 스타일 */
.tab.list li a span{
display:inline-block;
padding:6px 25px;
letter-spacing:-1px;
}
/* 각 탭 메뉴 안의 내용 부분의 전체 ul */
.tab.list li ul{
width:100%;
position:absolute;
top:30px;
left:0;
list-style:none;
margin:0;
padding:0;
border: 1px solid #ccc;
border-top: none;
padding: 5px;
box-sizing: border-box;
}
/* 각 내용 float 해제 및 위치값 조절 */
.tab.list li li{
float:none;
position:relative;
margin-bottom:8px;
color:#999;
}
/* more앞의 요소의 마진값 조절 */
.tab.list li li:nth-last-child(-n + 2){
margin-bottom: 5px;
}
/* 각 내용 a태그 css */
.tab.list li li a{
float:none;
padding:0;
margin:0;
border:0 !important;
color:#666 !important;
font-weight:normal;
letter-spacing:normal;
}
/* 각 내용 a태그 스타일 css 조절 */
.tab.list li li a:hover,
.tab.list li li a:active,
.tab.list li li a:focus{
color:#000 !important;
text-decoration:underline;
}
/* 작성일 우측 정렬 */
.tab.list li li .time{
position:absolute;
top:0;
right:0;
color:#767676;
}
/* 더보기 정렬 */
.tab.list li li.more{
position:absolute;
top:-20px;
right:0;
}
/* 선택 된 탭 메뉴 박스 스타일 조정 */
.tab.list li.active a{
border:1px solid #ccc;
border-bottom:1px solid #fff;
margin-top:-1px;
background:transparent;
color:#333;
}
/* 선택 된 탭 메뉴 글자 스타일 조정 */
.tab.list li.active a span{
padding-top:7px;
font-weight:bold;
}
javascript
jQuery(function($){
var $tab_list = $('.tab.list');
// 전체 탭 메뉴 아래 리스트를 숨김
$tab_list.find('ul ul').hide();
// active 클래스를 가진 ul 만 보여지게 함
$tab_list.find('li.active>ul').show();
function listTabMenuToggle(event){
var $this = $(this);
console.log($this);
// 선택된 클래스 다음에 있는 ul(목록)을 찾아 보여주고 그의 부모 li클래스에 active클래스를 부여하고 형제 li에 있는 active를 삭제 후 그 형제 li의 ul을 찾아 숨긴다.
$this.next('ul').show().parent('li').addClass('active').siblings('li').removeClass('active').find('>ul').hide();
}
// a태그에 click 이나 focus 이벤트가 일어나면 listTabMenuToggle 함수호출
$tab_list.find('>ul>li>a').click(listTabMenuToggle).focus(listTabMenuToggle);
});
728x90
'웹 접근성' 카테고리의 다른 글
| 접근성 table 작성 (0) | 2020.08.26 |
|---|---|
| IR 기법 예제 (0) | 2020.08.18 |
| IR 기법에 대한 설명 (0) | 2020.08.18 |