Neste post mostraremos como criar um menu circular com ícones do Font Awesome, feito somente com HTML e CSS.
Talvez você já tenha visto um menu circular antes. A questão é como também podemos criar um menu circular? Depois de ver este post, você poderá criar um rapidamente;
Inicie o projeto criando uma pasta com nome para referência futura, como no exemplo abaixo (menu):
HTML
Para iniciar você deve criar um arquivo chamado index.html.
A primeira linha que está selecionada é a tag que utilizamos para inserir os ícones do font awesome ao html. Entre as tags <head> do html coloque a tag que carrega o font awesome.
<!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Publiquesites.com - CSS Menu circular </title> <meta name="description" content="Menu circular com ícones | HTML, CSS e Font awesome"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"> <link rel="stylesheet" href="style.css"> </head>
As linhas selecionadas abaixo são os círculos com os links e os ícones.
<body> <nav class="menu"> <input type="checkbox" href="#" class="expandmenu" name="expandmenu" id="expandmenu" /> <label class="expandmenu-button" for="expandmenu"> <span class="trace trace-1"></span> <span class="trace trace-2"></span> <span class="trace trace-3"></span> </label> <a href="https://publiquesites.com" class="menu-item col-1" target="_blank" title="https://publiquesites.com"> <i class="fas fa-home"></i> </a> <a href="https://nthweb.com.br/contato/" class="menu-item col-2" target="_blank"> <i class="far fa-address-card"></i> </a> <a href="https://nthweb.com.br" class="menu-item col-3" target="_blank"> <i class="fab fa-css3-alt"></i> </a> <a href="https://nthweb.com.br" class="menu-item col-4" target="_blank"> <i class="fab fa-html5"></i> </a> <a href="https://nthweb.com.br" class="menu-item col-5" target="_blank"> <i class="fab fa-php"></i> </a> <a href="https://nthweb.com.br/psd-para-wordpress/" class="menu-item col-6" target="_blank" title="https://nthweb.com.br/psd-para-wordpress/"> <i class="fab fa-wordpress"></i> </a> </nav> </body> </html>
As tags <i> dentro das tags de links <a> são as que carregam os ícones nos círculos do menu.
CSS
Crie um arquivo chamado style.css na mesma pasta do html e coloque todo o código abaixo nele.
body { padding: 0; margin: 0; background: #95b686; text-align: center; font-family: Arial, Helvetica, sans-serif; } a { color: inherit; } .expandmenu { display: none; } .menu-item, .expandmenu-button { background: white; border-radius: 100%; width: 80px; height: 80px; margin-left: -40px; position: absolute; color: white; text-align: center; line-height: 80px; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition: -webkit-transform ease-out 200ms; transition: -webkit-transform ease-out 200ms; transition: transform ease-out 200ms; transition: transform ease-out 200ms, -webkit-transform ease-out 200ms; } .trace { width: 25px; height: 3px; background: #596778; display: block; position: absolute; top: 50%; left: 50%; margin-left: -12.5px; margin-top: -1.5px; -webkit-transition: -webkit-transform 200ms; transition: -webkit-transform 200ms; transition: transform 200ms; transition: transform 200ms, -webkit-transform 200ms; } .trace-1 { -webkit-transform: translate3d(0, -8px, 0); transform: translate3d(0, -8px, 0); } .expandmenu:checked + .expandmenu-button .trace-1 { -webkit-transform: translate3d(0, 0, 0) rotate(45deg); transform: translate3d(0, 0, 0) rotate(45deg); } .trace-2 { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .expandmenu:checked + .expandmenu-button .trace-2 { -webkit-transform: translate3d(0, 0, 0) scale(0.1, 1); transform: translate3d(0, 0, 0) scale(0.1, 1); } .trace-3 { -webkit-transform: translate3d(0, 8px, 0); transform: translate3d(0, 8px, 0); } .expandmenu:checked + .expandmenu-button .trace-3 { -webkit-transform: translate3d(0, 0, 0) rotate(-45deg); transform: translate3d(0, 0, 0) rotate(-45deg); } .menu { margin: 200px auto; position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 80px; height: 80px; text-align: center; box-sizing: border-box; font-size: 26px; } .menu-item:hover { background: white; color: #3290B1; } .menu-item:nth-child(3), .menu-item:nth-child(4), .menu-item:nth-child(5), .menu-item:nth-child(6), .menu-item:nth-child(7), .menu-item:nth-child(8), .menu-item:nth-child(9) { -webkit-transition-duration: 180ms; transition-duration: 180ms; } .expandmenu-button { z-index: 2; -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); -webkit-transition-duration: 400ms; transition-duration: 400ms; -webkit-transform: scale(1.1, 1.1) translate3d(0, 0, 0); transform: scale(1.1, 1.1) translate3d(0, 0, 0); cursor: pointer; box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14); } .expandmenu-button:hover { -webkit-transform: scale(1.2, 1.2) translate3d(0, 0, 0); transform: scale(1.2, 1.2) translate3d(0, 0, 0); } .expandmenu:checked + .expandmenu-button { -webkit-transition-timing-function: linear; transition-timing-function: linear; -webkit-transition-duration: 200ms; transition-duration: 200ms; -webkit-transform: scale(0.8, 0.8) translate3d(0, 0, 0); transform: scale(0.8, 0.8) translate3d(0, 0, 0); } .expandmenu:checked ~ .menu-item { -webkit-transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33); transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33); } .expandmenu:checked ~ .menu-item:nth-child(3) { transition-duration: 180ms; -webkit-transition-duration: 180ms; -webkit-transform: translate3d(0.08361px, -104.99997px, 0); transform: translate3d(0.08361px, -104.99997px, 0); } .expandmenu:checked ~ .menu-item:nth-child(4) { transition-duration: 280ms; -webkit-transition-duration: 280ms; -webkit-transform: translate3d(90.9466px, -52.47586px, 0); transform: translate3d(90.9466px, -52.47586px, 0); } .expandmenu:checked ~ .menu-item:nth-child(5) { transition-duration: 380ms; -webkit-transition-duration: 380ms; -webkit-transform: translate3d(90.9466px, 52.47586px, 0); transform: translate3d(90.9466px, 52.47586px, 0); } .expandmenu:checked ~ .menu-item:nth-child(6) { transition-duration: 480ms; -webkit-transition-duration: 480ms; -webkit-transform: translate3d(0.08361px, 104.99997px, 0); transform: translate3d(0.08361px, 104.99997px, 0); } .expandmenu:checked ~ .menu-item:nth-child(7) { transition-duration: 580ms; -webkit-transition-duration: 580ms; -webkit-transform: translate3d(-90.86291px, 52.62064px, 0); transform: translate3d(-90.86291px, 52.62064px, 0); } .expandmenu:checked ~ .menu-item:nth-child(8) { transition-duration: 680ms; -webkit-transition-duration: 680ms; -webkit-transform: translate3d(-91.03006px, -52.33095px, 0); transform: translate3d(-91.03006px, -52.33095px, 0); } .expandmenu:checked ~ .menu-item:nth-child(9) { transition-duration: 780ms; -webkit-transition-duration: 780ms; -webkit-transform: translate3d(-0.25084px, -104.9997px, 0); transform: translate3d(-0.25084px, -104.9997px, 0); } .col-1, .col-2, .col-3, .col-4, .col-5, .col-6 { box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14); text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12); } .col-1:hover, .col-2:hover, .col-3:hover, .col-4:hover, .col-5:hover, .col-6:hover { text-shadow: none; } .col-1 { background-color: #3f74f1; } .col-1:hover { color: #3f74f1; } .col-2 { background-color: #D10003; } .col-2:hover { color: #D10003; } .col-3 { background-color: #29a9df; } .col-3:hover { color: #29a9df; } .col-4 { background-color: #f16529; } .col-4:hover { color: #f16529; } .col-5 { background-color: #777bb3; } .col-5:hover { color: #777bb3; } .col-6 { background-color: #000000; } .col-6:hover { color: #000000; }
Veja online
Deixamos o código no Codepen tmb: