웹접근성을 준수한 탭메뉴 jquery

구글에서 치면 바로나오는 소스인데,  웹접근성마크를 획득할 때 참조했던 탭메뉴 소스입니다.

기존의 탭메뉴와 구조가 약간 다른데,

웹접근성 마크가 필요한 프로젝트가 아니여도 사용해도 좋을것 같아서 공유합니다 :)

 

[html]

<div class="tab list" style="height: 160px;">
	<ul>
		<li class=""><a href="#"><span>공지사항</span></a>
			<ul style="display: none;">
				<li>› <a href="#">이것은 첫 번째 탭의 공지사항 목록 입니다.</a> <span class="time">2010.12.24</span></li>
				<li>› <a href="#">이것은 첫 번째 탭의 공지사항 목록 입니다.</a> <span class="time">2010.12.24</span></li>
				<li>› <a href="#">이것은 첫 번째 탭의 공지사항 목록 입니다.</a> <span class="time">2010.12.24</span></li>
				<li class="more">› <a href="#">공지사항 더보기</a></li>
			</ul>
		</li>
		<li class=""><a href="#"><span>보도자료</span></a>
			<ul style="display: none;">
				<li>› <a href="#">이것은 두 번째 탭의 보도자료 목록 입니다.</a> <span class="time">2010.12.24</span></li>
				<li>› <a href="#">이것은 두 번째 탭의 보도자료 목록 입니다.</a> <span class="time">2010.12.24</span></li>
				<li>› <a href="#">이것은 두 번째 탭의 보도자료 목록 입니다.</a> <span class="time">2010.12.24</span></li>
				<li>› <a href="#">이것은 두 번째 탭의 보도자료 목록 입니다.</a> <span class="time">2010.12.24</span></li>
				<li class="more">› <a href="#">보도자료 더보기</a></li>
			</ul>
		</li>
		<li class="active"><a href="#"><span>해명자료</span></a>
			<ul style="display: block;">
				<li>› <a href="#">이것은 세 번째 탭의 해명자료 목록 입니다.</a> <span class="time">2010.12.24</span></li>
				<li>› <a href="#">이것은 세 번째 탭의 해명자료 목록 입니다.</a> <span class="time">2010.12.24</span></li>
				<li>› <a href="#">이것은 세 번째 탭의 해명자료 목록 입니다.</a> <span class="time">2010.12.24</span></li>
				<li>› <a href="#">이것은 세 번째 탭의 해명자료 목록 입니다.</a> <span class="time">2010.12.24</span></li>
				<li>› <a href="#">이것은 세 번째 탭의 해명자료 목록 입니다.</a> <span class="time">2010.12.24</span></li>
				<li class="more">› <a href="#">해명자료 더보기</a></li>
			</ul>
		</li>
	</ul>
</div>

 

[css]

/* Tab + List */
.tab.list{height:160px}
.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;*zoom:1}
.tab.list ul:after{content:"";display:block;clear:both}
.tab.list li{float:left;margin-bottom:-1px}
.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 6px 25px;letter-spacing:-1px;cursor:pointer}
.tab.list li ul{width:100%;position:absolute;top:40px;left:0;list-style:none;border:0;margin:0;padding:0;*zoom:1}
.tab.list li ul:after{content:"";display:block;clear:both}
.tab.list li li{float:none;position:relative;margin:0 0 8px 0;color:#999}
.tab.list li li a{float:none;padding:0;margin:0;border:0 !important;color:#666 !important;font-weight:normal;background:transparent;letter-spacing:normal}
.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,
.tab.list li li .time{position:absolute;top:0;right:0;color:#767676}
.tab.list li li.more{position:absolute;top:-30px;right:0;border:0 !important;background:transparent}
.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}
.tab.list.jx{height:auto}
.tab.list.jx ul{border:0}
.tab.list.jx li{float:none;position:relative}
.tab.list.jx li a{float:none;display:block;font-weight:bold;color:#333;border:1px solid #eee !important;border-bottom-color:#ccc !important;background:#fafafa !important}
.tab.list.jx li ul{position:static;display:block;left:0;top:0;padding:5px 0}
.tab.list.jx li li a{display:inline;border:0 !important;background:none !important;font-weight:normal}
.tab.list.jx li li.more{top:7px;right:15px}

 

[js]

jQuery(function($){
	// List Tab Navigation
	var $tab_list = $('.tab.list');
	$tab_list.removeClass('jx').find('ul ul').hide();
	$tab_list.find('li li.active').parents('li').addClass('active');
	$tab_list.find('li.active>ul').show();
	$tab_list.each(function(){
		var $this = $(this);
		$this.height($this.find('li.active>ul').height()+40);
	});
	function listTabMenuToggle(event){
		var $this = $(this);
		$this.next('ul').show().parent('li').addClass('active').siblings('li').removeClass('active').find('>ul').hide();
		$this.closest('.tab.list').height($this.next('ul').height()+40);
		if($this.attr('href') === '#'){
			return false;
		}
	}
	$tab_list.find('>ul>li>a').click(listTabMenuToggle).focus(listTabMenuToggle);
});

 

 

여러개의 탭메뉴를 한 사이트에서 사용할 때는 아래 포스트를 확인해주세요 :)

eunyoe.tistory.com/entry/%ED%83%AD%EB%A9%94%EB%89%B4-%EC%97%AC%EB%9F%AC%EA%B0%9C-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95

 

 

-출처 : jsfiddle.net/chunyong/5kd8nkyg/