Animated Skip Nav
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 - 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 }); });
Developer | Marty Powell |
Username | martypowell |
Uploaded | September 15, 2022 |
Rating | 3 |
Size | 3,400 Kb |
Views | 16,192 |
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!
Name | Size |
Randon Image Slider | 3,299 Kb |
Disclaimer | 3,679 Kb |
Donation Bar | 3,195 Kb |
Intranet User Profile | 1,948 Kb |
Ellipsis Animation | 1,904 Kb |
About Me | 2,146 Kb |
Logo | 2,057 Kb |
Slick Carousel Prototype | 12,677 Kb |
Search and Filter | 3,169 Kb |
CSS Animation Grayscale to Color Photo | 2,688 Kb |
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!
Name | Username | Size |
Midterm dry run | Jds317 | 1,649 Kb |
Sony Xperia Z3 Flat MockUp | Dapinitial | 4,379 Kb |
Improve | Gavra | 1,652 Kb |
Blog demo to use given styling | Andygirl | 2,412 Kb |
Social.svg.min | Larsenwork | 13,849 Kb |
A Pen by Anoop | Anoopjohn | 330,760 Kb |
CSS3 keyframe onload animation. | Samueljseay | 1,706 Kb |
Sequence.js - Sliding Horizontal Parallax | Maheshc | 4,537 Kb |
Personal Logo Animation | Lloydwheeler | 3,795 Kb |
Layout 11 | Altynai | 1,690 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!