Skip to content

Commit ddf79d4

Browse files
hyeondo-janghyeondo-jang
committed
FEAT: add hamburger menu for mobile navigation
1 parent 52145c4 commit ddf79d4

File tree

6 files changed

+162
-0
lines changed

6 files changed

+162
-0
lines changed

‎contact.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -108,6 +108,22 @@
108108
object-fit: contain;
109109
opacity: 1;
110110
}
111+
112+
.menu-toggle {
113+
display: none;
114+
background: none;
115+
border: none;
116+
font-size: 1.5em;
117+
cursor: pointer;
118+
color: #374151;
119+
padding: 0;
120+
line-height: 1;
121+
margin-bottom: 4px;
122+
}
123+
124+
nav.collapsed {
125+
display: none;
126+
}
111127
</style>
112128
</head>
113129
<body>
@@ -152,5 +168,16 @@ <h2>Contact</h2>
152168
</footer>
153169

154170
</div>
171+
<script>
172+
if (window.screen.width < 640) {
173+
var toggle = document.querySelector('.menu-toggle');
174+
var nav = document.querySelector('nav');
175+
toggle.style.display = 'block';
176+
nav.classList.add('collapsed');
177+
toggle.addEventListener('click', function() {
178+
nav.classList.toggle('collapsed');
179+
});
180+
}
181+
</script>
155182
</body>
156183
</html>

‎group.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -205,6 +205,22 @@
205205
object-fit: contain;
206206
opacity: 1;
207207
}
208+
209+
.menu-toggle {
210+
display: none;
211+
background: none;
212+
border: none;
213+
font-size: 1.5em;
214+
cursor: pointer;
215+
color: #374151;
216+
padding: 0;
217+
line-height: 1;
218+
margin-bottom: 4px;
219+
}
220+
221+
nav.collapsed {
222+
display: none;
223+
}
208224
</style>
209225
</head>
210226
<body>
@@ -362,5 +378,16 @@ <h3>Alumni</h3>
362378
</footer>
363379

364380
</div>
381+
<script>
382+
if (window.screen.width < 640) {
383+
var toggle = document.querySelector('.menu-toggle');
384+
var nav = document.querySelector('nav');
385+
toggle.style.display = 'block';
386+
nav.classList.add('collapsed');
387+
toggle.addEventListener('click', function() {
388+
nav.classList.toggle('collapsed');
389+
});
390+
}
391+
</script>
365392
</body>
366393
</html>

‎hiring.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -146,6 +146,22 @@
146146
object-fit: contain;
147147
opacity: 1;
148148
}
149+
150+
.menu-toggle {
151+
display: none;
152+
background: none;
153+
border: none;
154+
font-size: 1.5em;
155+
cursor: pointer;
156+
color: #374151;
157+
padding: 0;
158+
line-height: 1;
159+
margin-bottom: 4px;
160+
}
161+
162+
nav.collapsed {
163+
display: none;
164+
}
149165
</style>
150166
</head>
151167
<body>
@@ -239,5 +255,16 @@ <h2 class="red-title">All</h2>
239255
</footer>
240256

241257
</div>
258+
<script>
259+
if (window.screen.width < 640) {
260+
var toggle = document.querySelector('.menu-toggle');
261+
var nav = document.querySelector('nav');
262+
toggle.style.display = 'block';
263+
nav.classList.add('collapsed');
264+
toggle.addEventListener('click', function() {
265+
nav.classList.toggle('collapsed');
266+
});
267+
}
268+
</script>
242269
</body>
243270
</html>

‎index.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -182,6 +182,22 @@
182182
object-fit: contain;
183183
opacity: 1;
184184
}
185+
186+
.menu-toggle {
187+
display: none;
188+
background: none;
189+
border: none;
190+
font-size: 1.5em;
191+
cursor: pointer;
192+
color: #374151;
193+
padding: 0;
194+
line-height: 1;
195+
margin-bottom: 4px;
196+
}
197+
198+
nav.collapsed {
199+
display: none;
200+
}
185201
</style>
186202
</head>
187203
<body>
@@ -292,5 +308,16 @@ <h3>Acknowledgements</h3>
292308
</footer>
293309

294310
</div>
311+
<script>
312+
if (window.screen.width < 640) {
313+
var toggle = document.querySelector('.menu-toggle');
314+
var nav = document.querySelector('nav');
315+
toggle.style.display = 'block';
316+
nav.classList.add('collapsed');
317+
toggle.addEventListener('click', function() {
318+
nav.classList.toggle('collapsed');
319+
});
320+
}
321+
</script>
295322
</body>
296323
</html>

‎publications.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -150,6 +150,22 @@
150150
object-fit: contain;
151151
opacity: 1;
152152
}
153+
154+
.menu-toggle {
155+
display: none;
156+
background: none;
157+
border: none;
158+
font-size: 1.5em;
159+
cursor: pointer;
160+
color: #374151;
161+
padding: 0;
162+
line-height: 1;
163+
margin-bottom: 4px;
164+
}
165+
166+
nav.collapsed {
167+
display: none;
168+
}
153169
</style>
154170
</head>
155171
<body>
@@ -416,5 +432,16 @@ <h2>Publications</h2>
416432
</footer>
417433

418434
</div>
435+
<script>
436+
if (window.screen.width < 640) {
437+
var toggle = document.querySelector('.menu-toggle');
438+
var nav = document.querySelector('nav');
439+
toggle.style.display = 'block';
440+
nav.classList.add('collapsed');
441+
toggle.addEventListener('click', function() {
442+
nav.classList.toggle('collapsed');
443+
});
444+
}
445+
</script>
419446
</body>
420447
</html>

‎research.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -152,6 +152,22 @@
152152
width: auto;
153153
object-fit: contain;
154154
}
155+
156+
.menu-toggle {
157+
display: none;
158+
background: none;
159+
border: none;
160+
font-size: 1.5em;
161+
cursor: pointer;
162+
color: #374151;
163+
padding: 0;
164+
line-height: 1;
165+
margin-bottom: 4px;
166+
}
167+
168+
nav.collapsed {
169+
display: none;
170+
}
155171
</style>
156172
</head>
157173
<body>
@@ -245,5 +261,16 @@ <h2>Collaborators</h2>
245261
</footer>
246262

247263
</div>
264+
<script>
265+
if (window.screen.width < 640) {
266+
var toggle = document.querySelector('.menu-toggle');
267+
var nav = document.querySelector('nav');
268+
toggle.style.display = 'block';
269+
nav.classList.add('collapsed');
270+
toggle.addEventListener('click', function() {
271+
nav.classList.toggle('collapsed');
272+
});
273+
}
274+
</script>
248275
</body>
249276
</html>

0 commit comments

Comments
 (0)