Skip to content

Instantly share code, notes, and snippets.

@HarryAdney

HarryAdney/index.html

Last active April 28, 2020 12:27
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save HarryAdney/0f7a6a7c9e03821c2a831ef4170ce76b to your computer and use it in GitHub Desktop.
Save HarryAdney/0f7a6a7c9e03821c2a831ef4170ce76b to your computer and use it in GitHub Desktop.
Download ZIP
Accessible, css only navbar
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Accessible, css only navbar</title>
</head>
<body tabindex="-1">
<header>
<h1>Steph's Sweet Shoppe</h1>
</header>
<nav aria-label="Main Navigation">
<ul>
<li><a href="#">About</a></li>
<li class="dropdown"><span tabindex="-1" class="dropdown__title" id="dropdown-title">Sweets</span>
<ul class="dropdown__menu" aria-labelledby="dropdown-title">
<li><a href="#">Donuts</a></li>
<li><a href="#">Cupcakes</a></li>
<li><a href="#">Chocolate</a></li>
<li><a href="#">Bonbons</a></li>
</ul>
</li>
<li><a href="#">Order</a></li>
</ul>
</nav>
<main>
<p>Marzipan soufflé cotton candy tart sweet bonbon. Macaroon fruitcake pie gummies gummi bears biscuit dragée. Topping icing marshmallow. Soufflé gummies dessert jelly dessert liquorice.</p>
<p>Marzipan soufflé cotton candy tart sweet bonbon. Macaroon fruitcake pie gummies gummi bears biscuit dragée. Topping icing marshmallow. Soufflé gummies dessert jelly dessert liquorice.</p>
<p>Marzipan soufflé cotton candy tart sweet bonbon. Macaroon fruitcake pie gummies gummi bears biscuit dragée. Topping icing marshmallow. Soufflé gummies dessert jelly dessert liquorice.</p>
<p>Marzipan soufflé cotton candy tart sweet bonbon. Macaroon fruitcake pie gummies gummi bears biscuit dragée. Topping icing marshmallow. Soufflé gummies dessert jelly dessert liquorice.</p>
<p>Marzipan soufflé cotton candy tart sweet bonbon. Macaroon fruitcake pie gummies gummi bears biscuit dragée. Topping icing marshmallow. Soufflé gummies dessert jelly dessert liquorice.</p>
<p>Marzipan soufflé cotton candy tart sweet bonbon. Macaroon fruitcake pie gummies gummi bears biscuit dragée. Topping icing marshmallow. Soufflé gummies dessert jelly dessert liquorice.</p>
<p>Marzipan soufflé cotton candy tart sweet bonbon. Macaroon fruitcake pie gummies gummi bears biscuit dragée. Topping icing marshmallow. Soufflé gummies dessert jelly dessert liquorice.</p>
<p>Marzipan soufflé cotton candy tart sweet bonbon. Macaroon fruitcake pie gummies gummi bears biscuit dragée. Topping icing marshmallow. Soufflé gummies dessert jelly dessert liquorice.</p>
<p>Marzipan soufflé cotton candy tart sweet bonbon. Macaroon fruitcake pie gummies gummi bears biscuit dragée. Topping icing marshmallow. Soufflé gummies dessert jelly dessert liquorice.</p>
<p>Marzipan soufflé cotton candy tart sweet bonbon. Macaroon fruitcake pie gummies gummi bears biscuit dragée. Topping icing marshmallow. Soufflé gummies dessert jelly dessert liquorice.</p>
<p>Marzipan soufflé cotton candy tart sweet bonbon. Macaroon fruitcake pie gummies gummi bears biscuit dragée. Topping icing marshmallow. Soufflé gummies dessert jelly dessert liquorice.</p>
<p>Marzipan soufflé cotton candy tart sweet bonbon. Macaroon fruitcake pie gummies gummi bears biscuit dragée. Topping icing marshmallow. Soufflé gummies dessert jelly dessert liquorice.</p>
<p>Marzipan soufflé cotton candy tart sweet bonbon. Macaroon fruitcake pie gummies gummi bears biscuit dragée. Topping icing marshmallow. Soufflé gummies dessert jelly dessert liquorice.</p>
</main>
<footer>
<p>&copy; Steph's Sweet Shoppe</p>
</footer>
</body>
</html>
Raw
style.css
* {
box-sizing: border-box;
}
nav {
background-color: rebeccapurple;
padding: 0 1rem;
position: sticky;
top: 0;
display: grid;
place-items: center;
}
nav > ul {
grid-auto-flow: column;
}
nav > ul > li {
margin: 0 0.5rem;
}
nav > ul > li a, nav > ul > li .dropdown__title {
text-decoration: none;
text-align: center;
display: inline-block;
color: #fff;
font-size: 1.125rem;
}
nav > ul > li a:focus, nav > ul > li .dropdown__title:focus {
outline: none;
}
nav > ul > li > a, nav > ul > li .dropdown__title {
padding: 1rem 0.5rem;
border-top: 3px solid transparent;
transition: 280ms all 120ms ease-out;
}
nav > ul > li > a:hover, nav > ul > li .dropdown__title:hover, nav > ul > li > a:focus, nav > ul > li .dropdown__title:focus {
border-top-color: pink;
color: pink;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: grid;
}
nav ul li {
padding: 0;
}
.dropdown {
position: relative;
}
.dropdown .dropdown__title {
display: inline-flex;
align-items: center;
pointer-events: none;
}
.dropdown .dropdown__title:after {
content: "";
border: 0.35rem solid transparent;
border-top-color: rgba(255, 255, 255, 0.45);
margin-left: 0.25em;
transform: translateY(0.15em);
}
.dropdown .dropdown__menu {
position: absolute;
min-width: 15ch;
left: 50%;
top: calc(100% - 0.25rem);
transition: 280ms all 120ms ease-out;
transform: rotateX(-90deg) translateX(-50%);
transform-origin: top center;
opacity: 0.3;
padding: 0.5em 0;
background-color: #fff;
border-radius: 4px;
box-shadow: 0 0.15em 0.25em rgba(0, 0, 0, 0.25);
}
.dropdown .dropdown__menu a {
color: #47246b;
display: block;
padding: 0.5em;
opacity: 0;
transition: 280ms all 120ms ease-out;
}
.dropdown .dropdown__menu a:hover {
background-color: rgba(102, 51, 153, 0.15);
}
.dropdown .dropdown__menu a:focus {
outline: none;
background-color: rgba(102, 51, 153, 0.25);
}
.dropdown:after {
content: "";
border: 0.5rem solid transparent;
border-bottom-color: #fff;
position: absolute;
top: calc(100% - 1.25rem);
left: 50%;
transform: translateX(-50%);
transition: 280ms all 120ms ease-out;
opacity: 0;
will-change: opacity;
}
.dropdown:hover .dropdown__title, .dropdown:focus-within .dropdown__title {
border-top-color: pink;
}
.dropdown:hover .dropdown__menu, .dropdown:focus-within .dropdown__menu {
opacity: 1;
transform: rotateX(0) translateX(-50%);
}
.dropdown:hover .dropdown__menu a, .dropdown:focus-within .dropdown__menu a {
opacity: 1;
}
.dropdown:hover:after, .dropdown:focus-within:after {
opacity: 1;
}
body {
font-family: "Baloo 2", sans-serif;
min-height: 100vh;
display: grid;
grid-template-rows: auto 1fr auto;
}
header, footer {
display: grid;
place-items: center;
}
header {
background-image: url(https://images.unsplash.com/photo-1582232655383-0826ba4f1347?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=800&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ);
background-size: cover;
background-position: center bottom;
background-repeat: no-repeat;
box-shadow: inset 100vw 100vh rgba(102, 51, 153, 0.6);
min-height: 40vh;
color: #fff;
}
main {
padding: 1rem;
max-width: 80ch;
margin: 0 auto;
}
main:focus {
outline: none;
}
footer {
background-color: mintcream;
}
h1 {
font-size: 4rem;
text-align: center;
}
p {
font-size: 1.125rem;
line-height: 1.5;
}
Raw
style.scss
$color: rebeccapurple;
$color-dark: scale-color($color, $lightness: -30%);
$transition: 280ms all 120ms ease-out;
* {
box-sizing: border-box;
}
nav {
background-color: $color;
padding: 0 1rem;
position: sticky;
top: 0;
display: grid;
place-items: center;
> ul {
grid-auto-flow: column;
> li {
margin: 0 0.5rem;
a,
.dropdown__title {
text-decoration: none;
text-align: center;
display: inline-block;
color: #fff;
font-size: 1.125rem;
&:focus {
outline: none;
}
}
> a,
.dropdown__title {
padding: 1rem 0.5rem;
border-top: 3px solid transparent;
transition: $transition;
&:hover,
&:focus {
border-top-color: pink;
color: pink;
}
}
}
}
ul {
list-style: none;
margin: 0;
padding: 0;
display: grid;
li {
padding: 0;
}
}
}
.dropdown {
position: relative;
.dropdown__title {
display: inline-flex;
align-items: center;
pointer-events: none;
&:after {
content: "";
border: 0.35rem solid transparent;
border-top-color: rgba(#fff, 0.45);
margin-left: 0.25em;
transform: translateY(0.15em);
}
}
.dropdown__menu {
position: absolute;
min-width: 15ch;
left: 50%;
top: calc(100% - 0.25rem);
transition: $transition;
transform: rotateX(-90deg) translateX(-50%);
transform-origin: top center;
opacity: 0.3;
padding: 0.5em 0;
background-color: #fff;
border-radius: 4px;
box-shadow: 0 0.15em 0.25em rgba(black, 0.25);
a {
color: $color-dark;
display: block;
padding: 0.5em;
opacity: 0;
transition: $transition;
&:hover {
background-color: rgba($color, 0.15);
}
&:focus {
outline: none;
background-color: rgba($color, 0.25);
}
}
}
&:after {
content: "";
border: 0.5rem solid transparent;
border-bottom-color: #fff;
position: absolute;
top: calc(100% - 1.25rem);
left: 50%;
transform: translateX(-50%);
transition: $transition;
opacity: 0;
will-change: opacity;
}
&:hover,
&:focus-within {
.dropdown__title {
border-top-color: pink;
}
.dropdown__menu {
opacity: 1;
transform: rotateX(0) translateX(-50%);
a {
opacity: 1;
}
}
&:after {
opacity: 1;
}
}
}
body {
font-family: "Baloo 2", sans-serif;
min-height: 100vh;
display: grid;
grid-template-rows: auto 1fr auto;
}
header,
footer {
display: grid;
place-items: center;
}
header {
background-image: url(https://images.unsplash.com/photo-1582232655383-0826ba4f1347?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=800&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ);
background-size: cover;
background-position: center bottom;
background-repeat: no-repeat;
box-shadow: inset 100vw 100vh rgba($color, 0.6);
min-height: 40vh;
color: #fff;
}
main {
padding: 1rem;
max-width: 80ch;
margin: 0 auto;
&:focus {
outline: none;
}
}
footer {
background-color: mintcream;
}
h1 {
font-size: 4rem;
text-align: center;
}
p {
font-size: 1.125rem;
line-height: 1.5;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment