Author: | bedimcode |
---|---|
Views Total: | 1,703 views |
Official Page: | Go to website |
Last Update: | May 12, 2022 |
License: | MIT |
Preview:

Description:
A responsive, mobile-friendly, collapsible/expandable sidebar & tab navigation written in plain JavaScript and CSS.
- Desktop: Allows you to collapse the navigation into an icon-only side menu.
- Mobile: Automatically converts the sidebar nav into a bottom tab bar.
How to use it:
1. Code the HTML for the sidebar navigation.
<div class="nav" id="nav"> <nav class="nav__content"> <div class="nav__toggle" id="nav-toggle"> <i class='bx bx-chevron-right' ></i> </div> <a href="#" class="nav__logo"> <i class='bx bxs-heart' ></i> <span class="nav__logo-name">Healthy</span> </a> <div class="nav__list"> <a href="#" class="nav__link active-link"> <i class='bx bx-grid-alt'></i> <span class="nav__name">Dashboard</span> </a> <a href="#" class="nav__link"> <i class='bx bx-file'></i> <span class="nav__name">Appointments</span> </a> <a href="#" class="nav__link"> <i class='bx bx-envelope' ></i> <span class="nav__name">Messages</span> </a> <a href="#" class="nav__link"> <i class='bx bx-bar-chart-square' ></i> <span class="nav__name">Statistic</span> </a> <a href="#" class="nav__link"> <i class='bx bx-cog' ></i> <span class="nav__name">Settings</span> </a> </div> </nav> </div>
2. We use boxicons for the navigation icons in this example.
<link href="https://unpkg.com/[email protected]/css/boxicons.min.css" rel="stylesheet" />
3. The necessary CSS styles.
/*=============== VARIABLES CSS ===============*/ :root { /*========== Colors ==========*/ /*Color mode HSL(hue, saturation, lightness)*/ --first-color: hsl(228, 81%, 49%); --title-color: hsl(228, 12%, 15%); --text-color: hsl(228, 8%, 50%); --body-color: hsl(228, 100%, 99%); --container-color: #fff; /*========== Font and typography ==========*/ /*.5rem = 8px | 1rem = 16px ...*/ --body-font: 'Poppins', sans-serif; --normal-font-size: .938rem; } /* Responsive typography */ @media screen and (min-width: 968px) { :root { --normal-font-size: 1rem; } } /*=============== BASE ===============*/ * { box-sizing: border-box; padding: 0; margin: 0; } body { position: relative; font-family: var(--body-font); font-size: var(--normal-font-size); background-color: var(--body-color); color: var(--text-color); } a { text-decoration: none; } /*=============== NAV ===============*/ .container { margin-left: 1rem; margin-right: 1rem; } .section { padding: 2rem 0; } @media screen and (max-width: 767px) { .nav__logo, .nav__toggle, .nav__name { display: none; } .nav__list { position: fixed; bottom: 2rem; background-color: var(--container-color); box-shadow: 0 8px 24px hsla(228, 81%, 24%, .15); width: 90%; padding: 30px 40px; border-radius: 1rem; left: 0; right: 0; margin: 0 auto; display: flex; justify-content: center; align-items: center; column-gap: 36px; transition: .4s; } } .nav__link { display: flex; color: var(--text-color); font-weight: 500; transition: .3s; } .nav__link i { font-size: 1.25rem; } .nav__link:hover { color: var(--first-color); } /* Active link */ .active-link { color: var(--first-color); } /*=============== BREAKPOINTS ===============*/ /* For small devices */ @media screen and (max-width: 320px) { .nav__list { column-gap: 20px; } } /* For medium devices */ @media screen and (min-width: 576px) { .nav__list { width: 332px; } } @media screen and (min-width: 767px) { .container { margin-left: 7rem; margin-right: 1.5rem; } .nav { position: fixed; left: 0; background-color: var(--container-color); box-shadow: 1px 0 4px hsla(228, 81%, 49%, .15); width: 84px; height: 100vh; padding: 2rem; transition: .3s; } .nav__logo { display: flex; } .nav__logo i { font-size: 1.25rem; color: var(--first-color); } .nav__logo-name { color: var(--title-color); font-weight: 600; } .nav__logo, .nav__link { align-items: center; column-gap: 1rem; } .nav__list { display: grid; row-gap: 2.5rem; margin-top: 10.5rem; } .nav__content { overflow: hidden; height: 100%; } .nav__toggle { position: absolute; width: 20px; height: 20px; background-color: var(--title-color); color: #fff; border-radius: 50%; font-size: 1.20rem; display: grid; place-items: center; top: 2rem; right: -10px; cursor: pointer; transition: .4s; } } /* Show menu */ .show-menu { width: 255px; } /* Rotate toggle icon */ .rotate-icon { transform: rotate(180deg); } /* For 2K & 4K resolutions */ @media screen and (min-width: 2048px) { body { zoom: 1.7; } } @media screen and (min-width: 3840px) { body { zoom: 2.5; } }
4. The main JavaScript.
/*=============== LINK ACTIVE ===============*/ const linkColor = document.querySelectorAll('.nav__link') function colorLink(){ linkColor.forEach(l => l.classList.remove('active-link')) this.classList.add('active-link') } linkColor.forEach(l => l.addEventListener('click', colorLink)) /*=============== SHOW HIDDEN MENU ===============*/ const showMenu = (toggleId, navbarId) =>{ const toggle = document.getElementById(toggleId), navbar = document.getElementById(navbarId) if(toggle && navbar){ toggle.addEventListener('click', ()=>{ /* Show menu */ navbar.classList.toggle('show-menu') /* Rotate toggle icon */ toggle.classList.toggle('rotate-icon') }) } } showMenu('nav-toggle','nav')