Skip to content

Commit 3962e01

Browse files
reveurguyreveurguy
authored
Merge pull request #54 from reveurguy/hamburger
editing hamburger 4
2 parents 30236df + ec42b24 commit 3962e01

File tree

2 files changed

+168
-25
lines changed

2 files changed

+168
-25
lines changed

‎_includes/navbar.html

Lines changed: 54 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,77 @@
1-
<nav class="navbar navbar-expand-lg navbar-dark">
1+
<!-- <nav class="navbar navbar-expand-lg navbar-dark"> -->
2+
<section id="header">
3+
<div class="header container">
4+
<div class="nav-bar">
25
<div class="d-flex d-none d-sm-block d-md-block d-lg-none">
3-
<div class="navbar-header">
4-
<a class="navbar-brand" href="/"><img src="/assets/img/logo/logo.png" style="height: 70px; width: 70px; background-color: white;" class="mr-3">Py Contributors</a>
6+
<div class="brand">
7+
<a class="" href="/"><img src="/assets/img/logo/logo.png" style="height: 70px; width: 70px; background-color: white;" class="mr-3">Py Contributors</a>
58
</div>
69
</div>
7-
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation">
8-
<span class="navbar-toggler-icon"></span>
9-
</button>
10+
<!-- <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation"> -->
11+
<!-- <span class="navbar-toggler-icon"></span> -->
12+
<!-- </button> -->
1013

11-
<div class="collapse navbar-collapse" id="navbarColor03">
12-
<div class="container">
13-
<div class="ml-auto mr-4">
14-
<ul class="navbar-nav">
14+
<!-- <div class="collapse navbar-collapse" id="navbarColor03"> -->
15+
<!-- <div class="container"> -->
16+
<!-- <div class="ml-auto mr-4"> -->
17+
<div class="nav-list">
18+
<div class="hamburger"><div class="bar"></div></div>
19+
<ul >
1520
{% if page.active == "home" %}
16-
<li class="nav-item active"><a class="nav-link" href="/">Home</a></li>
21+
<li class=" active"><a class="" href="/" data-after="Home">Home</a></li>
1722
{% else %}
18-
<li class="nav-item"><a class="nav-link" href="/">Home</a></li>
23+
<li class=""><a class="" href="/" data-after="Home">Home</a></li>
1924
{% endif %}
2025

2126
{% if page.active == "join-us" %}
22-
<li class="nav-item active"><a class="nav-link" href="/join-us/index.html">Join Us</a></li>
27+
<li class=" active"><a class="" href="/join-us/index.html" data-after="Join Us">Join Us</a></li>
2328
{% else %}
24-
<li class="nav-item"><a class="nav-link" href="/join-us/index.html">Join Us</a></li>
29+
<li class=""><a class="" href="/join-us/index.html" data-after="Join Us">Join Us</a></li>
2530
{% endif %}
26-
</ul>
27-
</div>
28-
<div class="navbar-header brandShow">
31+
<!-- </ul>
32+
</div> -->
33+
<!-- <div class="navbar-header brandShow">
2934
<a class="navbar-brand" href="/"><img src="/assets/img/logo/logo.png" style="height: 70px; width: 70px; background-color: white;" class="mr-3">Py Contributors</a>
30-
</div>
35+
</div> -->
3136

32-
<ul class="navbar-nav mr-auto ml-4">
37+
<!-- <ul class="navbar-nav mr-auto ml-4"> -->
3338

3439
{% if page.active == "updates" %}
35-
<li class="nav-item active"><a class="nav-link" href="/updates/index.html">Updates</a></li>
40+
<li class=" active"><a class="" href="/updates/index.html" data-after="Updates">Updates</a></li>
3641
{% else %}
37-
<li class="nav-item"><a class="nav-link" href="/updates/index.html">Updates</a></li>
42+
<li class=""><a class="" href="/updates/index.html" data-after="Updates">Updates</a></li>
3843
{% endif %}
3944

4045
{% if page.active == "developers" %}
41-
<li class="nav-item active"><a class="nav-link" href="/developers/index.html">Developers</a></li>
46+
<li class=" active"><a class="" href="/developers/index.html" data-after="Developers">Developers</a></li>
4247
{% else %}
43-
<li class="nav-item"><a class="nav-link" href="/developers/index.html">Developers</a></li>
48+
<li class=""><a class="" href="/developers/index.html" data-after="Developers">Developers</a></li>
4449
{% endif %}
4550
</ul>
4651
</div>
47-
</div>
48-
</nav>
52+
<!-- </div> -->
53+
</div>
54+
</div>
55+
</section>
56+
<!-- </nav> -->
57+
58+
<script>
59+
const hamburger = document.querySelector('.header .nav-bar .nav-list .hamburger');
60+
const mobile_menu = document.querySelector('.header .nav-bar .nav-list ul');
61+
const menu_item = document.querySelectorAll('.header .nav-bar .nav-list ul li a');
62+
const header = document.querySelector('.header.container');
63+
64+
hamburger.addEventListener('click', () => {
65+
hamburger.classList.toggle('active');
66+
mobile_menu.classList.toggle('active');
67+
});
68+
69+
menu_item.forEach((item) => {
70+
item.addEventListener('click', () => {
71+
hamburger.classList.toggle('active');
72+
mobile_menu.classList.toggle('active');
73+
});
74+
});
75+
76+
77+
</script>

‎assets/css/main.css

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -159,3 +159,117 @@ background-attachment: fixed !important;
159159
margin-left: 50%;
160160
}
161161
}
162+
163+
/* Chnages*/
164+
165+
#header .nav-bar {
166+
display: flex;
167+
align-items: center;
168+
justify-content: space-between;
169+
width: 100%;
170+
height: 100%;
171+
max-width: 1300px;
172+
padding: 0 10px;
173+
}
174+
#header .nav-list ul {
175+
list-style: none;
176+
position: absolute;
177+
background-color: rgb(31, 30, 30);
178+
width: 100vw;
179+
height: 100vh;
180+
left: 100%;
181+
top: 0;
182+
display: flex;
183+
flex-direction: column;
184+
justify-content: center;
185+
align-items: center;
186+
z-index: 1;
187+
overflow-x: hidden;
188+
transition: .5s ease left;
189+
}
190+
#header .nav-list ul.active {
191+
left: 0%;
192+
}
193+
#header .nav-list ul a {
194+
font-size: 2.5rem;
195+
font-weight: 500;
196+
letter-spacing: .2rem;
197+
text-decoration: none;
198+
color: white;
199+
text-transform: uppercase;
200+
padding: 20px;
201+
display: block;
202+
}
203+
#header .nav-list ul a::after {
204+
content: attr(data-after);
205+
position: absolute;
206+
top: 50%;
207+
left: 50%;
208+
transform: translate(-50%, -50%) scale(0);
209+
color: rgba(240, 248, 255, 0.021);
210+
font-size: 13rem;
211+
letter-spacing: 50px;
212+
z-index: -1;
213+
transition: .3s ease letter-spacing;
214+
}
215+
#header .nav-list ul li:hover a::after {
216+
transform: translate(-50%, -50%) scale(1);
217+
letter-spacing: initial;
218+
}
219+
#header .nav-list ul li:hover a {
220+
color: crimson;
221+
}
222+
#header .hamburger {
223+
height: 60px;
224+
width: 60px;
225+
display: inline-block;
226+
border: 3px solid white;
227+
border-radius: 50%;
228+
position: relative;
229+
display: flex;
230+
align-items: center;
231+
justify-content: center;
232+
z-index: 100;
233+
cursor: pointer;
234+
transform: scale(.8);
235+
margin-right: 20px;
236+
}
237+
#header .hamburger:after {
238+
position: absolute;
239+
content: '';
240+
height: 100%;
241+
width: 100%;
242+
border-radius: 50%;
243+
border: 3px solid white;
244+
animation: hamburger_puls 1s ease infinite;
245+
}
246+
#header .hamburger .bar {
247+
height: 2px;
248+
width: 30px;
249+
position: relative;
250+
background-color: white;
251+
z-index: -1;
252+
}
253+
#header .hamburger .bar::after,
254+
#header .hamburger .bar::before {
255+
content: '';
256+
position: absolute;
257+
height: 100%;
258+
width: 100%;
259+
left: 0;
260+
background-color: white;
261+
transition: .3s ease;
262+
transition-property: top, bottom;
263+
}
264+
#header .hamburger .bar::after {
265+
top: 8px;
266+
}
267+
#header .hamburger .bar::before {
268+
bottom: 8px;
269+
}
270+
#header .hamburger.active .bar::before {
271+
bottom: 0;
272+
}
273+
#header .hamburger.active .bar::after {
274+
top: 0;
275+
}

0 commit comments

Comments
 (0)