Como criar menu circular
Neste tutorial mostro como criar Menu Circular usando apenas CSS e Html.
Introdução
Neste tutorial tenho como objetivo demonstrar como criar um menu circular usando CSS e JavaScript, você poderá acompanhar este tutorial tanto aqui pelo blog quanto pelo vídeo acima que disponibilizei .
No vídeo acima criei um breve tutorial onde demonstro todo processo que executei na construção e estilização do menu circular, caso precise do código utilizado neste tutorial, logo abaixo mostro o trecho do código que foi utilizado para implementar o menu.
Vamos implementar o menu circular
O Primeiro passo que vamos executar e a criação da estrutura da página e do menu circular, logo abaixo mostro o código base da página:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- Link da fonte está na descrição -->
<!-- Font Roboto -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="circular-menu">
<div class="circular-menu-container">
<a href="#" class="menu-item">
<ion-icon name="home-outline"></ion-icon>
</a>
<a href="#" class="menu-item">
<ion-icon name="flash"></ion-icon>
</a>
<a href="#" class="menu-item">
<ion-icon name="code-working"></ion-icon>
</a>
<a href="#" class="menu-item">
<ion-icon name="bulb-outline"></ion-icon>
</a>
<a href="#" class="menu-item">
<ion-icon name="flash-outline"></ion-icon>
</a>
<a href="#" class="menu-item">
<ion-icon name="flash-outline"></ion-icon>
</a>
</div>
<a href="" class="menu-button">
<ion-icon name="menu"></ion-icon>
</a>
</div>
<script>
const menuButton = document.querySelector('.menu-button');
const items = document.querySelectorAll('.circular-menu-container a');
items.forEach((item, index) => {
const angle = -0.5 * Math.PI - 2 * (1 / items.length) * index * Math.PI;
const left = (50 - 35 * Math.cos(angle)).toFixed(4) + "%";
const top = (50 + 35 * Math.sin(angle)).toFixed(4) + "%";
item.style.left = left;
item.style.top = top;
});
menuButton.onclick = function (e) {
e.preventDefault();
document.querySelector('.circular-menu-container').classList.toggle('open');
document.querySelector('.circular-menu').classList.toggle('open');
alternarMenuButtonIcon();
menuButton.classList.toggle('pulse');
}
const alternarMenuButtonIcon = () => {
const mnuButtonIcon = document.querySelector('.menu-button ion-icon');
const isOpen = mnuButtonIcon.getAttribute('name') === 'close';
mnuButtonIcon.setAttribute('name', (isOpen ? 'menu' : 'close'));
}
</script>
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
</body>
</html>
Explicando o código acima, no código acima na primeira parte crio o corpo da página e logo em seguida crio a estrutura do menu que contém seis(6) links e cada link contém a url da página e um ícone.
Para as imagens dos ícones deste tutorial estou utilizando a biblioteca de ícones do ionicons , ao final da página adiciono a importação da biblioteca.
Veja, também que crio na página um script JavaScript , esse script será responsável por dar dinamismo ao no menu.
No Script estou criando duas funções, uma utilizada para abertura e fechamento do menu e a segunda serve para distribuir os links internos do menu uniformemente em circulo de 360º.
Com a estrutura inicial criada chegou o momento de criarmos a estilização do menu, logo abaixo disponibilizo o código que utilizei para estilização do menu:
*,
*:after,
*:before {
margin: 0;
padding: 0;
border: 0;
text-decoration: none;
}
:root {
--white: #fff;
--black: #131826;
--blue: #4fa4b8;
--dark: #202740;
--purple: #474d84;
--orange: #ffae70;
--red: #d72337;
--green: #82af69;
}
body * {
font-family: "Roboto", sans-serif;
}
body {
height: 100vh;
background: var(--black);
display: flex;
justify-content: center;
align-items: center;
}
.circular-menu {
position: relative;
width: 200px;
height: 200px;
}
.circular-menu-container {
width: 200px;
height: 200px;
opacity: 0;
transform: scale(0) rotate(0deg);
transition: all 0.8s ease-in-out;
border-radius: 50%;
background-color: var(--dark);
border: 1px solid var(--red);
box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px,
rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}
.open.circular-menu-container {
opacity: 1;
transform: scale(1) rotate(360deg);
}
.circular-menu-container .menu-item {
height: 40px;
width: 40px;
line-height: 40px;
margin-left: -20px;
margin-top: -20px;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: var(--black);
color: var(--white);
font-size: 20px;
transition: all 0.8s ease-in-out;
box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px,
rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}
.menu-item:hover {
transform: translateY(-0.15rem);
}
.menu-button {
position: absolute;
height: calc(50% - 40px);
width: calc(50% - 40px);
top: calc(50% - 40px);
left: calc(50% - 40px);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
background: var(--red);
color: var(--white);
font-size: 50px;
transition: all 0.8s ease-in-out;
box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px,
rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}
.pulse {
animation: pulse 1.6s linear;
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(71, 77, 132, 0.7);
transform: scale(1.02);
}
50% {
box-shadow: 0 0 0 60px rgba(235, 118, 15, 0);
transform: scale(1);
}
100% {
box-shadow: 0 0 0 80px rgba(235, 118, 15, 0);
transform: scale(1);
}
}
Um breve explicação do código de estilização, no código acima estou usando logo no inicio um reset CSS que servirá para resetar o CSS padrão do elementos da página.
Além disto implementei uma animação de pulse que será ativada toda vez que o usuário clicar no botão de abrir e fechar o menu.
Ao terminarmos a implementação do código, esse será o resultado final do menu :
Logo abaixo estou disponibilizando o link de um vídeo onde demonstro de forma rápida a animação do menu circular que acabamos de criar:
Vídeo Tutorial:
