Skip to content

Instantly share code, notes, and snippets.

@nfreear

nfreear/navbar-toggle.css.html

Created July 22, 2021 18:23
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save nfreear/9c35ec031e3883fa6c3da6f0675f97ca to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save nfreear/9c35ec031e3883fa6c3da6f0675f97ca to your computer and use it in GitHub Desktop.
Download ZIP
Nav-bar toggler / hamburger button :~ uses <hr> !
Raw
navbar-toggle.css.html
<!doctype html> <title> Hamburger button </title>
<style>
:root {
--toggler-bg-color: #D5FFFF;
--toggler-hover-color: #B5D9D9;
--toggler-color: #32A8A8;
--toggler-size: 3rem;
}
body { margin: 1rem auto; max-width: 32rem; }
.navbar-toggler {
background-color: var(--toggler-bg-color);
border: 1px solid var(--toggler-color);
border-radius: .25rem;
cursor: pointer;
height: var(--toggler-size);
width: var(--toggler-size);
padding: 0 .4rem calc(var(--toggler-size) / 10);
}
.navbar-toggler hr {
border-top: 2px solid var(--toggler-color);
margin: 0;
padding: 0;
margin-top: calc(var(--toggler-size) / 6); /* Was: .5rem; >> 8px */
}
.navbar-toggler:focus,
.navbar-toggler:hover {
background-color: var(--toggler-hover-color);
transition: all 1s;
}
</style>
<h1> Nav-bar toggler / hamburger button </h1>
<button title="Toggle navigation" class="navbar-toggler">
<hr><hr><hr>
</button>
<script>
document.querySelector('.navbar-toggler').onclick = async (ev) => {
console.debug('Click:', ev);
await Promise.resolve();
alert(`Click: "${ev.target.title}"`);
// Or: Promise.resolve().then(() => alert(`Click: "${ev.target.title}"`));
}
</script>
<pre>
NDF, 22-July-2021.
* https://getbootstrap.com/docs/5.0/components/navbar/
</pre>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment