Animated Skip Nav

Developer
Size
3,400 Kb
Views
16,192

How do I make an animated skip nav?

Based on http://webaim.org/techniques/skipnav/ and code from http://www.bignerdranch.com/blog/web-accessibility-skip-navigation-links/. What is a animated skip nav? How do you make a animated skip nav? This script and codes were developed by Marty Powell on 15 September 2022, Thursday.

Animated Skip Nav Previews

Animated Skip Nav - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animated Skip Nav</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="skiptocontent" class="skip-nav"> <a href="#main-content" class="skip">skip to main content</a>
</div>
<header> <h1 id="top">Animated Skip Navigation</h1> <p>Focus on the body of this pen and hit the <strong>tab</strong> button on your keyboard to see this work.</p>
</header>
<nav class="main-nav"> <ul> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li><li><a href="#">Item</a></li><li><a href="#">Item</a></li><li><a href="#">Item</a></li><li><a href="#">Item</a></li><li><a href="#">Item</a></li><li><a href="#">Item</a></li><li><a href="#">Item</a></li><li><a href="#">Item</a></li><li><a href="#">Item</a></li><li><a href="#">Item</a></li><li><a href="#">Item</a></li> </ul>
</nav>
<section id="main-content" class="main-content"> <h2>Main Content</h2> <p>Bacon ipsum dolor amet biltong sirloin pork loin, rump brisket andouille short loin pig prosciutto meatloaf bresaola ham filet mignon venison hamburger. Boudin meatloaf cupim, capicola kevin hamburger doner short loin. Sausage jerky pancetta pork. Biltong rump tenderloin kielbasa chuck. Sausage salami tenderloin tongue tail turkey short loin shankle ribeye short ribs pork loin brisket. Drumstick pork belly boudin spare ribs short loin turkey ribeye alcatra fatback corned beef capicola pig.</p><p>Bacon ipsum dolor amet biltong sirloin pork loin, rump brisket andouille short loin pig prosciutto meatloaf bresaola ham filet mignon venison hamburger. Boudin meatloaf cupim, capicola kevin hamburger doner short loin. Sausage jerky pancetta pork. Biltong rump tenderloin kielbasa chuck. Sausage salami tenderloin tongue tail turkey short loin shankle ribeye short ribs pork loin brisket. Drumstick pork belly boudin spare ribs short loin turkey ribeye alcatra fatback corned beef capicola pig.</p><p>Bacon ipsum dolor amet biltong sirloin pork loin, rump brisket andouille short loin pig prosciutto meatloaf bresaola ham filet mignon venison hamburger. Boudin meatloaf cupim, capicola kevin hamburger doner short loin. Sausage jerky pancetta pork. Biltong rump tenderloin kielbasa chuck. Sausage salami tenderloin tongue tail turkey short loin shankle ribeye short ribs pork loin brisket. Drumstick pork belly boudin spare ribs short loin turkey ribeye alcatra fatback corned beef capicola pig.</p><p>Bacon ipsum dolor amet biltong sirloin pork loin, rump brisket andouille short loin pig prosciutto meatloaf bresaola ham filet mignon venison hamburger. Boudin meatloaf cupim, capicola kevin hamburger doner short loin. Sausage jerky pancetta pork. Biltong rump tenderloin kielbasa chuck. Sausage salami tenderloin tongue tail turkey short loin shankle ribeye short ribs pork loin brisket. Drumstick pork belly boudin spare ribs short loin turkey ribeye alcatra fatback corned beef capicola pig.</p><p>Bacon ipsum dolor amet biltong sirloin pork loin, rump brisket andouille short loin pig prosciutto meatloaf bresaola ham filet mignon venison hamburger. Boudin meatloaf cupim, capicola kevin hamburger doner short loin. Sausage jerky pancetta pork. Biltong rump tenderloin kielbasa chuck. Sausage salami tenderloin tongue tail turkey short loin shankle ribeye short ribs pork loin brisket. Drumstick pork belly boudin spare ribs short loin turkey ribeye alcatra fatback corned beef capicola pig.</p><p>Bacon ipsum dolor amet biltong sirloin pork loin, rump brisket andouille short loin pig prosciutto meatloaf bresaola ham filet mignon venison hamburger. Boudin meatloaf cupim, capicola kevin hamburger doner short loin. Sausage jerky pancetta pork. Biltong rump tenderloin kielbasa chuck. Sausage salami tenderloin tongue tail turkey short loin shankle ribeye short ribs pork loin brisket. Drumstick pork belly boudin spare ribs short loin turkey ribeye alcatra fatback corned beef capicola pig.</p> <a href="#top">Back to Top</a>
</section> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Animated Skip Nav - Script Codes CSS Codes

.skip { background: green; border: 1px solid darkgreen; padding: 10px; color: white; position: absolute; top: -1000px; left: -1000px; height: 1px; width: 1px; text-align: left; overflow: hidden;
}
a.skip:active,
a.skip:focus,
a.skip:hover { left: 0; top: 0; width: auto; height: auto; overflow: visible; transition: top .25s linear;
}
/*Make this page look respectable*/
.main-content { padding: 20px 0;
}
.main-nav { background: lightgray; border: 1px solid gray; font-size: 22px;
}
* { box-sizing: border-box;
}
body { font-family: san-serif; margin: 20px auto; max-width: 800px; width: 100%;
}
p { font-family: georgia; font-size: 18px; line-height: 30px;
}

Animated Skip Nav - Script Codes JS Codes

$( document ).ready(function() { // bind a click event to the 'skip' link $(".skip").click(function(event){ // strip the leading hash and declare // the content we're skipping to var skipTo="#"+this.href.split('#')[1]; // Setting 'tabindex' to -1 takes an element out of normal // tab flow but allows it to be focused via javascript $(skipTo).attr('tabindex', -1).on('blur focusout', function () { // when focus leaves this element, // remove the tabindex attribute $(this).removeAttr('tabindex'); }).focus(); // focus on the content container }); });
Animated Skip Nav - Script Codes
Animated Skip Nav - Script Codes
Home Page Home
Developer Marty Powell
Username martypowell
Uploaded September 15, 2022
Rating 3
Size 3,400 Kb
Views 16,192
Do you need developer help for Animated Skip Nav?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Marty Powell (martypowell) Script Codes
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!