tupence - CSS Demos

CSS3 Demos - Hiding Skip Navigation Links

Skip navigation links help people who use adaptive hardware or software to avoid having to read or listen to the navigation links over and over from page to page. Many site owners and designers like to hide the links and only have them appear when they're in focus or hovered over.

Demo

Jump To Content Jump To Search

Use the keyboard (in Firefox the tab key, in Opera CTRL+↓) to move over the links and highlight them and they look like this

What the links look like before they're hidden:
Jump To Content Jump To Search

Code

HTML

• <div id="skipnav"><a href="#content">Jump To Content</a> <a href="#search">Jump To Search</a></div>

CSS

• #skipnav a{
  position: relative;
  left: -9999em; /*move the links off the page*/
  z-index: 999;
  }
• #skipnav a:active, #skipnav a:focus{
  left: 5px; /*move the links back onto the page*/
  top: 10px;
  color: #eaeaea;
  background-color: #373737;
  border: 1px dashed #ccc;
  padding: 10px;
  font-weight: bold;
  }
  

More CSS3 Demos This Way