Skip to content

Instantly share code, notes, and snippets.

@joyheron

joyheron/index.html

Created November 12, 2019 21:16
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save joyheron/db0b05d8e0bea9a7d189a23cb3729603 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save joyheron/db0b05d8e0bea9a7d189a23cb3729603 to your computer and use it in GitHub Desktop.
Download ZIP
Responsive Navigation optimized for Mobile
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Responsive Nav</title>
<style>
:root {
--space-xs: 0.25rem;
--space-sm: 0.5rem;
--space-md: 0.75rem;
--space-lg: 1.25rem;
--space-xl: 2rem;
--space-xxl: 3.25rem;
--pink-100: #FFF5F7;
--pink-200: #FED7E2;
--pink-300: #FBB6CE;
--pink-600: #D53F8C;
--gray-300: #E2E8F0;
--gray-900: #1A202C;
--black: #000;
/* Use to calculate body padding for non JavaScript menu */
--number-of-nav-rows: 2;
--navbar-height: 4.5rem;
}
/* CSS Reset */
* {
margin: 0;
padding: 0;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-size: 18px;
}
li {
list-style-type: none;
}
a {
text-decoration: none;
}
button {
border: 0;
background-color: transparent;
}
button:focus {
outline: 2px solid var(--pink-600);
outline-offset: -2px;
}
.icon, .fa-primary {
color: var(--pink-300);
}
.fa-secondary {
color: var(--black);
}
.icon {
min-height: 1rem;
min-width: 1rem;
max-width: 2rem;
max-height: 2rem;
}
.nav {
width: 100%;
display: flex;
align-items: center;
background-color: white;
}
.nav-item {
padding: var(--space-sm);
padding-bottom: var(--space-xs);
display: flex;
align-items: center;
justify-content: center;
flex-grow: 1;
flex-wrap: wrap;
color: var(--gray-900);
border-color: transparent;
border-style: solid;
border-width: 0;
border-bottom-width: var(--space-xs);
}
.nav-item[aria-describedby=current] {
border-color: var(--pink-200);
}
.nav-item:hover {
background-color: var(--pink-100);
border-color: var(--pink-300);
}
.nav-item > * {
margin: 0 var(--space-xs);
}
.svg-definitions {
display: none;
}
/* For Phones */
@media (max-width: 599px) {
body {
padding-bottom: calc(var(--number-of-nav-rows) * var(--navbar-height));
}
body.js {
padding-bottom: var(--navbar-height);
}
.nav {
position: fixed;
bottom: 0;
border-top: 1px solid var(--gray-300);
flex-wrap: wrap;
}
.nav li {
flex-grow: 1;
}
.nav-item {
flex-direction: column;
}
/*
Only blend in menu if there are more than 3 Navigation items
This works because the rule only is activated when there are
4 navigation items + 1 toggle item = 5 total items
*/
.js .nav :nth-last-child(n+5) ~ .menu-toggle {
display: flex;
}
/*
Hide all except the first three children in the collapsed
menu
*/
.nav.collapsed li:nth-child(3) ~ :not(.menu-toggle) {
display: none;
}
.nav.expanded {
flex-direction: column;
}
.nav.expanded li {
width: 100%;
}
.nav.expanded .nav-item {
flex-direction: row;
flex-basis: 100%;
box-sizing: border-box;
padding-bottom: var(--space-sm);
padding-left: 0;
border-bottom: 0;
border-left-width: var(--space-sm);
}
.expanded--visible, .expanded--hidden {
display: none;
}
[aria-expanded=false] .expanded--hidden {
display: flex;
}
[aria-expanded=true] .expanded--visible {
display: flex;
}
}
/* For Tablets & Up */
@media (min-width: 600px) {
.nav {
border-bottom: 1px solid var(--gray-300);
}
}
</style>
</head>
<body>
<nav>
<ul class="nav" is="nav-bar">
<li>
<a class="nav-item" href="#home">
<svg class="icon"><use href="#fa-home-heart"></use></svg>
Home
</a>
</li>
<li>
<a class="nav-item" href="#about" aria-describedby="current">
<svg class="icon"><use href="#fa-star-exclamation"></use></svg>
About
</a>
</li>
<li>
<a class="nav-item" href="#music">
<svg class="icon"><use href="#fa-cloud-music"></use></svg>
Music
</a>
</li>
<li>
<a class="nav-item" href="#contact">
<svg class="icon"><use href="#fa-comment-smile"></use></svg>
Contact
</a>
</li>
<li>
<a class="nav-item"href="#cat">
<svg class="icon"><use href="#fa-cat"></use></svg>
Cat
</a>
</li>
<li>
<a class="nav-item" href="#alerts">
<svg class="icon"><use href="#fa-bell-exclamation"></use></svg>
Notifications
</a>
</li>
<li class="menu-toggle" hidden>
<button class="nav-item" aria-expanded="false">
<svg class="icon">
<use class="expanded--visible" href="#fa-times"></use>
<use class="expanded--hidden" href="#fa-bars"></use>
</svg>
<span class="expanded--visible">Close Menu</span>
<span class="expanded--hidden">Menu</span>
</button>
</li>
</ul>
<div hidden id="current">
Current page
</div>
</nav>
<main>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Velit laoreet id donec ultrices tincidunt arcu. Integer feugiat scelerisque varius morbi enim nunc faucibus. Amet tellus cras adipiscing enim eu. Fringilla est ullamcorper eget nulla. Elit duis tristique sollicitudin nibh. Amet mauris commodo quis imperdiet massa tincidunt nunc pulvinar sapien. Fringilla urna porttitor rhoncus dolor. Magna sit amet purus gravida. Commodo odio aenean sed adipiscing diam donec adipiscing tristique risus. Diam quis enim lobortis scelerisque. Phasellus faucibus scelerisque eleifend donec pretium. Commodo viverra maecenas accumsan lacus vel facilisis volutpat est. Nibh tortor id aliquet lectus proin nibh.
Morbi tincidunt augue interdum velit euismod. Vulputate eu scelerisque felis imperdiet. Semper quis lectus nulla at volutpat diam ut venenatis. Dolor purus non enim praesent elementum facilisis leo vel fringilla. Justo laoreet sit amet cursus sit amet dictum sit. Eu nisl nunc mi ipsum faucibus vitae aliquet nec. Suspendisse ultrices gravida dictum fusce ut placerat. Eu scelerisque felis imperdiet proin fermentum leo vel. Hendrerit dolor magna eget est lorem ipsum dolor sit. Vitae elementum curabitur vitae nunc sed velit dignissim. Elit scelerisque mauris pellentesque pulvinar pellentesque habitant morbi. Lacus sed turpis tincidunt id aliquet risus feugiat in. Congue eu consequat ac felis donec. Blandit massa enim nec dui nunc mattis. Leo urna molestie at elementum. Aenean sed adipiscing diam donec adipiscing. Mauris augue neque gravida in fermentum et sollicitudin ac.
Egestas integer eget aliquet nibh. Nisi quis eleifend quam adipiscing vitae proin sagittis nisl. Lorem ipsum dolor sit amet consectetur adipiscing elit pellentesque habitant. Adipiscing commodo elit at imperdiet dui accumsan. Faucibus purus in massa tempor nec feugiat. Augue mauris augue neque gravida in fermentum et sollicitudin. Quis ipsum suspendisse ultrices gravida dictum fusce ut placerat orci. Dictum sit amet justo donec enim diam vulputate ut pharetra. Vitae elementum curabitur vitae nunc sed velit. In ante metus dictum at tempor commodo ullamcorper a. Est placerat in egestas erat. Viverra accumsan in nisl nisi scelerisque eu ultrices. In nulla posuere sollicitudin aliquam ultrices sagittis orci a scelerisque.
Eu non diam phasellus vestibulum. Aliquet risus feugiat in ante metus dictum. At tempor commodo ullamcorper a lacus vestibulum sed arcu non. Nisi vitae suscipit tellus mauris a. Quis eleifend quam adipiscing vitae proin sagittis nisl rhoncus. Nibh sed pulvinar proin gravida hendrerit. Feugiat in ante metus dictum at tempor. Nisi scelerisque eu ultrices vitae auctor eu augue. Donec adipiscing tristique risus nec. Quam vulputate dignissim suspendisse in est. Risus quis varius quam quisque id diam vel. Vulputate ut pharetra sit amet aliquam id diam maecenas ultricies. Vitae congue mauris rhoncus aenean vel elit scelerisque mauris. Libero volutpat sed cras ornare arcu dui vivamus arcu felis. Mi sit amet mauris commodo quis imperdiet massa. Lacus suspendisse faucibus interdum posuere lorem. Vulputate dignissim suspendisse in est ante in nibh mauris. Lacus sed viverra tellus in hac habitasse platea.
Ac odio tempor orci dapibus ultrices in iaculis. Quis vel eros donec ac odio tempor. Ligula ullamcorper malesuada proin libero nunc consequat. Cursus turpis massa tincidunt dui ut ornare lectus sit amet. Tempor orci eu lobortis elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames ac. At imperdiet dui accumsan sit amet nulla. Condimentum lacinia quis vel eros donec. Sed cras ornare arcu dui vivamus arcu felis bibendum. Tortor dignissim convallis aenean et. Arcu cursus euismod quis viverra nibh cras pulvinar mattis. Aliquet nec ullamcorper sit amet risus. Amet facilisis magna etiam tempor orci eu lobortis. Tristique risus nec feugiat in fermentum posuere urna nec tincidunt. Elementum pulvinar etiam non quam. Lectus mauris ultrices eros in cursus. Ut enim blandit volutpat maecenas volutpat blandit. Egestas integer eget aliquet nibh praesent tristique magna.
Nibh venenatis cras sed felis eget velit aliquet sagittis id. Pretium vulputate sapien nec sagittis aliquam. Non pulvinar neque laoreet suspendisse interdum consectetur. Enim tortor at auctor urna nunc id cursus. Duis ultricies lacus sed turpis tincidunt id aliquet risus feugiat. Laoreet sit amet cursus sit amet dictum sit. Platea dictumst quisque sagittis purus sit amet volutpat consequat mauris. Turpis egestas maecenas pharetra convallis posuere morbi. Placerat orci nulla pellentesque dignissim enim sit amet. Vel turpis nunc eget lorem dolor. Egestas congue quisque egestas diam in arcu cursus euismod. Maecenas accumsan lacus vel facilisis volutpat est. Vitae suscipit tellus mauris a diam maecenas sed. Risus sed vulputate odio ut enim blandit volutpat maecenas volutpat. Pharetra magna ac placerat vestibulum lectus mauris ultrices. Adipiscing elit ut aliquam purus. Purus sit amet volutpat consequat mauris nunc congue nisi. Aliquam etiam erat velit scelerisque in dictum non. Sit amet commodo nulla facilisi nullam vehicula ipsum a arcu.
Volutpat ac tincidunt vitae semper quis lectus nulla at volutpat. Suscipit tellus mauris a diam maecenas. Justo eget magna fermentum iaculis. In dictum non consectetur a erat. Diam quam nulla porttitor massa id neque. Massa eget egestas purus viverra accumsan in nisl nisi scelerisque. Vitae sapien pellentesque habitant morbi tristique. Dignissim suspendisse in est ante. Nulla facilisi nullam vehicula ipsum. Montes nascetur ridiculus mus mauris vitae ultricies leo. Cras pulvinar mattis nunc sed blandit libero volutpat sed. Rhoncus mattis rhoncus urna neque viverra justo nec. Vitae purus faucibus ornare suspendisse sed. Volutpat est velit egestas dui id ornare. Nullam non nisi est sit amet. Ipsum faucibus vitae aliquet nec ullamcorper. Elementum eu facilisis sed odio morbi. Lobortis feugiat vivamus at augue eget arcu dictum varius. Rhoncus mattis rhoncus urna neque viverra justo.
Vel turpis nunc eget lorem dolor sed. Id faucibus nisl tincidunt eget. Ac odio tempor orci dapibus ultrices in iaculis nunc sed. Eleifend mi in nulla posuere sollicitudin. Ultrices eros in cursus turpis massa tincidunt dui. Bibendum est ultricies integer quis auctor elit sed vulputate mi. Luctus accumsan tortor posuere ac ut consequat semper. Maecenas pharetra convallis posuere morbi leo urna molestie at. Nisl nisi scelerisque eu ultrices vitae auctor eu augue. Libero id faucibus nisl tincidunt. Leo a diam sollicitudin tempor id eu nisl nunc. Vestibulum lectus mauris ultrices eros. Accumsan sit amet nulla facilisi morbi tempus iaculis urna id. Ut consequat semper viverra nam. Fusce id velit ut tortor pretium viverra suspendisse. Sed blandit libero volutpat sed cras ornare arcu. Amet tellus cras adipiscing enim. Quisque id diam vel quam elementum pulvinar. Non enim praesent elementum facilisis leo vel. Eget egestas purus viverra accumsan in.
Porttitor eget dolor morbi non arcu risus quis varius quam. In ante metus dictum at. Vel risus commodo viverra maecenas accumsan lacus vel facilisis volutpat. Sit amet consectetur adipiscing elit. Mi proin sed libero enim. In nibh mauris cursus mattis molestie. Nibh tortor id aliquet lectus proin nibh nisl. Pretium fusce id velit ut tortor pretium viverra suspendisse. Vel facilisis volutpat est velit egestas dui id. Ac tincidunt vitae semper quis. Massa enim nec dui nunc mattis enim.
Sit amet commodo nulla facilisi nullam vehicula. Amet consectetur adipiscing elit ut. Mattis molestie a iaculis at erat. Nibh tellus molestie nunc non blandit massa enim nec. Nulla porttitor massa id neque aliquam vestibulum. Id nibh tortor id aliquet. Sodales ut eu sem integer vitae justo eget. Nullam eget felis eget nunc lobortis mattis aliquam faucibus purus. Ipsum a arcu cursus vitae congue mauris. Integer vitae justo eget magna fermentum iaculis eu non diam. Vulputate ut pharetra sit amet aliquam id diam. Elit sed vulputate mi sit amet mauris commodo quis imperdiet. Consectetur adipiscing elit ut aliquam purus. Velit dignissim sodales ut eu sem integer vitae justo. Turpis egestas maecenas pharetra convallis posuere morbi leo urna.
</main>
<svg class="svg-definitions" hidden>
<defs>
<svg id="fa-bars" aria-hidden="true" focusable="false" data-prefix="fad" data-icon="bars" class="svg-inline--fa fa-bars fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><g class="fa-group"><path class="fa-secondary" fill="currentColor" d="M16 288h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16z" opacity="0.4"></path><path class="fa-primary" fill="currentColor" d="M432 384H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0-320H16A16 16 0 0 0 0 80v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16z"></path></g></svg>
<svg id="fa-bell-exclamation" aria-hidden="true" focusable="false" data-prefix="fad" data-icon="bell-exclamation" class="svg-inline--fa fa-bell-exclamation fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><g class="fa-group"><path class="fa-secondary" fill="currentColor" d="M439.39 362.29c-19.32-20.76-55.47-52-55.47-154.29 0-77.7-54.48-139.9-127.94-155.16V32a32 32 0 1 0-64 0v20.84C118.56 68.1 64.08 130.3 64.08 208c0 102.3-36.15 133.53-55.47 154.29A31.24 31.24 0 0 0 0 384c.11 16.4 13 32 32.1 32h383.8c19.12 0 32-15.6 32.1-32a31.23 31.23 0 0 0-8.61-21.71zM224 352a32 32 0 1 1 32-32 32 32 0 0 1-32 32zm38.2-206.4l-12.8 96a16 16 0 0 1-15.9 14.4h-19a16 16 0 0 1-15.9-14.4l-12.8-96a16.06 16.06 0 0 1 15.9-17.6h44.6a16 16 0 0 1 15.89 17.6z" opacity="0.4"></path><path class="fa-primary" fill="currentColor" d="M160 448a64 64 0 1 0 128 0zm64-160a32 32 0 1 0 32 32 32 32 0 0 0-32-32zm-9.5-32h19a16 16 0 0 0 15.9-14.4l12.8-96a16 16 0 0 0-15.9-17.6h-44.6a16.06 16.06 0 0 0-15.9 17.6l12.8 96a16 16 0 0 0 15.89 14.4z"></path></g></svg>
<svg id="fa-cat" aria-hidden="true" focusable="false" data-prefix="fad" data-icon="cat" class="svg-inline--fa fa-cat fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><g class="fa-group"><path class="fa-secondary" fill="currentColor" d="M448 96h-64l-64-64v134.4a96 96 0 0 0 192 0V32zm-72 80a16 16 0 1 1 16-16 16 16 0 0 1-16 16zm80 0a16 16 0 1 1 16-16 16 16 0 0 1-16 16zm-165.41 16a204.07 204.07 0 0 0-34.59 2.89V272l-43.15-64.73a183.93 183.93 0 0 0-44.37 26.17L192 304l-60.94-30.47L128 272v-80a96.1 96.1 0 0 0-96-96 32 32 0 0 0 0 64 32 32 0 0 1 32 32v256a64.06 64.06 0 0 0 64 64h176a16 16 0 0 0 16-16v-16a32 32 0 0 0-32-32h-32l128-96v144a16 16 0 0 0 16 16h32a16 16 0 0 0 16-16V289.86a126.78 126.78 0 0 1-32 4.54c-61.81 0-113.52-44.05-125.41-102.4z" opacity="0.4"></path><path class="fa-primary" fill="currentColor" d="M376 144a16 16 0 1 0 16 16 16 16 0 0 0-16-16zm80 0a16 16 0 1 0 16 16 16 16 0 0 0-16-16zM131.06 273.53L192 304l-23.52-70.56a192.06 192.06 0 0 0-37.42 40.09zM256 272v-77.11a198.62 198.62 0 0 0-43.15 12.38z"></path></g></svg>
<svg id="fa-cloud-music" aria-hidden="true" focusable="false" data-prefix="fad" data-icon="cloud-music" class="svg-inline--fa fa-cloud-music fa-w-20" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><g class="fa-group"><path class="fa-secondary" fill="currentColor" d="M537.59 226.59a96 96 0 0 0-142.9-114.39A160 160 0 0 0 96 192c0 2.7.09 5.41.19 8.09A144 144 0 0 0 144 480h368a128 128 0 0 0 25.59-253.41zM384 352c0 17.67-21.5 32-48 32s-48-14.33-48-32 21.5-32 48-32a69.82 69.82 0 0 1 16 2v-76.36l-96 37.52V384c0 17.67-21.5 32-48 32s-48-14.33-48-32 21.5-32 48-32a69.82 69.82 0 0 1 16 2V239.25A16 16 0 0 1 235.19 224l128-47.25A16 16 0 0 1 384 192z" opacity="0.4"></path><path class="fa-primary" fill="currentColor" d="M208 352a69.82 69.82 0 0 1 16 2V239.25A16 16 0 0 1 235.19 224l128-47.25A16 16 0 0 1 384 192v160c0 17.67-21.5 32-48 32s-48-14.33-48-32 21.5-32 48-32a69.82 69.82 0 0 1 16 2v-76.36l-96 37.52V384c0 17.67-21.5 32-48 32s-48-14.33-48-32 21.5-32 48-32z"></path></g></svg>
<svg id="fa-comment-smile" aria-hidden="true" focusable="false" data-prefix="fad" data-icon="comment-smile" class="svg-inline--fa fa-comment-smile fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><g class="fa-group"><path class="fa-secondary" fill="currentColor" d="M256 32C114.6 32 0 125.1 0 240c0 49.6 21.4 95 57 130.7C44.5 421.1 2.7 466 2.2 466.5a8 8 0 0 0-1.5 8.7A7.83 7.83 0 0 0 8 480c66.3 0 116-31.8 140.6-51.4A305 305 0 0 0 256 448c141.4 0 256-93.1 256-208S397.4 32 256 32zm64 133.2a26.8 26.8 0 1 1-26.8 26.8 26.8 26.8 0 0 1 26.8-26.8zm-128 0a26.8 26.8 0 1 1-26.8 26.8 26.8 26.8 0 0 1 26.8-26.8zm164.2 140.9a132.32 132.32 0 0 1-200.4 0 16 16 0 1 1 24.3-20.7 100.23 100.23 0 0 0 151.6-.1 16.07 16.07 0 0 1 24.5 20.8z" opacity="0.4"></path><path class="fa-primary" fill="currentColor" d="M320 218.8a26.8 26.8 0 1 0-26.8-26.8 26.8 26.8 0 0 0 26.8 26.8zm-128 0a26.8 26.8 0 1 0-26.8-26.8 26.8 26.8 0 0 0 26.8 26.8zm162.3 64.7a16.11 16.11 0 0 0-22.6 1.8 100.23 100.23 0 0 1-151.6.1 16 16 0 1 0-24.3 20.7 132.32 132.32 0 0 0 200.4 0 16 16 0 0 0-1.9-22.6z"></path></g></svg>
<svg id="fa-home-heart" aria-hidden="true" focusable="false" data-prefix="fad" data-icon="home-heart" class="svg-inline--fa fa-home-heart fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><g class="fa-group"><path class="fa-secondary" fill="currentColor" d="M64.11 311.38V496a16.05 16.05 0 0 0 16 16h416a16.05 16.05 0 0 0 16-16V311.38c-6.7-5.5-44.7-38.31-224-196.4-180.11 158.9-217.6 191.09-224 196.4zm314.1-26.31a60.6 60.6 0 0 1 4.5 89.11L298 459.77a13.94 13.94 0 0 1-19.8 0l-84.7-85.59a60.66 60.66 0 0 1 4.3-89.11c24-20 59.7-16.39 81.6 5.81l8.6 8.69 8.6-8.69c22.01-22.2 57.71-25.81 81.61-5.81z" opacity="0.4"></path><path class="fa-primary" fill="currentColor" d="M378.21 285.07c-23.9-20-59.6-16.39-81.6 5.81l-8.6 8.69-8.6-8.69c-21.9-22.2-57.6-25.81-81.6-5.81a60.66 60.66 0 0 0-4.3 89.11l84.7 85.59a13.94 13.94 0 0 0 19.8 0l84.7-85.59a60.6 60.6 0 0 0-4.5-89.11zm192.6-48.8l-58.7-51.79V48a16 16 0 0 0-16-16h-64a16 16 0 0 0-16 16v51.7l-101.3-89.43a40 40 0 0 0-53.5 0l-256 226a16 16 0 0 0-1.2 22.61l21.4 23.8a16 16 0 0 0 22.6 1.2l229.4-202.2a16.12 16.12 0 0 1 21.2 0L528 284a16 16 0 0 0 22.6-1.21L572 259a16.11 16.11 0 0 0-1.19-22.73z"></path></g></svg>
<svg id="fa-star-exclamation" aria-hidden="true" focusable="false" data-prefix="fad" data-icon="star-exclamation" class="svg-inline--fa fa-star-exclamation fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><g class="fa-group"><path class="fa-secondary" fill="currentColor" d="M528.55 171.5l-146.37-21.3-65.43-132.39c-11.72-23.7-45.68-23.8-57.5 0L193.82 150.2 47.45 171.4c-26.25 3.8-36.77 36.1-17.73 54.6l105.9 103-25.05 145.46c-4.51 26.1 23 46 46.49 33.7L288 439.57l130.94 68.69c23.35 12.3 51-7.5 46.49-33.7l-25.05-145.48 105.9-103c19-18.48 8.52-50.78-17.73-54.58zM288 392a40 40 0 1 1 40.07-40A40 40 0 0 1 288 392zm40.17-223.38l-8 112a8 8 0 0 1-8 7.4h-48.11a8 8 0 0 1-8-7.4l-8-112a8 8 0 0 1 7.39-8.58H320.19a8 8 0 0 1 8 8v.63z" opacity="0.4"></path><path class="fa-primary" fill="currentColor" d="M288 312a40 40 0 1 0 40.07 40A40 40 0 0 0 288 312zm32.16-152H256a8 8 0 0 0-8 8v.62l8 112a8 8 0 0 0 8 7.4h48.09a8 8 0 0 0 8-7.4l8-112a8 8 0 0 0-7.39-8.58z"></path></g></svg>
<svg id="fa-times" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="times" class="svg-inline--fa fa-times fa-w-11" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512"><path fill="currentColor" d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"></path></svg>
</defs>
</svg>
<script src="https://unpkg.com/@ungap/custom-elements-builtin@0.2.7/min.js"></script>
<script>
class Navbar extends HTMLUListElement {
connectedCallback () {
console.log("Navbar reporting for duty!")
this.setNavbarState(this.expanded)
this.collapser.addEventListener('click', () => {
this.setNavbarState(!this.expanded)
})
}
setNavbarState (expanded) {
if (expanded) {
this.classList.remove('collapsed')
this.classList.add('expanded')
this.collapser.setAttribute('aria-expanded', 'true')
} else {
this.classList.remove('expanded')
this.classList.add('collapsed')
this.collapser.setAttribute('aria-expanded', 'false')
}
}
get expanded () {
return this.collapser.getAttribute('aria-expanded') === 'true'
}
get collapser () {
return this.querySelector('.menu-toggle button')
}
}
customElements.define('nav-bar', Navbar, { extends: 'ul' })
document.querySelector('body').classList.add('js')
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment