네이버 스킵네비게이션

by hohoya33

HTML

<div id="u_skip">
		<!-- [D] 주메뉴가 존재하는 페이지에 적용 -->
		<a href="#lnb" onclick="document.getElementById('lnb').tabIndex=-1;document.getElementById('lnb').focus();return false;"><span>주메뉴로 바로가기</span></a>
		<a href="#content" onclick="document.getElementById('content').tabIndex=-1;document.getElementById('content').focus();return false;"><span>본문으로 바로가기</span></a>
	</div>


<div id="u_skip">
<a href="#news_cast2" onclick="document.getElementById('news_cast2').tabIndex = -1;document.getElementById('news_cast2').focus();return false;"><span>뉴스스탠드 바로가기</span></a>
<a href="#open_cast" onclick="document.getElementById('open_cast').tabIndex = -1;document.getElementById('open_cast').focus();return false;"><span>오픈캐스트 바로가기</span></a>
<a href="#themecast" onclick="document.getElementById('themecast').tabIndex = -1;document.getElementById('themecast').focus();return false;"><span>주제별캐스트 바로가기</span></a>
<a href="#time_square" onclick="document.getElementById('time_square').tabIndex = -1;document.getElementById('time_square').focus();return false;"><span>타임스퀘어 바로가기</span></a>
<a href="#shop_cast" onclick="document.getElementById('shop_cast').tabIndex = -1;document.getElementById('shop_cast').focus();return false;"><span>쇼핑캐스트 바로가기</span></a>

<a href="#com_cast" onclick="document.getElementById('com_cast').tabIndex = -1;document.getElementById('com_cast').focus();return false;"><span>미니네이버me 바로가기</span></a>

</div>

CSS

@charset "euc-kr";
body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select{margin:0;padding:0}
body,input,textarea,select,button,table{font-family:'돋움',Dotum,AppleGothic,sans-serif;font-size:12px}
img,fieldset{border:0}
ul,ol{list-style:none}
em,address{font-style:normal}
a{text-decoration:none}
input[type=image],input[type=text],input[type=submit],input[type=password]{-webkit-appearance:none;-webkit-border-radius:0} 
textarea{overflow:auto}
hr{display:none}
label{cursor:pointer}
.blind,legend{visibility:hidden;overflow:hidden;position:absolute;top:0;left:0;width:0;height:0;font-size:0;line-height:0}
body{width:100%;height:100%}

/* skip navigation */
#u_skip{position:relative;z-index:2147483647}
#u_skip a{position:absolute;top:-30px;left:0;width:128px;border:1px solid #4ec53d;background:url(https://static.nid.naver.com/images/web/user/sp_u_skip.png) repeat-x 0 -11px;text-align:center;outline:none;transition: .3s;}
#u_skip a:active,#u_skip a:focus{top:0;text-decoration:none;cursor:pointer;*zoom:1}
#u_skip span{display:inline-block;padding:2px 6px 0 0;background:url(https://static.nid.naver.com/images/web/user/sp_u_skip.png) no-repeat 100% 11px;font-size:11px;line-height:26px;color:#fff;letter-spacing:-1px}