Dia 8/2019 - Menu circular

Desafio #92daysofcode que fiz no final de 2019. Nesse artigo temos o dia 8, mostrando o uso do seletor de irmão seletor + seletor.

Pré-visualização

Código

Começamos com a estrutura do HTML.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Day 8</title>
<style>
*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing:border-box; }
html { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
* { margin: 0; padding: 0; list-style: none; }
body { background: #eee; font-family: Arial, Helvetica, sans-serif; }
</style>
<link rel="stylesheet" type="text/css" href="./day-8.css">
</head>
<body>
<!-- circular menu -->
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
<nav class="menu">
<button href="#" class="menu-button">menu</button>
<ul class="menu-list">
<li class="menu-item item-1"><a class="menu-link" href="#">1</a></li>
<li class="menu-item item-2"><a class="menu-link" href="#">2</a></li>
<li class="menu-item item-3"><a class="menu-link" href="#">3</a></li>
<li class="menu-item item-4"><a class="menu-link" href="#">4</a></li>
<li class="menu-item item-5"><a class="menu-link" href="#">5</a></li>
<li class="menu-item item-6"><a class="menu-link" href="#">6</a></li>
</ul>
</nav>
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
:root { --position: -120%; --size: 2.8rem; }

.menu { align-items: center; border-radius: 50%; display: flex; height: 12rem; justify-content: center; position: relative; width: 12rem; }

.menu-list {
align-items: center;
border-radius: 50%;
display: flex;
height: calc(var(--size) * 3);
justify-content: center;
margin: auto;
position: relative;
transform-origin: center;
width: calc(var(--size) * 3);
}

.menu-item { border-radius: 50%; height: var(--size); position: absolute; transition: all 0.3s; transform: translateY(0px); width: var(--size); }

.menu-link {
align-items: center;
border-radius: 50%;
color: #fff;
display: flex;
height: 100%;
justify-content: center;
text-decoration: none;
width: 100%;
}

.menu-button {
background: #fff;
border-radius: 50%;
box-shadow: 0 0 0 2px #fff;
color: #999;
cursor: pointer;
height: calc(var(--size) + 0.4rem);
outline: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: calc(var(--size) + 0.4rem);
z-index: 1;
}

.item-1 { background-color: #634a02; }
.item-2 { background-color: #987304; }
.item-3 { background-color: #bd8f07; }
.item-4 { background-color: #e4ac07; }
.item-5 { background-color: #ffc107; }
.item-6 { background-color: #ffe28c; }
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
.menu-button + .menu-list .menu-item:hover .menu-link { background-color: rgba(255, 255, 255, 0.2); }

.menu-list:hover .item-1,
.menu-button:hover + .menu-list .item-1 { transform: rotate(0deg) translateY(var(--position)); }

.menu-list:hover .item-1 .menu-link,
.menu-button:hover .menu-list + .item-1 .menu-link { transform: rotate(0deg); }

.menu-list:hover .item-2,
.menu-button:hover + .menu-list .item-2 { transform: rotate(60deg) translateY(var(--position)); }

.menu-list:hover .item-2 .menu-link,
.menu-button:hover + .menu-list .item-2 .menu-link { transform: rotate(-60deg); }

.menu-list:hover .item-3,
.menu-button:hover + .menu-list .item-3 { transform: rotate(120deg) translateY(var(--position)); }

.menu-list:hover .item-3 .menu-link,
.menu-button:hover + .menu-list .item-3 .menu-link { transform: rotate(-120deg); }

.menu-list:hover .item-4,
.menu-button:hover + .menu-list .item-4 { transform: rotate(180deg) translateY(var(--position)); }

.menu-list:hover .item-4 .menu-link,
.menu-button:hover + .menu-list .item-4 .menu-link { transform: rotate(-180deg); }

.menu-list:hover .item-5,
.menu-button:hover + .menu-list .item-5 { transform: rotate(240deg) translateY(var(--position)); }

.menu-list:hover .item-5 .menu-link,
.menu-button:hover + .menu-list .item-5 .menu-link { transform: rotate(-240deg); }

.menu-list:hover .item-6,
.menu-button:hover + .menu-list .item-6 { transform: rotate(300deg) translateY(var(--position)); }

.menu-list:hover .item-6 .menu-link,
.menu-button:hover + .menu-list .item-6 .menu-link { transform: rotate(-300deg); }

Conclusão

A postagem original pode ser vista no meu Instagram e o código está acessível no meu Github.

Ao fechar este aviso ou continuar navegando no site Nerd Calistênico, você aceita o uso de cookies.

Este site usa cookies para assegurar a melhor experiência para os nossos usuários. Consulte nossa política de privacidade.

Uma nova versão está disponível. Clique aqui para atualizar.