<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<header id="navbar">
<nav class="navbar-container container">
<a href="/" class="home-link">
<div class="navbar-logo"></div>
Website Name
</a>
<button type="button" class="navbar-toggle" aria-label="Open navigation menu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-menu detached">
<ul class="navbar-links">
<li class="navbar-item"><a class="navbar-link" href="/about">About</a></li>
<li class="navbar-item"><a class="navbar-link" href="/blog">Blog</a></li>
<li class="navbar-item"><a class="navbar-link" href="/careers">Careers</a></li>
<li class="navbar-item"><a class="navbar-link" href="/contact">Contact</a></li>
</ul>
</div>
</nav>
</header>
<main>
<form id="options" class="container">
<label for="detached">Detached <input type="radio" checked name="navtype" id="detached" /></label>
<label for="attached">Attached <input type="radio" name="navtype" id="attached" /></label>
<label for="left-sidebar">Left sidebar <input type="radio" name="navtype" id="left-sidebar" /></label>
<label for="right-sidebar">Right sidebar <input type="radio" name="navtype" id="right-sidebar" /></label>
</form>
</main>
:root {
--navbar-bg-color: hsl(0, 0%, 15%);
--navbar-text-color: hsl(0, 0%, 85%);
--navbar-text-color-focus: white;
--navbar-bg-contrast: hsl(0, 0%, 25%);
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
height: 100vh;
font-family: Arial, Helvetica, sans-serif;
line-height: 1.6;
}
main {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.container {
max-width: 1000px;
padding-left: 1.4rem;
padding-right: 1.4rem;
margin-left: auto;
margin-right: auto;
}
#navbar {
--navbar-height: 64px;
position: fixed;
height: var(--navbar-height);
background-color: var(--navbar-bg-color);
left: 0;
right: 0;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
.navbar-container {
display: flex;
justify-content: space-between;
height: 100%;
align-items: center;
}
.home-link,
.navbar-link {
color: var(--navbar-text-color);
transition: color 0.2s ease-in-out;
text-decoration: none;
display: flex;
font-weight: 400;
align-items: center;
transition: background-color 0.2s ease-in-out,
color 0.2s ease-in-out;
}
.home-link:focus,
.home-link:hover {
color: var(--navbar-text-color-focus);
}
.navbar-link {
justify-content: center;
width: 100%;
padding: 0.4em 0.8em;
border-radius: 5px;
}
.navbar-link:focus,
.navbar-link:hover {
color: var(--navbar-text-color-focus);
background-color: var(--navbar-bg-contrast);
}
.navbar-logo {
background-color: var(--navbar-text-color-focus);
border-radius: 50%;
width: 30px;
height: 30px;
margin-right: 0.5em;
}
.navbar-toggle {
cursor: pointer;
border: none;
background-color: transparent;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.icon-bar {
display: block;
width: 25px;
height: 4px;
margin: 2px;
transition: background-color 0.2s ease-in-out,
transform 0.2s ease-in-out,
opacity 0.2s ease-in-out;
background-color: var(--navbar-text-color);
}
.navbar-toggle:focus .icon-bar,
.navbar-toggle:hover .icon-bar {
background-color: var(--navbar-text-color-focus);
}
#navbar.opened .navbar-toggle .icon-bar:first-child,
#navbar.opened .navbar-toggle .icon-bar:last-child {
position: absolute;
margin: 0;
width: 30px;
}
#navbar.opened .navbar-toggle .icon-bar:first-child {
transform: rotate(45deg);
}
#navbar.opened .navbar-toggle .icon-bar:nth-child(2) {
opacity: 0;
}
#navbar.opened .navbar-toggle .icon-bar:last-child {
transform: rotate(-45deg);
}
.navbar-menu {
position: fixed;
top: var(--navbar-height);
bottom: 0;
transition: opacity 0.2s ease-in-out,
visibility 0.2s ease-in-out,
left 0.2s ease-in-out,
right 0.2s ease-in-out;
opacity: 0;
visibility: hidden;
}
.navbar-menu.sidebar,
.navbar-menu.sidebar.left {
left: -1000px;
right: 0;
}
.navbar-menu.sidebar.right {
right: -1000px;
left: 0;
}
.navbar-menu.detached,
.navbar-menu.attached {
left: 0;
right: 0;
}
#navbar.opened .navbar-menu {
background-color: rgba(0, 0, 0, 0.4);
opacity: 1;
visibility: visible;
}
#navbar.opened .navbar-menu.sidebar.left {
left: 0;
}
#navbar.opened .navbar-menu.sidebar.right {
right: 0;
}
.navbar-links {
list-style-type: none;
max-height: 0;
overflow: hidden;
position: absolute;
background-color: var(--navbar-bg-color);
display: flex;
flex-direction: column;
align-items: center;
}
#navbar.opened .navbar-links {
padding: 1em;
max-height: none;
}
.sidebar .navbar-links {
top: 0;
bottom: 0;
}
.left.sidebar .navbar-links {
left: 0;
right: unset;
box-shadow: 5px 20px 20px rgba(0, 0, 0, 0.3);
}
.right.sidebar .navbar-links {
right: 0;
left: unset;
box-shadow: -5px 20px 20px rgba(0, 0, 0, 0.3);
}
.detached .navbar-links {
left: 0;
right: 0;
margin: 1.4rem;
border-radius: 5px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}
.attached .navbar-links {
left: 0;
right: 0;
box-shadow: 0 20px 20px rgba(0, 0, 0, 0.3);
}
.navbar-item {
margin: 0.4em;
width: 100%;
}
@media screen and (min-width: 700px) {
.navbar-toggle {
display: none;
}
#navbar .navbar-menu,
#navbar.opened .navbar-menu {
visibility: visible;
opacity: 1;
position: static;
display: block;
height: 100%;
}
#navbar .navbar-links,
#navbar.opened .navbar-links {
margin: 0;
padding: 0;
box-shadow: none;
position: static;
flex-direction: row;
list-style-type: none;
max-height: max-content;
width: 100%;
height: 100%;
}
#navbar .navbar-link:last-child {
margin-right: 0;
}
}
#options {
display: flex;
flex-direction: column;
}
const navbar = document.getElementById("navbar");
const navbarToggle = navbar.querySelector(".navbar-toggle");
function openMobileNavbar() {
navbar.classList.add("opened");
navbarToggle.setAttribute("aria-label", "Close navigation menu.");
}
function closeMobileNavbar() {
navbar.classList.remove("opened");
navbarToggle.setAttribute("aria-label", "Open navigation menu.");
}
navbarToggle.addEventListener("click", () => {
if (navbar.classList.contains("opened")) {
closeMobileNavbar();
} else {
openMobileNavbar();
}
});
const navbarMenu = navbar.querySelector(".navbar-menu");
const navbarLinksContainer = navbar.querySelector(".navbar-links");
navbarLinksContainer.addEventListener("click", (clickEvent) => {
clickEvent.stopPropagation();
});
navbarMenu.addEventListener("click", closeMobileNavbar);
document
.getElementById("options")
.querySelectorAll("input[name='navtype']")
.forEach((option) => {
option.addEventListener("change", (e) => {
const navType = e.target.id.split("-").join(" ");
navbarMenu.classList = "navbar-menu " + navType;
});
});
