Last active
April 28, 2020 12:27
-
-
Save HarryAdney/0f7a6a7c9e03821c2a831ef4170ce76b to your computer and use it in GitHub Desktop.
Accessible, css only navbar
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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>© Steph's Sweet Shoppe</p> | |
</footer> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* { | |
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; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$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