Just another responsive navbar system that collapses items in a horizontal multi-level menu into a mobile-friendly sidebar navigation with dropdowns on the mobile.
1. Insert a multi-level navbar into your header. It uses box icons for the toggle and dropdown icons in this example.
<header class="header">
<a href="#" class="header__logo">Site Name</a>
<i class='bx bx-menu header__toggle' id="header-toggle"></i>
<nav class="nav" id="nav-menu">
<div class="nav__content bd-grid">
<a href="" class="nav__perfil">
<div class="nav__img">
Your Logo Here
</div>
<div>
CSS
Script
</div>
</a>
<div class="nav__menu">
<ul class="nav__list">
<li class="nav__item"><a href="#" class="nav__link active">Home</a></li>
<li class="nav__item dropdown">
<a href="#" class="nav__link dropdown__link">About <i class='bx bx-chevron-down dropdown__icon'></i></a>
<ul class="dropdown__menu">
<li class="dropdown__item"><a href="#" class="nav__link">About me</a></li>
<li class="dropdown__item"><a href="#" class="nav__link">Location</a></li>
<li class="dropdown__item"><a href="#" class="nav__link">Studies</a></li>
</ul>
</li>
<li class="nav__item"><a href="#" class="nav__link">Skills</a></li>
<li class="nav__item dropdown">
<a href="#" class="nav__link dropdown__link">Works <i class='bx bx-chevron-down dropdown__icon'></i></a>
<ul class="dropdown__menu">
<li class="dropdown__item"><a href="#" class="nav__link">Recent jobs</a></li>
<li class="dropdown__item"><a href="#" class="nav__link">Better jobs</a></li>
<li class="dropdown__item"><a href="#" class="nav__link">Work Awards</a></li>
</ul>
</li>
<li class="nav__item"><a href="#" class="nav__link">Contact</a></li>
</ul>
</div>
</div>
</nav>
</header>
2. The main CSS for the responsive navbar.
/*===== VARIABLES CSS =====*/
:root {
--header-height: 3rem;
/*===== Colors =====*/
--first-color: #5B65F5;
--first-color-light: #C4C7F5;
--dark-color: #0E1026;
--white-color: #FBFBFB;
/*===== Font and typography =====*/
--body-font: 'Open Sans', sans-serif;
--nav-name-font-size: 1.5rem;
--normal-font-size: .938rem;
/*===== z index =====*/
--z-fixed: 100;
}
@media screen and (min-width: 768px) {
:root {
--nav-name-font-size: 1rem;
--normal-font-size: 1rem;
}
}
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: var(--header-height);
padding: 0 1rem;
background-color: #FFF;
z-index: var(--z-fixed);
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.header__logo {
color: var(--dark-color);
}
.header__toggle {
font-size: 1.7rem;
cursor: pointer;
}
/ * ===== NAV ===== * /
@media screen and (max-width: 768px) {
.are not {
position: fixed;
top: 0;
left: -100%;
background-color: var(--first-color);
width: 80%;
height: 100vh;
padding: 2rem 0;
z-index: var(--z-fixed);
transition: .5s;
overflow-y: auto;
}
}
.nav__content {
display: flex;
flex-direction: column;
}
.nav__profile {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
margin-bottom: 3rem;
}
.nav__img {
display: flex;
justify-content: center;
width: 60px;
height: 60px;
border-radius: 50%;
overflow: hidden;
margin-bottom: 1rem;
}
.nav__img img {
width: 70px;
}
.nav__name {
display: block;
font-size: var(--nav-name-font-size);
color: var(--white-color);
}
.nav__item {
margin-bottom: 2rem;
}
.nav__link {
color: var(--first-color-light);
}
.nav__link:hover {
color: var(--white-color);
}
/*Show menu*/
.show {
left: 0;
}
/*Active link*/
.active {
color: var(--white-color);
}
/*=== Dropdown ===*/
.dropdown__link {
display: flex;
align-items: center;
justify-content: space-between;
}
.dropdown__icon {
font-size: 1.3rem;
transition: .5s;
}
.dropdown__menu {
margin: 1rem 0 0 1rem;
display: none;
}
.dropdown__item {
margin: 1rem 0;
}
.dropdown:hover > .dropdown__menu {
display: block;
}
.dropdown:hover .dropdown__icon {
transform: rotate(180deg);
}
/* ===== MEDIA QUERIES=====*/
@media screen and (min-width: 576px) {
.are not {
width: 288px;
}
}
@media screen and (min-width: 768px) {
body {
margin: 0;
}
.header {
height: calc(var(--header-height) + 1rem);
}
.header__logo, .header__toggle {
display: none;
}
.are not {
width: 100%;
}
.nav__content {
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.nav__profile {
flex-direction: row;
text-align: initial;
margin-bottom: 0;
}
.nav__img {
width: 40px;
height: 40px;
margin-right: .5rem;
margin-bottom: 0;
}
.nav__img img {
width: 46px;
}
.nav__name {
color: var(--dark-color);
}
.nav__list {
display: flex;
align-items: center;
}
.nav__item {
margin: 0 1.5rem;
padding: 1.4rem 0;
}
.nav__link {
color: var(--dark-color);
}
.nav__link:hover {
color: var(--first-color);
}
/*Active link new color*/
.active {
color: var(--first-color);
}
.dropdown {
position: relative;
}
.dropdown__menu {
position: fixed;
margin: 0;
top: calc(var(--header-height) + 1rem);
padding: .5rem 1.5rem;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
border-radius: .5rem;
}
.dropdown__item {
margin: .5rem 0;
}
}
@media screen and (min-width: 1024px) {
.bd-grid {
margin-left: auto;
margin-right: auto;
}
}
3. The JavaScript to enable the responsive navbar.
const showMenu = (toggleId, navId)=>{
const toggle = document.getElementById(toggleId),
nav = document.getElementById(navId)
if(toggle && nav){
toggle.addEventListener('click', ()=>{
nav.classList.toggle('show')
toggle.classList.toggle('bx-x')
})
}
}
showMenu('header-toggle','nav-menu')
const navLink = document.querySelectorAll('.nav__link');
function linkAction(){
navLink.forEach(n => n.classList.remove('active'));
this.classList.add('active');
}
navLink.forEach(n => n.addEventListener('click', linkAction));
Author: bedimcode
Source Code: https://github.com/bedimcode/responsive-dropdown-menu
#javascript #css