Skip to content

Commit 15a9d03

Browse files
author
guldus98
committed
html, css and js
1 parent 658c446 commit 15a9d03

File tree

3 files changed

+368
-0
lines changed

3 files changed

+368
-0
lines changed

‎Line Menu Animation/Screenshot_1.png

4.52 KB
Loading

‎Line Menu Animation/lineMenu.css

Lines changed: 306 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,306 @@
1+
body , html {
2+
padding: 0;
3+
margin: 0;
4+
background: #1a1a1a;
5+
}
6+
.container {
7+
position: absolute;
8+
top: 50%;
9+
left: 50%;
10+
width: 400px;
11+
height: 400px;
12+
margin-top: -200px;
13+
margin-left: -200px;
14+
background: none;
15+
overflow: hidden;
16+
color: #ccc;
17+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
18+
-webkit-font-smoothing: antialiased;
19+
}
20+
.center {
21+
position: absolute;
22+
top: 50%;
23+
left: 50%;
24+
transform: translate(-50%,-50%);
25+
-webkit-transform: translate(-50%,-50%);
26+
}
27+
.menu{
28+
position: absolute;
29+
width: 50px;
30+
height: 25px;
31+
top: -25px;
32+
left: -25px;
33+
cursor: pointer;
34+
}
35+
.menu .menu-top{
36+
position: absolute;
37+
width: 60px;
38+
height: 10px;
39+
background: #ff6a00;
40+
border-radius: 20px;
41+
transition: .7s;
42+
}
43+
.menu .top-line{
44+
position: absolute;
45+
width: 0;
46+
height: 3px;
47+
top: -19px;
48+
left: -40px;
49+
border-radius: 25px;
50+
background: #ccc;
51+
transition: all 1s ease-out;
52+
}
53+
.menu .menu-bottom{
54+
position: absolute;
55+
width: 60px;
56+
height: 10px;
57+
top: initial;
58+
border-radius: 20px;
59+
bottom: 0;
60+
background: #ff6a00;
61+
transition: .7s;
62+
}
63+
.menu .bottom-line{
64+
position: absolute;
65+
width: 0;
66+
height: 3px;
67+
top: 40px;
68+
right: -49px;
69+
border-radius: 25px;
70+
background: #ccc;
71+
transition: all 1s ease-out;
72+
}
73+
.menu-items {
74+
position: absolute;
75+
width: 300px;
76+
height: 20px;
77+
top: -45px;
78+
left: -185px;
79+
padding: 5px 10px;
80+
pointer-events: none;
81+
opacity: 0;
82+
transition: all 2s ease-in-out;
83+
z-index: 20
84+
}
85+
.menu-items ul{
86+
list-style: none;
87+
line-height: 20px;
88+
color: #ff6a00;
89+
text-transform: uppercase;
90+
width: 280px;
91+
display: flex;
92+
justify-content: space-between;
93+
align-items: center;
94+
font-size: 14px;
95+
}
96+
.menu-items ul li{
97+
position: relative;
98+
display: block;
99+
flex: 0 1 auto;
100+
cursor: pointer;
101+
transition: all .5s ease-in;
102+
}
103+
.menu-items ul li:hover{
104+
-webkit-transform: scale(1.2);
105+
transform: scale(1.2);
106+
}
107+
.a{
108+
color: #ccc;
109+
}
110+
/* javascript active mode */
111+
.menu.active{
112+
pointer-events: all;
113+
}
114+
.menu.active .menu-top {
115+
-webkit-animation: line-top-open 3s ease both;
116+
animation: line-top-open 3s ease both;
117+
height: 4px;
118+
}
119+
.menu.active .top-line {
120+
-webkit-animation: lightsaber-open .8s ease-in 3s both;
121+
animation: lightsaber-open .8s ease-in 3s both;
122+
}
123+
.menu.active .menu-bottom {
124+
-webkit-animation: line-bottom-open 3s ease both;
125+
animation: line-bottom-open 3s ease both;
126+
height: 4px;
127+
}
128+
.menu.active .bottom-line {
129+
-webkit-animation: lightsaber-open .8s ease-in 3s both;
130+
animation: lightsaber-open .8s ease-in 3s both;
131+
}
132+
.menu.inactive {
133+
pointer-events: all;
134+
}
135+
.menu.inactive .menu-top {
136+
-webkit-animation: line-top-close 3s ease 1s both;
137+
animation: line-top-close 3s ease 1s both;
138+
}
139+
.menu.inactive .top-line {
140+
-webkit-animation: lightsaber-close .5s ease;
141+
animation: lightsaber-close .5s ease;
142+
}
143+
.menu.inactive .menu-bottom {
144+
-webkit-animation: line-bottom-close 3s ease 1s both;
145+
animation: line-bottom-close 3s ease 1s both;
146+
}
147+
.menu.inactive .bottom-line {
148+
-webkit-animation: lightsaber-close .5s ease;
149+
animation: lightsaber-close .5s ease;
150+
}
151+
.menu-items.active {
152+
opacity: 1;
153+
pointer-events: all;
154+
transition: all 2s ease-in 2s;
155+
}
156+
157+
@-webkit-keyframes line-top-open {
158+
0% {
159+
-webkit-transform: translateY(0px) translateX(0px);
160+
transform: translateY(0px) translateX(0px);
161+
}
162+
20% {
163+
-webkit-transform: translateY(-20px);
164+
transform: translateY(-20px);
165+
}
166+
100% {
167+
-webkit-transform: translateX(-100px) translateY(-20px);
168+
transform: translateX(-100px) translateY(-20px);
169+
}
170+
}
171+
172+
@keyframes line-top-open {
173+
0% {
174+
-webkit-transform: translateY(0px) translateX(0px);
175+
transform: translateY(0px) translateX(0px);
176+
}
177+
20% {
178+
-webkit-transform: translateY(-20px);
179+
transform: translateY(-20px);
180+
}
181+
100% {
182+
-webkit-transform: translateX(-100px) translateY(-20px);
183+
transform: translateX(-100px) translateY(-20px);
184+
}
185+
}
186+
@-webkit-keyframes line-top-close {
187+
0% {
188+
-webkit-transform: translateX(-100px) translateY(-20px);
189+
transform: translateX(-100px) translateY(-20px);
190+
}
191+
20% {
192+
-webkit-transform: translateY(-20px);
193+
transform: translateY(-20px);
194+
}
195+
100% {
196+
-webkit-transform: translateX(0px) translateY(0px);
197+
transform: translateX(0px) translateY(0px);
198+
}
199+
}
200+
@keyframes line-top-close {
201+
0% {
202+
-webkit-transform: translateX(-100px) translateY(-20px);
203+
transform: translateX(-100px) translateY(-20px);
204+
}
205+
20% {
206+
-webkit-transform: translateY(-20px);
207+
transform: translateY(-20px);
208+
}
209+
100% {
210+
-webkit-transform: translateX(0px) translateY(0px);
211+
transform: translateX(0px) translateY(0px);
212+
}
213+
}
214+
@-webkit-keyframes line-bottom-open {
215+
0% {
216+
-webkit-transform: translateY(0px) translateX(0px);
217+
transform: translateY(0px) translateX(0px);
218+
}
219+
20% {
220+
-webkit-transform: translateY(20px);
221+
transform: translateY(20px);
222+
}
223+
100% {
224+
-webkit-transform: translateX(100px) translateY(20px);
225+
transform: translateX(100px) translateY(20px);
226+
}
227+
}
228+
@keyframes line-bottom-open {
229+
0% {
230+
-webkit-transform: translateY(0px) translateX(0px);
231+
transform: translateY(0px) translateX(0px);
232+
}
233+
20% {
234+
-webkit-transform: translateY(20px);
235+
transform: translateY(20px);
236+
}
237+
100% {
238+
-webkit-transform: translateX(100px) translateY(20px);
239+
transform: translateX(100px) translateY(20px);
240+
}
241+
}
242+
@-webkit-keyframes line-bottom-close {
243+
0% {
244+
-webkit-transform: translateX(100px) translateY(20px);
245+
transform: translateX(100px) translateY(20px);
246+
}
247+
20% {
248+
-webkit-transform: translateY(20px);
249+
transform: translateY(20px);
250+
}
251+
100% {
252+
-webkit-transform: translateX(0px) translateY(0px);
253+
transform: translateX(0px) translateY(0px);
254+
}
255+
}
256+
@keyframes line-bottom-close {
257+
0% {
258+
-webkit-transform: translateX(100px) translateY(20px);
259+
transform: translateX(100px) translateY(20px);
260+
}
261+
20% {
262+
-webkit-transform: translateY(20px);
263+
transform: translateY(20px);
264+
}
265+
100% {
266+
-webkit-transform: translateX(0px) translateY(0px);
267+
transform: translateX(0px) translateY(0px);
268+
}
269+
}
270+
@-webkit-keyframes lightsaber-open {
271+
0% {
272+
width: 0px;
273+
}
274+
100% {
275+
width: 202px;
276+
box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.7);
277+
}
278+
}
279+
@keyframes lightsaber-open {
280+
0% {
281+
width: 0px;
282+
}
283+
100% {
284+
width: 202px;
285+
box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.7);
286+
}
287+
}
288+
@-webkit-keyframes lightsaber-close {
289+
0% {
290+
width: 202px;
291+
box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.7);
292+
}
293+
100% {
294+
width: 0px;
295+
}
296+
}
297+
@keyframes lightsaber-close {
298+
0% {
299+
width: 202px;
300+
box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.7);
301+
}
302+
100% {
303+
width: 0px;
304+
}
305+
}
306+

‎Line Menu Animation/lineMenu.html

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<!DOCTYPE html>
2+
3+
<html>
4+
<head>
5+
<meta charset="utf-8" />
6+
<title>page</title>
7+
<link rel="stylesheet" type="text/css" href="lineMenu.css">
8+
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
9+
</head>
10+
<body>
11+
12+
<div class="container">
13+
<div class="center">
14+
<div class="menu paused">
15+
<div class="menu-top"></div>
16+
<div class="top-line"></div>
17+
<div class="menu-bottom"></div>
18+
<div class="bottom-line"></div>
19+
</div>
20+
<div class="menu-items">
21+
<ul>
22+
<li class="a">HOME</li>
23+
<li>INSTAGRAM</li>
24+
<li>WEBPAGE</li>
25+
<li>GITHUB</li>
26+
</ul>
27+
</div>
28+
</div>
29+
</div>
30+
31+
32+
<script>
33+
34+
line = document.querySelector(".menu");
35+
menu = document.querySelector(".menu-items");
36+
37+
line.addEventListener("click", function () {
38+
setTimeout(lineFunction, 200);
39+
menuToggle();
40+
})
41+
42+
function lineFunction() {
43+
if (line.classList.contains("paused") === true) {
44+
line.classList.replace("paused", "active");
45+
}
46+
else if (line.classList.contains("active") === true) {
47+
line.classList.remove("active");
48+
line.classList.add("inactive");
49+
}
50+
else {
51+
line.classList.remove("inactive");
52+
line.classList.add("active");
53+
}
54+
}
55+
56+
function menuToggle() {
57+
menu.classList.toggle("active")
58+
}
59+
60+
</script>
61+
</body>
62+
</html>

0 commit comments

Comments
 (0)