-
Notifications
You must be signed in to change notification settings - Fork 0
/
processNotes.txt
190 lines (145 loc) · 7.91 KB
/
processNotes.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
Responsive Burger Navigation Process Notes
==========================================
STEP 1: Create a burger icon in html
====================================
To do this, all you need to do is create a "hamberger div" with 3 "line" divs.
This will be invisible at larger media sizes.
Also remember that this is INSIDE the nav element.
-----------------------------------------------
<nav>
<div class="hamberger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</nav>
-----------------------------------------------
STEP 2: Then add the links that you want for your navigation with an unordered list of list items.
=================================================================================================
----------------------------------------------
<nav>
<div class="hamberger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<ul class="nav-links">
<li><a class="link" href="#">Discover</a></li>
<li><a class="link" href="#">Services</a></li>
<li><a class="link" href="#">Contact</a></li>
</ul>
</nav>
----------------------------------------------
STEP 3: Add stylizations to the navigation
==========================================
The styling below will be used for larger viewport sizes.
-----------------------------------------------------
nav {
height: 10vh; /* nav bar relative to the rest of the viewport (90vh)*/
background: rgb(36, 35, 35);
}
.nav-links {
display: flex; /* display elements side by side */
list-style: none; /* remove default stylization (i.e. bullet points*/
width: 50%; /* make the wdith of nav-links 50% of the nav bar itself (i.e. XXXXXXXX--------*/
height: 100%; /* make it 100% of the nav-links box*/
align-items: center; /* position the links vertically in the center */
justify-content: space-around; /* space all the links so they are evenly spaced in the nav-links box */
margin-left: auto; /* margin-left auto will position the links to the far RIGHT of the nav-links section*/
}
.nav-links .link { /* For each link in the nav link... */
color: white; /* text is white...*/
text-decoration: none; /* remove deafult style (i.e. underline)*/
}
-----------------------------------------------------
STEP 4: Add media query for 768 px and below
=============================================
-------------------------------------------
@media screen and (max-width: 768px) { /* media query when the screen is at or BELOW 768 px...*/
}
-------------------------------------------
STEP 5: style the navigation menu for smaller screen
=====================================================
---------------------------------------------------------
@media screen and (max-width: 768px) { /* media query when the screen is at or BELOW 768 px...*/
.nav-links {
position: fixed; /* with position: fixed, element is relative to viewport and stays in the same place even on scroll*/
background: rgb(36, 35, 35); /* color (same as the nav bar) */
height: 100vh; /* height is 100% if the viewport */
width: 100%; /* width is 100% of the viewport */
flex-direction: column; /* let the flex direction be stacked on top of each other*/
}
}
---------------------------------------------------------
STEP 6: style the burger icon
=============================
for this step, it would be useful to add a "display: none" so that you can see behind the nav-links stylization you just created.
Then, remember to set nav to relative so that we can freely position the hamburger icon.
Also, remember to remove the "display: none" from the nav-links in your media query to see the menu again.
-----------------------------------------------------------------
nav {
position: relative; /* since we want to place our burger menu on the far right we set position to relative...*/
}
.hamburger { /* and because the nav has a realtive position, the hamburger can be moved freely...*/
position: absolute; /* outside normal document flow */
cursor: pointer; /* on hover, a pointer will show */
right: 5%; /* and positioned 5% from the right of the window */
top: 50%; /* 1. to center burger icon, set 50% (i.e. mid) */
transform: translate(-5%, -50%); /* 2. and transform translate with offset*/
}
-----------------------------------------------------------------
STEP 7: Add animation:
======================
To add an animation, we have to use "clip-path" so that we can essentially block-in what we see. So first, you need to add the clip=path property
to your element you want to animate, which in this case is the nav-links element. The shape we use now is a circle, so add that in.
------------------------
clip-path: cirle();
------------------------
Next, you want to add the position you want the shape to be at with "at" with percentages
------------------------------
position from top
|
clip-path: cirle(100px at 90% -10%);
|
position from right
------------------------------
Also, because compatibility with the clip-path property might be lacking, add a webkit property as well.
--------------------------------
-webkit-clip-path: circle(100px at 90% -10%);
--------------------------------
Then, add a transition
-----------------------------------
transition: all 1s ease-out;
-----------------------------------
STEP 8: Create classes for JS for open and close animations
===========================================================
-----------------------------------------------------
.nav-links.open {
clip-path: circle(1000px at 90% -10%); /* add the clip-path property with a circle that starts at the top right*/
-webkit-clip-path: circle(1000px at 90% -10%); /* and to ensure compatibility, add a webkit*/
}
-----------------------------------------------------
STEP 9: JS for burger
======================
-----------------------------------------------------------------------------
"use strict";
const hamburger = document.querySelector('.hamburger'); // selects hamburger icon.
const navLinks = document.querySelector('.nav-links'); // selects nav-links element
const links = document.querySelectorAll(".nav-links li"); // selects all the li's in nav-links
hamburger.addEventListener("click", (event) => { // on click of the hamburger icon...
navLinks.classList.toggle('open'); // toggle the "open" style
});
-----------------------------------------------------------------------------
STEP 10: JS for link animation
==============================
-----------------------------------------------------------------------------
hamburger.addEventListener("click", (event) => { // on click of the hamburger icon...
navLinks.classList.toggle('open'); // toggle the "open" style
links.forEach(link => {
link.classList.toggle('fade');
});
});
-----------------------------------------------------------------------------
resources:
==========
https://bennettfeely.com/clippy/ -- good generator for shapes of menu