Skip to content

Commit b51f06c

Browse files
HuXn-WebDevHuXn-WebDev
committed
Creative Menus
1 parent 23c4dc7 commit b51f06c

File tree

6 files changed

+271
-0
lines changed

6 files changed

+271
-0
lines changed

‎06. Creative Menus/01. Menu/index.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="UTF-8" />
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Creative Menu Effect</title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
<body>
10+
<section class="container">
11+
<ul>
12+
<li><a href="">Home</a></li>
13+
<li><a href="">About</a></li>
14+
<li><a href="">Services</a></li>
15+
<li><a href="">Portfolio</a></li>
16+
<li><a href="">Contact</a></li>
17+
</ul>
18+
</section>
19+
</body>
20+
</html>

‎06. Creative Menus/01. Menu/style.css‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
* {
2+
padding: 0;
3+
margin: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
.container {
8+
height: 100vh;
9+
display: flex;
10+
justify-content: center;
11+
align-items: center;
12+
font-family: sans-serif;
13+
background: #000;
14+
}
15+
16+
ul {
17+
padding: 0;
18+
margin: 0;
19+
display: flex;
20+
flex-wrap: wrap;
21+
text-align: center;
22+
}
23+
24+
ul li {
25+
list-style: none;
26+
}
27+
28+
ul li a {
29+
text-decoration: none;
30+
color: #fff;
31+
font-size: 22px;
32+
padding: 1rem 2rem;
33+
position: relative;
34+
}
35+
36+
a:before {
37+
content: "";
38+
position: absolute;
39+
top: 0;
40+
left: 0;
41+
width: 100%;
42+
height: 2px;
43+
background: #fff;
44+
transform: scaleX(0);
45+
transition: all 1s;
46+
transform-origin: left;
47+
}
48+
49+
ul li a:hover:before,
50+
ul li a:hover:after {
51+
transform: scaleX(1);
52+
}
53+
54+
a:after {
55+
content: "";
56+
position: absolute;
57+
bottom: 0;
58+
left: 0;
59+
width: 100%;
60+
height: 2px;
61+
background: #fff;
62+
transform: scaleX(0);
63+
transition: all 1s;
64+
transform-origin: right;
65+
}

‎06. Creative Menus/02. Menu/index.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="UTF-8" />
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Creative Menu Effect</title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
<body>
10+
<div class="container">
11+
<ul>
12+
<li><a class="list-items" href="">Home</a></li>
13+
<li><a class="list-items" href="">About</a></li>
14+
<li><a class="list-items" href="">Services</a></li>
15+
<li><a class="list-items" href="">Team</a></li>
16+
<li><a class="list-items" href="">Contact</a></li>
17+
</ul>
18+
</div>
19+
</body>
20+
</html>

‎06. Creative Menus/02. Menu/style.css‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
* {
2+
padding: 0;
3+
margin: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
.container {
8+
height: 100vh;
9+
display: flex;
10+
justify-content: center;
11+
align-items: center;
12+
font-family: sans-serif;
13+
}
14+
15+
ul {
16+
margin: 0;
17+
padding: 0;
18+
display: flex;
19+
}
20+
21+
li {
22+
list-style: none;
23+
}
24+
25+
.list-items {
26+
position: relative;
27+
display: block;
28+
padding: 15px 30px;
29+
text-decoration: none;
30+
text-transform: uppercase;
31+
color: #000;
32+
font-size: 22px;
33+
font-weight: bold;
34+
transition: 1s;
35+
}
36+
37+
.list-items:before {
38+
content: "";
39+
position: absolute;
40+
top: 0;
41+
left: 0;
42+
width: 100%;
43+
height: 100%;
44+
opacity: 0;
45+
transform: scaleY(2);
46+
transition: 1s;
47+
border-top: 2px solid crimson;
48+
border-bottom: 2px solid crimson;
49+
}
50+
51+
.list-items:hover:before {
52+
transform: scaleY(1.2);
53+
opacity: 1;
54+
}
55+
56+
.list-items:after {
57+
content: "";
58+
background: crimson;
59+
position: absolute;
60+
top: 2;
61+
left: 0;
62+
width: 100%;
63+
height: 100%;
64+
transition: 1s;
65+
transform: scale(0);
66+
z-index: -1;
67+
}
68+
69+
.list-items:hover:after {
70+
transform: scale(1);
71+
}
72+
73+
.list-items:hover {
74+
color: #fff;
75+
}

‎06. Creative Menus/03. Menu/index.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="UTF-8" />
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Creative Menu Effect</title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
<body>
10+
<div class="container">
11+
<ul>
12+
<li><a href="" class="list-items">Home</a></li>
13+
<li><a href="" class="list-items">About</a></li>
14+
<li><a href="" class="list-items">Services</a></li>
15+
<li><a href="" class="list-items">Team</a></li>
16+
<li><a href="" class="list-items">Contact</a></li>
17+
</ul>
18+
</div>
19+
</body>
20+
</html>

‎06. Creative Menus/03. Menu/style.css‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
* {
2+
padding: 0;
3+
margin: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
.container {
8+
height: 100vh;
9+
display: flex;
10+
justify-content: center;
11+
align-items: center;
12+
font-family: sans-serif;
13+
background: #000;
14+
}
15+
16+
ul {
17+
display: flex;
18+
}
19+
20+
li {
21+
list-style: none;
22+
}
23+
24+
ul li a {
25+
color: #fff;
26+
font-size: 2rem;
27+
text-decoration: none;
28+
padding: 0.4rem 1rem;
29+
margin: 0 10px;
30+
position: relative;
31+
transition: all 0.5s;
32+
text-transform: uppercase;
33+
}
34+
35+
.list-items:before {
36+
content: "";
37+
position: absolute;
38+
bottom: 12px;
39+
left: 12px;
40+
width: 12px;
41+
height: 12px;
42+
border: 3px solid white;
43+
border-width: 0 0 3px 3px;
44+
opacity: 0;
45+
transition: all 0.6s;
46+
}
47+
48+
.list-items:hover:before {
49+
opacity: 1;
50+
bottom: -8px;
51+
left: -8px;
52+
}
53+
54+
.list-items:after {
55+
content: "";
56+
position: absolute;
57+
top: 0;
58+
right: 0;
59+
width: 12px;
60+
height: 12px;
61+
border: 3px solid white;
62+
border-width: 3px 3px 0 0;
63+
opacity: 0;
64+
transition: all 0.6s;
65+
}
66+
67+
.list-items:hover:after {
68+
opacity: 1;
69+
top: -8px;
70+
right: -8px;
71+
}

0 commit comments

Comments
 (0)