Tuesday, May 31, 2011

skipnav sass mixin

This is rewrite of excelent idea from
http://www.jimthatcher.com/skipnav.htm as Sass mixin.


/*
http://www.jimthatcher.com/skipnav.htm
<nav class="my-skipnav">
 <a href="#maincontent">Skip to main content</a>
 <a href="#sitemap">Skip to footer site map</a>
</nav>

Usage:
// using traditional class
.my-skipnav {
 @include  a11y-skipnav;
}
// or using structure selector
body>nav:first-child {
 @include  a11y-skipnav;
}
*/
@mixin a11y-skipnav {
 text-align: left;
 a {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;  
 } 
 a:focus, a:active {
  position: static;
  left: 0;
  width: auto;
  height: auto;
  overflow: visible;
 }
} 

No comments:

Post a Comment