Skip to content

Instantly share code, notes, and snippets.

@dgibson666
Created August 15, 2014 20:40
Show Gist options
  • Select an option

  • Save dgibson666/ee7519f54d4b8e33f7fe to your computer and use it in GitHub Desktop.

Select an option

Save dgibson666/ee7519f54d4b8e33f7fe to your computer and use it in GitHub Desktop.
Best Practice Skipnav #2
<!--- 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment