├── .gitignore
├── _config.yml
├── README.md
├── js
└── app.js
├── index.html
└── css
└── style.css
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 |
--------------------------------------------------------------------------------
/_config.yml:
--------------------------------------------------------------------------------
1 | theme: jekyll-theme-cayman
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 | })
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Responsive navbar
8 |
9 |
10 |
11 |
12 |
51 |
52 |
61 |
62 |
63 |
64 |
65 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------