Skip to content

Commit b60b13a

Browse files
brunorodrisbrunorodris
committed
Como criar um Menu de Navegação Mágico
1 parent dfad1f7 commit b60b13a

File tree

3 files changed

+166
-0
lines changed

3 files changed

+166
-0
lines changed

‎13 - navegação magica/index.html‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<!DOCTYPE html>
2+
<html lang="pt-br">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
8+
<link rel="stylesheet" href="style.css">
9+
<title>Navegação mágica</title>
10+
</head>
11+
<body>
12+
13+
<div class="navegacao">
14+
15+
<ul>
16+
<li class="lista ativo">
17+
<a href="#">
18+
<span class="icone"><i class="bi bi-house-door-fill"></i></span>
19+
<span class="texto">Início</span>
20+
</a>
21+
</li>
22+
<li class="lista">
23+
<a href="#">
24+
<span class="icone"><i class="bi bi-cart-fill"></i></span>
25+
<span class="texto">Carrinho</span>
26+
</a>
27+
</li>
28+
<li class="lista">
29+
<a href="#">
30+
<span class="icone"><i class="bi bi-bag-fill"></i></span>
31+
<span class="texto">Ofertas</span>
32+
</a>
33+
</li>
34+
<li class="lista">
35+
<a href="#">
36+
<span class="icone"><i class="bi bi-person-fill"></i></span>
37+
<span class="texto">Perfil</span>
38+
</a>
39+
</li>
40+
<li class="lista">
41+
<a href="#">
42+
<span class="icone"><i class="bi bi-question-circle-fill"></i></span>
43+
<span class="texto">Ajuda</span>
44+
</a>
45+
</li>
46+
<div class="indicador"></div>
47+
</ul>
48+
</div><!--navegacao-->
49+
50+
<script src="menu.js"></script>
51+
</body>
52+
</html>

‎13 - navegação magica/menu.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
2+
const lista = document.querySelectorAll('.lista')
3+
4+
function ativaLink(){
5+
for(let i of lista){
6+
i.classList.remove('ativo')
7+
}
8+
this.classList.add('ativo')
9+
}
10+
11+
for(let i of lista){
12+
i.addEventListener('click', ativaLink)
13+
}

‎13 - navegação magica/style.css‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
2+
*{
3+
margin: 0;
4+
padding: 0;
5+
box-sizing: border-box;
6+
font-family: "Sora", sans-serif;
7+
}
8+
9+
body{
10+
height: 100vh;
11+
background-color: #282828;
12+
display: flex;
13+
align-items: center;
14+
justify-content: center;
15+
}
16+
17+
.navegacao{
18+
width: 100%;
19+
height: 70px;
20+
background-color: #fff;
21+
display: flex;
22+
justify-content: center;
23+
align-items: center;
24+
position: relative;
25+
}
26+
27+
.navegacao ul{
28+
width: 350px;
29+
display: flex;
30+
}
31+
32+
.navegacao ul li{
33+
width: 70px;
34+
height: 70px;
35+
list-style-type: none;
36+
position: relative;
37+
z-index: 1;
38+
}
39+
40+
.navegacao ul li a{
41+
width: 100%;
42+
display: flex;
43+
align-items: center;
44+
justify-content: center;
45+
flex-direction: column;
46+
text-decoration: none;
47+
position: relative;
48+
}
49+
50+
.navegacao ul li a .icone{
51+
display: block;
52+
line-height: 75px;
53+
font-size: 20px;
54+
color: #282828;
55+
position: relative;
56+
transition: .5s;
57+
}
58+
59+
.navegacao ul li a .texto{
60+
color: #282828;
61+
position: absolute;
62+
opacity: 0;
63+
transition: .5s;
64+
transform: translateY(20px);
65+
}
66+
67+
.navegacao ul li.ativo a .icone{
68+
transform: translateY(-35px);
69+
color: #FE4701;
70+
}
71+
72+
.navegacao ul li.ativo a .texto{
73+
opacity: 1;
74+
transform: translateY(10px);
75+
}
76+
77+
.indicador{
78+
width: 70px;
79+
height: 70px;
80+
background-color: #fff;
81+
border-radius: 50%;
82+
position: absolute;
83+
top: -50%;
84+
transition: .5s;
85+
}
86+
87+
.navegacao ul li:nth-child(1).ativo ~ .indicador{
88+
transform: translateX(calc(70px * 0));
89+
}
90+
.navegacao ul li:nth-child(2).ativo ~ .indicador{
91+
transform: translateX(calc(70px * 1));
92+
}
93+
.navegacao ul li:nth-child(3).ativo ~ .indicador{
94+
transform: translateX(calc(70px * 2));
95+
}
96+
.navegacao ul li:nth-child(4).ativo ~ .indicador{
97+
transform: translateX(calc(70px * 3));
98+
}
99+
.navegacao ul li:nth-child(5).ativo ~ .indicador{
100+
transform: translateX(calc(70px * 4));
101+
}

0 commit comments

Comments
 (0)