Skip to content

Commit 3b49c88

Browse files
RakibRahmanRakibRahman
committed
Menu Hover Effects Using Flex
1 parent d563a31 commit 3b49c88

File tree

2 files changed

+89
-0
lines changed

2 files changed

+89
-0
lines changed

‎CSS Flexbox/Projects/flex-menu-hover/index.html

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Menu Hover Effects Using Flex</title>
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
11+
<body>
12+
<div class="navigation">
13+
<ul>
14+
<li><a href="#" data-text="Home">Home</a></li>
15+
<li><a href="#" data-text="About">About</a></li>
16+
<li><a href="#" data-text="Contact">Contact</a></li>
17+
<li><a href="#" data-text="Services">Services</a></li>
18+
<li><a href="#" data-text="Supports">Supports</a></li>
19+
</ul>
20+
</div>
21+
</body>
22+
23+
</html>

‎CSS Flexbox/Projects/flex-menu-hover/style.css

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
.navigation {
7+
display: flex;
8+
justify-content: center;
9+
align-items: center;
10+
min-height: 100vh;
11+
}
12+
.navigation ul {
13+
list-style: none;
14+
}
15+
.navigation ul li a {
16+
text-decoration: none;
17+
font: normal normal 700 3em/100% "ribeye", sans-serif;
18+
color: #f14ef1;
19+
padding: 10px 20px;
20+
display: inline-flex;
21+
}
22+
.navigation ul:hover li a {
23+
color: #0003;
24+
}
25+
.navigation ul li:hover a {
26+
color: #000;
27+
background: springgreen;
28+
border-radius: 20px;
29+
}
30+
.navigation ul li a::before {
31+
content: "";
32+
position: absolute;
33+
top: 50%;
34+
left: 50%;
35+
transform: translate(
36+
-50%,
37+
-50%
38+
); /*to center ::before "content" while hovering*/
39+
display: flex;
40+
justify-content: center;
41+
align-items: center;
42+
border-radius: 90%;
43+
color: rgba(211, 8, 8, 0.829);
44+
opacity: 0;
45+
font-weight: 900;
46+
text-transform: uppercase;
47+
letter-spacing: 500px; /*for transition effect*/
48+
font-size: 4.8em;
49+
transition: letter-spacing 0.5s, left 0.5s;
50+
z-index: -1; /*to ul li items properly while hovering*/
51+
}
52+
.navigation ul li a:hover::before {
53+
content: attr(data-text);
54+
opacity: 1;
55+
letter-spacing: 10px;
56+
width: 100%;
57+
height: 100%;
58+
}
59+
.navigation ul li:nth-child(even) a::before {
60+
background: rgb(2, 216, 37);
61+
color: whitesmoke;
62+
}
63+
.navigation ul li:nth-child(odd) a::before {
64+
background: #f14e0d;
65+
color: whitesmoke;
66+
}

0 commit comments

Comments
 (0)