├── .gitignore ├── README.md ├── _config.yml ├── css └── style.css ├── index.html └── js └── app.js /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # responsive-navbar 2 | I built a responsive navbar with dropdown using Html, Css and JavaScript 3 | 4 | #### Demo: https://codersgyan.github.io/responsive-navbar/ 5 | 6 | 🙏 If you find this repo helpful then don't forget to give a start ❇️ to this repository. :) 7 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | theme: jekyll-theme-cayman -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;900&display=swap'); 2 | 3 | * { 4 | padding: 0; 5 | margin: 0; 6 | box-sizing: border-box; 7 | -webkit-font-smoothing: antialiased; 8 | } 9 | :root { 10 | --primary: #933ded; 11 | --dark: #232323; 12 | --pure: #fff; 13 | --smoke: whitesmoke; 14 | --dark-gray: #999; 15 | } 16 | 17 | 18 | body { 19 | font-family: 'Lato', sans-serif; 20 | background: var(--dark); 21 | color: var(--pure); 22 | } 23 | 24 | .container { 25 | width: 1152px; 26 | max-width: 90%; 27 | margin: 0 auto; 28 | } 29 | 30 | .nav-wrapper { 31 | display: flex; 32 | align-items: center; 33 | justify-content: space-between; 34 | } 35 | 36 | .brand { 37 | display: flex; 38 | align-items: center; 39 | } 40 | 41 | .brand svg { 42 | height: 30px; 43 | margin-right: 10px; 44 | } 45 | 46 | .brand svg path { 47 | fill: var(--pure); 48 | } 49 | 50 | .nav-wrapper ul.nav-list { 51 | list-style-type: none; 52 | display: flex; 53 | align-items: center; 54 | } 55 | .nav-wrapper ul.nav-list li { 56 | margin-left: 30px; 57 | padding: 20px 0; 58 | position: relative; 59 | } 60 | 61 | .nav-wrapper ul.nav-list li a { 62 | color: var(--pure); 63 | text-decoration: none; 64 | letter-spacing: 1px; 65 | transition: all .5s ease-in-out; 66 | } 67 | 68 | .nav-wrapper ul.nav-list li a:hover, .nav-wrapper ul.nav-list li.active a { 69 | color: var(--primary); 70 | } 71 | 72 | .btn { 73 | background: var(--primary); 74 | color: var(--pure); 75 | outline: none; 76 | padding: 8px 20px; 77 | font-size: 14px; 78 | cursor: pointer; 79 | letter-spacing: 1px; 80 | border: 1px solid transparent; 81 | transition: all .5s ease-in-out; 82 | } 83 | 84 | .btn:hover { 85 | background: transparent; 86 | border-color: var(--pure); 87 | } 88 | 89 | main section.header { 90 | display: flex; 91 | align-items: center; 92 | justify-content: center; 93 | text-align: center; 94 | margin-top: 160px; 95 | } 96 | 97 | main section.header h1 { 98 | font-size: 36px; 99 | font-weight: 100; 100 | text-transform: capitalize; 101 | margin-bottom: 20px; 102 | } 103 | 104 | main section.header h4 { 105 | font-size: 18px; 106 | font-weight: 400; 107 | color: var(--dark-gray); 108 | margin-bottom: 20px; 109 | } 110 | nav ul.dropdown-list { 111 | list-style-type: none; 112 | display: block; 113 | background: var(--smoke); 114 | padding: 6px 16px; 115 | position: absolute; 116 | width: max-content; 117 | z-index: 9999; 118 | left: 50%; 119 | transform: translateX(-50%); 120 | opacity: 0; 121 | pointer-events: none; 122 | } 123 | 124 | .nav-wrapper ul.dropdown-list li { 125 | margin-left: 0; 126 | padding: 5px 0; 127 | } 128 | 129 | .nav-wrapper ul.dropdown-list li a { 130 | color: var(--dark); 131 | } 132 | 133 | .nav-wrapper ul.nav-list li:hover .dropdown-list { 134 | opacity: 1; 135 | pointer-events: auto; 136 | animation: moveUp .5s ease-in-out forwards; 137 | } 138 | 139 | @keyframes moveUp { 140 | 0% { 141 | opacity: 0; 142 | transform: translateX(-50%) translateY(50px); 143 | } 144 | 100% { 145 | opacity: 1; 146 | transform: translateX(-50%) translateY(20px); 147 | } 148 | } 149 | 150 | .hamburger { 151 | display: none; 152 | } 153 | 154 | .mobile .hamburger { 155 | display: flex; 156 | flex-direction: column; 157 | padding: 20px 0; 158 | cursor: pointer; 159 | } 160 | 161 | .mobile .hamburger span { 162 | background: var(--pure); 163 | width: 28px; 164 | height: 2px; 165 | margin-bottom: 8px; 166 | } 167 | 168 | .mobile ul.nav-list { 169 | background: -webkit-linear-gradient(45deg, #434343, #000000); 170 | background: linear-gradient(45deg, #434343, #000000); 171 | position: fixed; 172 | left: 0; 173 | top: 0; 174 | width: 100%; 175 | height: 100%; 176 | display: flex; 177 | flex-direction: column; 178 | padding-top: 80px; 179 | opacity: 0; 180 | pointer-events: none; 181 | transition: all .3s ease-in-out; 182 | } 183 | 184 | .hamburger, .brand { 185 | z-index: 9999; 186 | } 187 | 188 | .mobile ul.nav-list.open { 189 | opacity: 1; 190 | pointer-events: auto; 191 | } 192 | 193 | .mobile .hamburger span { 194 | transform-origin: left; 195 | transition: all .3s ease-in-out; 196 | } 197 | 198 | .mobile ul.nav-list li a { 199 | font-size: 20px; 200 | } 201 | 202 | .mobile ul.dropdown-list { 203 | position: relative; 204 | background: transparent; 205 | text-align: center; 206 | height: 0; 207 | overflow-y: hidden; 208 | transition: opacity 1s ease-in-out; 209 | padding-top: 0; 210 | } 211 | 212 | .mobile .nav-wrapper ul li:hover .dropdown-list { 213 | height: max-content; 214 | padding-top: 6px; 215 | } 216 | 217 | .mobile ul.nav-list li { 218 | margin-left: 0; 219 | text-align: center; 220 | } 221 | 222 | .mobile .nav-wrapper ul.dropdown-list li a { 223 | color: var(--dark-gray); 224 | } 225 | 226 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Responsive navbar 8 | 9 | 10 | 11 | 12 | 51 |
52 |
53 |
54 |

Awesome Responsive Navbar

55 |

Lorem ipsum dolor sit amet consectetur.

56 |
57 | 58 |
59 |
60 |
61 |
62 | 63 | 64 | 65 | -------------------------------------------------------------------------------- /js/app.js: -------------------------------------------------------------------------------- 1 | 2 | window.addEventListener('resize', function(){ 3 | addRequiredClass(); 4 | }) 5 | 6 | 7 | function addRequiredClass() { 8 | if (window.innerWidth < 860) { 9 | document.body.classList.add('mobile') 10 | } else { 11 | document.body.classList.remove('mobile') 12 | } 13 | } 14 | 15 | window.onload = addRequiredClass 16 | 17 | let hamburger = document.querySelector('.hamburger') 18 | let mobileNav = document.querySelector('.nav-list') 19 | 20 | let bars = document.querySelectorAll('.hamburger span') 21 | 22 | let isActive = false 23 | 24 | hamburger.addEventListener('click', function() { 25 | mobileNav.classList.toggle('open') 26 | if(!isActive) { 27 | bars[0].style.transform = 'rotate(45deg)' 28 | bars[1].style.opacity = '0' 29 | bars[2].style.transform = 'rotate(-45deg)' 30 | isActive = true 31 | } else { 32 | bars[0].style.transform = 'rotate(0deg)' 33 | bars[1].style.opacity = '1' 34 | bars[2].style.transform = 'rotate(0deg)' 35 | isActive = false 36 | } 37 | 38 | 39 | }) --------------------------------------------------------------------------------