Animated page jump links with focus

Jump or skip links provide a useful shortcut for users who do not use a mouse but they're usually hidden, even when focused...

by Umar

HTML

<ul id="jump-links" aria-label="Page quick links">
    <li>
        <a href="#site-navigation">Jump to site navigation</a>
    </li>
    <li>
        <a href="#site-content">Jump to the content</a>
    </li>
    <li>
        <a href="#site-footer">Jump to the footer</a>
    </li>
</ul>

Use the tab key to focus on the hidden links.

CSS

body {
    font: normal 16px/1.5 Arial, sans-serif;
}

#jump-links {
    position: absolute;
    right: 100%;
    width: 14em;
}

#jump-links a {
    position: relative;
    display: block;
    padding: .25em .5em;
    text-align: right;
    color: #FFF;
    background: rgba(0, 0, 0, .85);
    transition: left 1s;
}

#jump-links a:focus {
    left: 100%;
}