├── README.md ├── assets ├── css │ └── styles.css ├── js │ └── main.js └── scss │ ├── base │ └── _base.scss │ ├── components │ ├── _breakpoints.scss │ └── _header.scss │ ├── config │ └── _variables.scss │ ├── layout │ └── _layout.scss │ └── styles.scss ├── index.html └── preview.png /README.md: -------------------------------------------------------------------------------- 1 | # Responsive Navbar Menu 2 | ## [Watch it on youtube](https://youtu.be/kQGKU4u9Dng) 3 | ### Responsive Navbar Menu 4 | 5 | - Responsive Navbar Using HTML CSS And JavaScript 6 | - Contains link animation on hover. 7 | - Contains sibling fading animation. 8 | - Developed first with the Mobile First methodology, then for desktop. 9 | - Compatible with all mobile devices and with a beautiful and pleasant user interface. 10 | 11 | 💙 Join the channel to see more videos like this. [Bedimcode](https://www.youtube.com/@Bedimcode) 12 | 13 | ![preview img](/preview.png) 14 | -------------------------------------------------------------------------------- /assets/css/styles.css: -------------------------------------------------------------------------------- 1 | /*=============== GOOGLE FONTS ===============*/ 2 | @import url("https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@400;500&display=swap"); 3 | 4 | /*=============== VARIABLES CSS ===============*/ 5 | :root { 6 | --header-height: 3.5rem; 7 | 8 | /*========== Colors ==========*/ 9 | /*Color mode HSL(hue, saturation, lightness)*/ 10 | --white-color: hsl(0, 0%, 100%); 11 | --black-color: hsl(0, 0%, 0%); 12 | 13 | /*========== Font and typography ==========*/ 14 | /*.5rem = 8px | 1rem = 16px ...*/ 15 | --body-font: "Montserrat Alternates", sans-serif; 16 | --h1-font-size: 1.5rem; 17 | --normal-font-size: .938rem; 18 | 19 | /*========== Font weight ==========*/ 20 | --font-regular: 400; 21 | --font-medium: 500; 22 | 23 | /*========== z index ==========*/ 24 | --z-tooltip: 10; 25 | --z-fixed: 100; 26 | } 27 | 28 | /*========== Responsive typography ==========*/ 29 | @media screen and (min-width: 1150px) { 30 | :root { 31 | --normal-font-size: 1rem; 32 | } 33 | } 34 | 35 | /*=============== BASE ===============*/ 36 | * { 37 | box-sizing: border-box; 38 | padding: 0; 39 | margin: 0; 40 | } 41 | 42 | html { 43 | scroll-behavior: smooth; 44 | } 45 | 46 | body { 47 | font-family: var(--body-font); 48 | font-size: var(--normal-font-size); 49 | background-color: var(--white-color); 50 | } 51 | 52 | ul { 53 | list-style: none; 54 | } 55 | 56 | a { 57 | text-decoration: none; 58 | } 59 | 60 | /*=============== REUSABLE CSS CLASSES ===============*/ 61 | .container { 62 | max-width: 1120px; 63 | margin-inline: 1.5rem; 64 | } 65 | 66 | /*=============== HEADER & NAV ===============*/ 67 | .header { 68 | position: fixed; 69 | width: 100%; 70 | top: 0; 71 | left: 0; 72 | background-color: var(--black-color); 73 | z-index: var(--z-fixed); 74 | } 75 | 76 | .nav { 77 | position: relative; 78 | height: var(--header-height); 79 | display: flex; 80 | justify-content: space-between; 81 | align-items: center; 82 | } 83 | 84 | .nav__logo { 85 | color: var(--white-color); 86 | font-weight: var(--font-medium); 87 | } 88 | 89 | .nav__close, 90 | .nav__toggle { 91 | display: flex; 92 | color: var(--white-color); 93 | font-size: 1.5rem; 94 | cursor: pointer; 95 | } 96 | 97 | /* Navigation for mobile devices */ 98 | @media screen and (max-width: 1150px) { 99 | .nav__menu { 100 | position: fixed; 101 | left: -100%; 102 | top: 0; 103 | background-color: var(--black-color); 104 | width: 100%; 105 | height: 100%; 106 | padding: 6rem 3.5rem 4.5rem; 107 | display: flex; 108 | flex-direction: column; 109 | justify-content: space-between; 110 | transition: left .4s; 111 | } 112 | 113 | .nav__item { 114 | transform: translateX(-150px); 115 | visibility: hidden; 116 | transition: transform .4s ease-out, visibility .4s; 117 | } 118 | 119 | .nav__item:nth-child(1) { 120 | transition-delay: .1s; 121 | } 122 | .nav__item:nth-child(2) { 123 | transition-delay: .2s; 124 | } 125 | .nav__item:nth-child(3) { 126 | transition-delay: .3s; 127 | } 128 | .nav__item:nth-child(4) { 129 | transition-delay: .4s; 130 | } 131 | .nav__item:nth-child(5) { 132 | transition-delay: .5s; 133 | } 134 | } 135 | 136 | .nav__list, 137 | .nav__social { 138 | display: flex; 139 | } 140 | 141 | .nav__list { 142 | flex-direction: column; 143 | row-gap: 3rem; 144 | } 145 | 146 | .nav__link { 147 | position: relative; 148 | color: var(--white-color); 149 | font-size: var(--h1-font-size); 150 | font-weight: var(--font-medium); 151 | display: inline-flex; 152 | align-items: center; 153 | transition: opacity .4s; 154 | } 155 | 156 | .nav__link i { 157 | font-size: 2rem; 158 | position: absolute; 159 | opacity: 0; 160 | visibility: hidden; 161 | transition: opacity .4s, visibility .4s; 162 | } 163 | 164 | .nav__link span { 165 | position: relative; 166 | transition: margin .4s; 167 | } 168 | 169 | .nav__link span::after { 170 | content: ""; 171 | position: absolute; 172 | left: 0; 173 | bottom: -6px; 174 | width: 0; 175 | height: 2px; 176 | background-color: var(--white-color); 177 | transition: width .4s ease-out; 178 | } 179 | 180 | /* Animation link on hover */ 181 | .nav__link:hover span { 182 | margin-left: 2.5rem; 183 | } 184 | 185 | .nav__link:hover i { 186 | opacity: 1; 187 | visibility: visible; 188 | } 189 | 190 | .nav__link:hover span::after { 191 | width: 100%; 192 | } 193 | 194 | /* Sibling fade animation */ 195 | .nav__list:has(.nav__link:hover) .nav__link:not(:hover) { 196 | opacity: .4; 197 | } 198 | 199 | .nav__close { 200 | position: absolute; 201 | top: 1rem; 202 | right: 1.5rem; 203 | } 204 | 205 | .nav__social { 206 | column-gap: 1rem; 207 | } 208 | 209 | .nav__social-link { 210 | color: var(--white-color); 211 | font-size: 1.5rem; 212 | transition: transform .4s; 213 | } 214 | 215 | .nav__social-link:hover { 216 | transform: translateY(-.25rem); 217 | } 218 | 219 | /* Show menu */ 220 | .show-menu { 221 | left: 0; 222 | } 223 | 224 | /* Animation link when displaying menu */ 225 | .show-menu .nav__item { 226 | visibility: visible; 227 | transform: translateX(0); 228 | } 229 | 230 | /*=============== BREAKPOINTS ===============*/ 231 | /* For large devices */ 232 | @media screen and (min-width: 1150px) { 233 | .container { 234 | margin-inline: auto; 235 | } 236 | 237 | .nav { 238 | height: calc(var(--header-height) + 2rem); 239 | } 240 | 241 | .nav__toggle, 242 | .nav__close { 243 | display: none; 244 | } 245 | 246 | .nav__link { 247 | font-size: var(--normal-font-size); 248 | } 249 | 250 | .nav__link i { 251 | font-size: 1.5rem; 252 | } 253 | 254 | .nav__list { 255 | flex-direction: row; 256 | column-gap: 3.5rem; 257 | } 258 | 259 | .nav__menu { 260 | display: flex; 261 | align-items: center; 262 | column-gap: 3.5rem; 263 | } 264 | } 265 | -------------------------------------------------------------------------------- /assets/js/main.js: -------------------------------------------------------------------------------- 1 | /*=============== SHOW MENU ===============*/ 2 | const navMenu = document.getElementById('nav-menu'), 3 | navToggle = document.getElementById('nav-toggle'), 4 | navClose = document.getElementById('nav-close') 5 | 6 | /* Menu show */ 7 | if(navToggle){ 8 | navToggle.addEventListener('click', () =>{ 9 | navMenu.classList.add('show-menu') 10 | }) 11 | } 12 | 13 | /* Menu hidden */ 14 | if(navClose){ 15 | navClose.addEventListener('click', () =>{ 16 | navMenu.classList.remove('show-menu') 17 | }) 18 | } 19 | -------------------------------------------------------------------------------- /assets/scss/base/_base.scss: -------------------------------------------------------------------------------- 1 | /*=============== BASE ===============*/ 2 | *{ 3 | box-sizing: border-box; 4 | padding: 0; 5 | margin: 0; 6 | } 7 | 8 | html{ 9 | scroll-behavior: smooth; 10 | } 11 | 12 | body{ 13 | font-family: var(--body-font); 14 | font-size: var(--normal-font-size); 15 | background-color: var(--white-color); 16 | } 17 | 18 | ul{ 19 | list-style: none; 20 | } 21 | 22 | a{ 23 | text-decoration: none; 24 | } 25 | -------------------------------------------------------------------------------- /assets/scss/components/_breakpoints.scss: -------------------------------------------------------------------------------- 1 | /*=============== BREAKPOINTS ===============*/ 2 | /* For large devices */ 3 | @media screen and (min-width: 1150px){ 4 | .container{ 5 | margin-inline: auto; 6 | } 7 | 8 | .nav{ 9 | height: calc(var(--header-height) + 2rem); 10 | 11 | &__toggle, 12 | &__close{ 13 | display: none; 14 | } 15 | &__link{ 16 | font-size: var(--normal-font-size); 17 | 18 | & i{ 19 | font-size: 1.5rem; 20 | } 21 | } 22 | &__list{ 23 | flex-direction: row; 24 | column-gap: 3.5rem; 25 | } 26 | &__menu{ 27 | display: flex; 28 | align-items: center; 29 | column-gap: 3.5rem; 30 | } 31 | } 32 | } -------------------------------------------------------------------------------- /assets/scss/components/_header.scss: -------------------------------------------------------------------------------- 1 | /*=============== HEADER & NAV ===============*/ 2 | .header{ 3 | position: fixed; 4 | width: 100%; 5 | top: 0; 6 | left: 0; 7 | background-color: var(--black-color); 8 | z-index: var(--z-fixed); 9 | } 10 | 11 | .nav{ 12 | position: relative; 13 | height: var(--header-height); 14 | display: flex; 15 | justify-content: space-between; 16 | align-items: center; 17 | 18 | &__logo{ 19 | color: var(--white-color); 20 | font-weight: var(--font-medium); 21 | } 22 | &__close, 23 | &__toggle{ 24 | display: flex; 25 | color: var(--white-color); 26 | font-size: 1.5rem; 27 | cursor: pointer; 28 | } 29 | // Navigation for mobile devices 30 | @media screen and (max-width: 1150px){ 31 | &__menu{ 32 | position: fixed; 33 | left: -100%; 34 | top: 0; 35 | background-color: var(--black-color); 36 | width: 100%; 37 | height: 100%; 38 | padding: 6rem 3.5rem 4.5rem; 39 | display: flex; 40 | flex-direction: column; 41 | justify-content: space-between; 42 | transition: left .4s; 43 | } 44 | &__item{ 45 | transform: translateX(-150px); 46 | visibility: hidden; 47 | transition: transform .4s ease-out, visibility .4s; 48 | 49 | &:nth-child(1){ 50 | transition-delay: .1s; 51 | } 52 | &:nth-child(2){ 53 | transition-delay: .2s; 54 | } 55 | &:nth-child(3){ 56 | transition-delay: .3s; 57 | } 58 | &:nth-child(4){ 59 | transition-delay: .4s; 60 | } 61 | &:nth-child(5){ 62 | transition-delay: .5s; 63 | } 64 | } 65 | } 66 | &__list, 67 | &__social{ 68 | display: flex; 69 | } 70 | &__list{ 71 | flex-direction: column; 72 | row-gap: 3rem; 73 | } 74 | &__link{ 75 | position: relative; 76 | color: var(--white-color); 77 | font-size: var(--h1-font-size); 78 | font-weight: var(--font-medium); 79 | display: inline-flex; 80 | align-items: center; 81 | transition: opacity .4s; 82 | 83 | & i{ 84 | font-size: 2rem; 85 | position: absolute; 86 | opacity: 0; 87 | visibility: hidden; 88 | transition: opacity .4s, visibility .4s; 89 | } 90 | & span{ 91 | position: relative; 92 | transition: margin .4s; 93 | 94 | &::after{ 95 | content: ''; 96 | position: absolute; 97 | left: 0; 98 | bottom: -6px; 99 | width: 0; 100 | height: 2px; 101 | background-color: var(--white-color); 102 | transition: width .4s ease-out; 103 | } 104 | } 105 | } 106 | // Animation link on hover 107 | &__link{ 108 | &:hover span{ 109 | margin-left: 2.5rem; 110 | } 111 | &:hover i{ 112 | opacity: 1; 113 | visibility: visible; 114 | } 115 | &:hover span::after{ 116 | width: 100%; 117 | } 118 | } 119 | // Sibling fade animation 120 | &__list:has(&__link:hover) &__link:not(:hover){ 121 | opacity: .4; 122 | } 123 | &__close{ 124 | position: absolute; 125 | top: 1rem; 126 | right: 1.5rem; 127 | } 128 | &__social{ 129 | column-gap: 1rem; 130 | 131 | &-link{ 132 | color: var(--white-color); 133 | font-size: 1.5rem; 134 | transition: transform .4s; 135 | 136 | &:hover{ 137 | transform: translateY(-.25rem); 138 | } 139 | } 140 | } 141 | } 142 | 143 | /* Show menu */ 144 | .show-menu{ 145 | left: 0; 146 | } 147 | 148 | // Animation link when displaying menu 149 | .show-menu .nav__item{ 150 | visibility: visible; 151 | transform: translateX(0); 152 | } 153 | -------------------------------------------------------------------------------- /assets/scss/config/_variables.scss: -------------------------------------------------------------------------------- 1 | /*=============== GOOGLE FONTS ===============*/ 2 | @import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@400;500&display=swap'); 3 | 4 | /*=============== VARIABLES CSS ===============*/ 5 | :root{ 6 | --header-height: 3.5rem; 7 | 8 | /*========== Colors ==========*/ 9 | /*Color mode HSL(hue, saturation, lightness)*/ 10 | --white-color: hsl(0, 0%, 100%); 11 | --black-color: hsl(0, 0%, 0%); 12 | 13 | /*========== Font and typography ==========*/ 14 | /*.5rem = 8px | 1rem = 16px ...*/ 15 | --body-font: "Montserrat Alternates", sans-serif; 16 | 17 | --h1-font-size: 1.5rem; 18 | --normal-font-size: .938rem; 19 | 20 | // Responsive typography 21 | @media screen and (min-width: 1150px){ 22 | --normal-font-size: 1rem; 23 | } 24 | 25 | /*========== Font weight ==========*/ 26 | --font-regular: 400; 27 | --font-medium: 500; 28 | 29 | /*========== z index ==========*/ 30 | --z-tooltip: 10; 31 | --z-fixed: 100; 32 | } 33 | -------------------------------------------------------------------------------- /assets/scss/layout/_layout.scss: -------------------------------------------------------------------------------- 1 | /*=============== REUSABLE CSS CLASSES ===============*/ 2 | .container{ 3 | max-width: 1120px; 4 | margin-inline: 1.5rem; 5 | } 6 | -------------------------------------------------------------------------------- /assets/scss/styles.scss: -------------------------------------------------------------------------------- 1 | @import 'config/variables'; 2 | @import 'base/base'; 3 | @import 'layout/layout'; 4 | @import 'components/header'; 5 | @import 'components/breakpoints'; 6 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | Responsive navbar - Bedimcode 14 | 15 | 16 | 17 | 89 | 90 | 91 |
92 | 93 |
94 | 95 | 96 | 97 | 98 | -------------------------------------------------------------------------------- /preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bedimcode/responsive-navbar-2/2300a65a946c87fc550cf4d06d3bee5c5d0543df/preview.png --------------------------------------------------------------------------------