├── LICENSE ├── README.md ├── assets ├── css │ └── styles.css ├── js │ └── main.js └── scss │ ├── base │ └── _base.scss │ ├── components │ ├── _breakpoints.scss │ └── _nav.scss │ ├── config │ └── _variables.scss │ └── styles.scss ├── index.html └── preview.png /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Bedimcode 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 🔥 Responsive Sidebar Menu With Tab Bar 2 | ## [Watch it on youtube](https://youtu.be/o7YdBUb1jsM) 3 | ### 🔥 Responsive Sidebar Menu With Tab Bar 4 | 5 | - Responsive Sidebar Menu With Tab Bar Using HTML CSS & JavaScript. 6 | - Developed first with the Mobile First methodology, then for desktop. 7 | - Compatible with all mobile devices and with a beautiful and pleasant user interface. 8 | 9 | 💙 Join the channel to see more videos like this. [Bedimcode](https://www.youtube.com/c/Bedimcode) 10 | 11 | ![preview img](/preview.png) 12 | -------------------------------------------------------------------------------- /assets/css/styles.css: -------------------------------------------------------------------------------- 1 | /*=============== GOOGLE FONTS ===============*/ 2 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap"); 3 | 4 | /*=============== VARIABLES CSS ===============*/ 5 | :root { 6 | /*========== Colors ==========*/ 7 | /*Color mode HSL(hue, saturation, lightness)*/ 8 | --first-color: hsl(228, 81%, 49%); 9 | --title-color: hsl(228, 12%, 15%); 10 | --text-color: hsl(228, 8%, 50%); 11 | --body-color: hsl(228, 100%, 99%); 12 | --container-color: #fff; 13 | 14 | /*========== Font and typography ==========*/ 15 | /*.5rem = 8px | 1rem = 16px ...*/ 16 | --body-font: 'Poppins', sans-serif; 17 | --normal-font-size: .938rem; 18 | } 19 | 20 | /* Responsive typography */ 21 | @media screen and (min-width: 968px) { 22 | :root { 23 | --normal-font-size: 1rem; 24 | } 25 | } 26 | 27 | /*=============== BASE ===============*/ 28 | * { 29 | box-sizing: border-box; 30 | padding: 0; 31 | margin: 0; 32 | } 33 | 34 | body { 35 | position: relative; 36 | font-family: var(--body-font); 37 | font-size: var(--normal-font-size); 38 | background-color: var(--body-color); 39 | color: var(--text-color); 40 | } 41 | 42 | h1 { 43 | color: var(--title-color); 44 | } 45 | 46 | a { 47 | text-decoration: none; 48 | } 49 | 50 | /*=============== NAV ===============*/ 51 | .container { 52 | margin-left: 1rem; 53 | margin-right: 1rem; 54 | } 55 | 56 | .section { 57 | padding: 2rem 0; 58 | } 59 | 60 | @media screen and (max-width: 767px) { 61 | .nav__logo, 62 | .nav__toggle, 63 | .nav__name { 64 | display: none; 65 | } 66 | 67 | .nav__list { 68 | position: fixed; 69 | bottom: 2rem; 70 | background-color: var(--container-color); 71 | box-shadow: 0 8px 24px hsla(228, 81%, 24%, .15); 72 | width: 90%; 73 | padding: 30px 40px; 74 | border-radius: 1rem; 75 | left: 0; 76 | right: 0; 77 | margin: 0 auto; 78 | display: flex; 79 | justify-content: center; 80 | align-items: center; 81 | column-gap: 36px; 82 | transition: .4s; 83 | } 84 | } 85 | 86 | .nav__link { 87 | display: flex; 88 | color: var(--text-color); 89 | font-weight: 500; 90 | transition: .3s; 91 | } 92 | 93 | .nav__link i { 94 | font-size: 1.25rem; 95 | } 96 | 97 | .nav__link:hover { 98 | color: var(--first-color); 99 | } 100 | 101 | /* Active link */ 102 | .active-link { 103 | color: var(--first-color); 104 | } 105 | 106 | /*=============== BREAKPOINTS ===============*/ 107 | /* For small devices */ 108 | @media screen and (max-width: 320px) { 109 | .nav__list { 110 | column-gap: 20px; 111 | } 112 | } 113 | 114 | /* For medium devices */ 115 | @media screen and (min-width: 576px) { 116 | .nav__list { 117 | width: 332px; 118 | } 119 | } 120 | 121 | @media screen and (min-width: 767px) { 122 | .container { 123 | margin-left: 7rem; 124 | margin-right: 1.5rem; 125 | } 126 | .nav { 127 | position: fixed; 128 | left: 0; 129 | background-color: var(--container-color); 130 | box-shadow: 1px 0 4px hsla(228, 81%, 49%, .15); 131 | width: 84px; 132 | height: 100vh; 133 | padding: 2rem; 134 | transition: .3s; 135 | } 136 | .nav__logo { 137 | display: flex; 138 | } 139 | .nav__logo i { 140 | font-size: 1.25rem; 141 | color: var(--first-color); 142 | } 143 | .nav__logo-name { 144 | color: var(--title-color); 145 | font-weight: 600; 146 | } 147 | .nav__logo, .nav__link { 148 | align-items: center; 149 | column-gap: 1rem; 150 | } 151 | .nav__list { 152 | display: grid; 153 | row-gap: 2.5rem; 154 | margin-top: 10.5rem; 155 | } 156 | .nav__content { 157 | overflow: hidden; 158 | height: 100%; 159 | } 160 | .nav__toggle { 161 | position: absolute; 162 | width: 20px; 163 | height: 20px; 164 | background-color: var(--title-color); 165 | color: #fff; 166 | border-radius: 50%; 167 | font-size: 1.20rem; 168 | display: grid; 169 | place-items: center; 170 | top: 2rem; 171 | right: -10px; 172 | cursor: pointer; 173 | transition: .4s; 174 | } 175 | } 176 | 177 | /* Show menu */ 178 | .show-menu { 179 | width: 255px; 180 | } 181 | 182 | /* Rotate toggle icon */ 183 | .rotate-icon { 184 | transform: rotate(180deg); 185 | } 186 | 187 | /* For 2K & 4K resolutions */ 188 | @media screen and (min-width: 2048px) { 189 | body { 190 | zoom: 1.7; 191 | } 192 | } 193 | 194 | @media screen and (min-width: 3840px) { 195 | body { 196 | zoom: 2.5; 197 | } 198 | } -------------------------------------------------------------------------------- /assets/js/main.js: -------------------------------------------------------------------------------- 1 | /*=============== LINK ACTIVE ===============*/ 2 | const linkColor = document.querySelectorAll('.nav__link') 3 | 4 | function colorLink(){ 5 | linkColor.forEach(l => l.classList.remove('active-link')) 6 | this.classList.add('active-link') 7 | } 8 | 9 | linkColor.forEach(l => l.addEventListener('click', colorLink)) 10 | 11 | /*=============== SHOW HIDDEN MENU ===============*/ 12 | const showMenu = (toggleId, navbarId) =>{ 13 | const toggle = document.getElementById(toggleId), 14 | navbar = document.getElementById(navbarId) 15 | 16 | if(toggle && navbar){ 17 | toggle.addEventListener('click', ()=>{ 18 | /* Show menu */ 19 | navbar.classList.toggle('show-menu') 20 | /* Rotate toggle icon */ 21 | toggle.classList.toggle('rotate-icon') 22 | }) 23 | } 24 | } 25 | showMenu('nav-toggle','nav') -------------------------------------------------------------------------------- /assets/scss/base/_base.scss: -------------------------------------------------------------------------------- 1 | /*=============== BASE ===============*/ 2 | *{ 3 | box-sizing: border-box; 4 | padding: 0; 5 | margin: 0; 6 | } 7 | 8 | body{ 9 | position: relative; 10 | font-family: var(--body-font); 11 | font-size: var(--normal-font-size); 12 | background-color: var(--body-color); 13 | color: var(--text-color); 14 | } 15 | 16 | h1{ 17 | color: var(--title-color); 18 | } 19 | 20 | a{ 21 | text-decoration: none; 22 | } -------------------------------------------------------------------------------- /assets/scss/components/_breakpoints.scss: -------------------------------------------------------------------------------- 1 | /*=============== BREAKPOINTS ===============*/ 2 | /* For small devices */ 3 | @media screen and (max-width: 320px){ 4 | .nav__list{ 5 | column-gap: 20px; 6 | } 7 | } 8 | 9 | /* For medium devices */ 10 | @media screen and (min-width: 576px){ 11 | .nav__list{ 12 | width: 332px; 13 | } 14 | } 15 | 16 | @media screen and (min-width: 767px){ 17 | .container{ 18 | margin-left: 7rem; 19 | margin-right: 1.5rem; 20 | } 21 | 22 | .nav{ 23 | position: fixed; 24 | left: 0; 25 | background-color: var(--container-color); 26 | box-shadow: 1px 0 4px hsla(228, 81%, 49%, .15); 27 | width: 84px; 28 | height: 100vh; 29 | padding: 2rem; 30 | transition: .3s; 31 | 32 | &__logo{ 33 | display: flex; 34 | 35 | & i{ 36 | font-size: 1.25rem; 37 | color: var(--first-color); 38 | } 39 | &-name{ 40 | color: var(--title-color); 41 | font-weight: 600; 42 | } 43 | } 44 | 45 | &__logo, 46 | &__link{ 47 | align-items: center; 48 | column-gap: 1rem; 49 | } 50 | &__list{ 51 | display: grid; 52 | row-gap: 2.5rem; 53 | margin-top: 10.5rem; 54 | } 55 | &__content{ 56 | overflow: hidden; 57 | height: 100%; 58 | } 59 | 60 | &__toggle{ 61 | position: absolute; 62 | width: 20px; 63 | height: 20px; 64 | background-color: var(--title-color); 65 | color: #fff; 66 | border-radius: 50%; 67 | font-size: 1.20rem; 68 | display: grid; 69 | place-items: center; 70 | top: 2rem; 71 | right: -10px; 72 | cursor: pointer; 73 | transition: .4s; 74 | } 75 | } 76 | } 77 | 78 | /* Show menu */ 79 | .show-menu{ 80 | width: 255px; 81 | } 82 | 83 | /* Rotate toggle icon */ 84 | .rotate-icon{ 85 | transform: rotate(180deg); 86 | } 87 | 88 | /* For 2K & 4K resolutions */ 89 | @media screen and (min-width: 2048px) { 90 | body { 91 | zoom: 1.7; 92 | } 93 | } 94 | 95 | @media screen and (min-width: 3840px) { 96 | body { 97 | zoom: 2.5; 98 | } 99 | } -------------------------------------------------------------------------------- /assets/scss/components/_nav.scss: -------------------------------------------------------------------------------- 1 | /*=============== NAV ===============*/ 2 | .container{ 3 | margin-left: 1rem; 4 | margin-right: 1rem; 5 | } 6 | 7 | .section{ 8 | padding: 2rem 0; 9 | } 10 | 11 | .nav{ 12 | @media screen and (max-width: 767px){ 13 | &__logo, 14 | &__toggle, 15 | &__name{ 16 | display: none; 17 | } 18 | 19 | &__list{ 20 | position: fixed; 21 | bottom: 2rem; 22 | background-color: var(--container-color); 23 | box-shadow: 0 8px 24px hsla(228, 81%, 24%, .15); 24 | width: 90%; 25 | padding: 30px 40px; 26 | border-radius: 1rem; 27 | left: 0; 28 | right: 0; 29 | margin: 0 auto; 30 | display: flex; 31 | justify-content: center; 32 | align-items: center; 33 | column-gap: 36px; 34 | transition: .4s; 35 | } 36 | } 37 | 38 | &__link{ 39 | display: flex; 40 | color: var(--text-color); 41 | font-weight: 500; 42 | transition: .3s; 43 | 44 | & i{ 45 | font-size: 1.25rem; 46 | } 47 | &:hover{ 48 | color: var(--first-color); 49 | } 50 | } 51 | } 52 | 53 | /* Active link */ 54 | .active-link{ 55 | color: var(--first-color); 56 | } -------------------------------------------------------------------------------- /assets/scss/config/_variables.scss: -------------------------------------------------------------------------------- 1 | /*=============== GOOGLE FONTS ===============*/ 2 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap'); 3 | 4 | /*=============== VARIABLES CSS ===============*/ 5 | :root{ 6 | /*========== Colors ==========*/ 7 | /*Color mode HSL(hue, saturation, lightness)*/ 8 | --first-color: hsl(228, 81%, 49%); 9 | --title-color: hsl(228, 12%, 15%); 10 | --text-color: hsl(228, 8%, 50%); 11 | --body-color: hsl(228, 100%, 99%); 12 | --container-color: #fff; 13 | 14 | /*========== Font and typography ==========*/ 15 | /*.5rem = 8px | 1rem = 16px ...*/ 16 | --body-font: 'Poppins', sans-serif; 17 | --normal-font-size: .938rem; 18 | 19 | // Responsive typography 20 | @media screen and (min-width: 968px){ 21 | --normal-font-size: 1rem; 22 | } 23 | } -------------------------------------------------------------------------------- /assets/scss/styles.scss: -------------------------------------------------------------------------------- 1 | @import 'config/variables'; 2 | @import 'base/base'; 3 | @import 'components/nav'; 4 | @import 'components/breakpoints'; -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | Responsive sidebar menu - Bedimcode 14 | 15 | 16 | 17 | 56 | 57 | 58 |
59 |

Components

60 |
61 | 62 | 63 | 64 | 65 | -------------------------------------------------------------------------------- /preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bedimcode/responsive-sidebar-with-tabbar/241cdfd26186e1106e9b58fb50520619caa700e8/preview.png --------------------------------------------------------------------------------