웹접근성 네비게이션 기존방식

by hohoya33

HTML

<script src="https://fonts.googleapis.com/icon?family=Material+Icons"></script>
<div tabindex="0">

<ul class="ctg_mall_lst">
	<li class="ctg_top_mn">
		<a href="http://www.ssg.com" class="ctg_top_lnk">SSG.COM</a>
	    <div class=" ctg_sub_area">
	      <ul class="ctg_sub_lst">
	         <li class="ctg_sub_mn"><a href="#" class="ctg_sub_lnk">패션</a></li>
	         <li class="ctg_sub_mn"><a href="#" class="ctg_sub_lnk">잡화</a></li>
	         <li class="ctg_sub_mn"><a href="#" class="ctg_sub_lnk">뷰티</a></li>
	      </ul>
	    </div>
	</li>
  <li class="ctg_top_mn">
		<a href="http://shinsegaemall.ssg.com/" class="ctg_top_lnk">신세계몰</a>
        <div class="ctg_sub_area">
	      <ul class="ctg_sub_lst">
	         <li class="ctg_sub_mn"><a href="#" class="ctg_sub_lnk">여성패션</a></li>
	         <li class="ctg_sub_mn"><a href="#" class="ctg_sub_lnk">남성/캐주얼</a></li>
	         <li class="ctg_sub_mn"><a href="#" class="ctg_sub_lnk">패션잡화</a></li>
	      </ul>
	    </div>
	</li>
  <li class="ctg_top_mn">
		<a href="http://department.ssg.com/" class="ctg_top_lnk">신세계백화점</a>
	     <div class="ctg_sub_area">
	      <ul class="ctg_sub_lst">
	         <li class="ctg_sub_mn"><a href="#" class="ctg_sub_lnk">화장품/잡화</a></li>
	         <li class="ctg_sub_mn"><a href="#" class="ctg_sub_lnk">여성패션</a></li>
	      </ul>
	    </div>
	</li>
  <li class="ctg_top_mn">
		<a href="http://emart.ssg.com/" class="ctg_top_lnk">이마트몰</a>
	    <div class="ctg_sub_area">
	      <ul class="ctg_sub_lst">
	         <li class="ctg_sub_mn"><a href="#" class="ctg_sub_lnk">FOOD</a>
	         </li>
	         <li class="ctg_sub_mn"><a href="#" class="ctg_sub_lnk">LIFE</a></li>
	      </ul>
	    </div>
	</li>
</ul>

</div>

CSS

:focus{outline:4px solid #FF0000}
body{color:#fff;background:#282c34}
.blind{overflow:hidden;position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;line-height:0;white-space:normal;word-wrap:break-word;word-break:break-all;clip:rect(0,0,0,0)}
.blind:before{display:block;width:0;height:0;font-size:0;content:'\00a0'}
ul li{list-style:none}

.ctg_mall_lst{position:relative}

.ctg_top_mn{width:170px;height:46px;border-top: 1px dotted #d8d8d8;background:#fff}
.ctg_top_mn a{overflow:hidden;text-overflow:ellipsis;word-break:break-all;white-space:nowrap;text-decoration:none}
.ctg_top_lnk{display:block;height:20px;line-height:20px;padding:12px 20px;color:#777;letter-spacing:-.3px}
.ctg_top_lnk:focus{color:#222}


.ctg_a11y_btn{display:none;position:relative;z-index:10;float:right;width:20px;height:25px;overflow:hidden;margin-top:-25px;background:transparent}
.ctg_a11y_btn:after{content:'';display:inline-block;width:4px;height:4px;border-top:1px solid #888;border-right:1px solid #888;transform:rotate(45deg)}
.ctg_top_mn>.ctg_a11y_btn{height:45px;margin-top:-45px}



.ctg_sub_area{display:none;position:absolute;top:0;bottom:0;left:210px;border:1px solid #d1d1d1;background:#fff}
.ctg_sub_lst{width:140px;padding:0}
.ctg_sub_lnk{display:block;margin-left:10px;padding:1px 10px 0 10px;line-height:23px;border:1px solid transparent;color:#777;font-size:13px;letter-spacing:-.3px}
.ctg_sub_mn.on>.ctg_sub_lnk,.ctg_sub_mn>.ctg_sub_lnk:focus{color:#222;font-family:NanumBarunGothicBold}
.ctg_sub_mn.ctg_sub_child.on>.ctg_sub_lnk{position:relative;z-index:110;border-color:#d8d8d8;border-right-color:#fff}

.ctg_top_mn.on .ctg_sub_area{display:block}

JavaScript

$('.ctg_mall_lst').on('mouseenter focusin', '.ctg_top_mn, .ctg_sub_mn', function(e){
  var welTarget = $(e.currentTarget);
  welTarget.addClass('on').siblings().removeClass('on');
  
}).on('mouseleave', '.ctg_top_mn, .ctg_sub_mn', function(e){
  var welTarget = $(e.currentTarget);
  welTarget.removeClass('on');
});