Best Practice Skipnav #2

skipnav2.html

<!--- Style and implementation from http://webaim.org/techniques/skipnav/ --->
<style>
#skipnav a {
	padding:6px;
	position: absolute;
	top:-40px;
	left:0px;
	color:white;
	border-right:1px solid white;
	border-bottom:1px solid white;
	border-bottom-right-radius:8px;
	background:transparent;
	-webkit-transition: top 1s ease-out, background 1s linear;
    transition: top 1s ease-out, background 1s linear;
    z-index: 100;
}
#skipnav a:focus {
	position:absolute;
	left:0px;
	top:0px;
	background:#BF1722;
	outline:0;	
	-webkit-transition: top .1s ease-in, background .5s linear;
    transition: top .1s ease-in, background .5s linear;
}
</style>



<!--- Immediately after the opening body tag or inside of a wrapper div; 
		"maincontent" should be the ID of a containing div/section/article tag (using a link object for this is deprecated)
		"skip to main content" is best-practice link text due to pronounciation issues
--->
<div id="skipnav"><a href="#maincontent" id="skipnavlink">skip to main content</a></div>



<!--- Hack to fix "skip to main content" link in Google Chrome (requires jQuery, placed near the end of the document) --->
<script type="text/javascript">
$(document).ready(function(){
	$("#skipnavlink").click(function(){
		$('#maincontent').attr('tabIndex',-1).focus();
	});
});
</script>