Skip to content

Instantly share code, notes, and snippets.

@jeremypage

jeremypage/skip-to-content.md

Created July 21, 2020 14:41
Show Gist options
  • Save jeremypage/6eae8c785f470038134b60bc84a82f29 to your computer and use it in GitHub Desktop.
Save jeremypage/6eae8c785f470038134b60bc84a82f29 to your computer and use it in GitHub Desktop.
Download ZIP
HTML/CSS: Skip to content link
Raw
skip-to-content.md 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Skip to content</title>
	<style>
		#skiptocontent a {
			padding: 6px;
			position: absolute;
			top: -40px;
			left: 0px;
			color: white;
			border-right: 1px solid white;
			border-bottom: 1px solid white;
			border-bottom-right-radius: 8px;
			background: #BF1722;
			-webkit-transition: top 1s ease-out;
			transition: top 1s ease-out;
			z-index: 100;
		}

		#skiptocontent a:focus {
			position: absolute;
			left: 0px;
			top: 0px;
			outline-color: transparent;
			-webkit-transition: top .1s ease-in;
			transition: top .1s ease-in;
		}
	</style>
</head>
<body>
	<div id="skiptocontent"><a href="#main-article">skip to main content</a></div>
	<article id="main-article" role="main">
		<h1>Skip to content</h1>
		<p>Skip to content</p>
	</article>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment