Animated Circular Navigation Menu Using Pure HTML & CSS | CSS Circular Menu
Today in this video we are going to see how to create an animated circular navigation menu using pure HTML and CSS without Javascript. Here I showed everything step by step and also fixed all types of errors when creating our CSS circular/radial menu.
You can watch it here:
[embedyt] https://www.youtube.com/watch?v=J2_uitEhCDU[/embedyt]
Source Code:
First You need to create an index.html file and copy the below code.
<!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>Animated Circular Navigation Menu Using Pure HTML & CSS | CSS Circular Menu</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" /> <link rel="stylesheet" href="style.css"></head><body> <div class="links"> <ul class="links_list" style="--item-total:5"> <li class="links_item" style="--item-count:1"> <a href="#" class="links_link"> <i class="fa-solid fa-dashboard fa-4x"></i> <span class="links_text">Dashboard</span> </a> </li> <li class="links_item" style="--item-count:2"> <a href="#" class="links_link"> <i class="fa-solid fa-cogs fa-4x"></i> <span class="links_text">Tools</span> </a> </li> <li class="links_item" style="--item-count:3"> <a href="#" class="links_link"> <i class="fa-solid fa-message fa-4x"></i> <span class="links_text">Message</span> </a> </li> <li class="links_item" style="--item-count:4"> <a href="#" class="links_link"> <i class="fa-solid fa-user fa-4x"></i> <span class="links_text">Account</span> </a> </li> <li class="links_item" style="--item-count:5"> <a href="#" class="links_link"> <i class="fa-solid fa-envelope fa-4x"></i> <span class="links_text">Contact</span> </a> </li> </ul> </div></body></html>
After that, you need to create a style.css file and copy the below code and paste it into your style.css file
:root{ --base-grid: 8px; --color-white: #fff; --color-black: #1a1a1a;}*,:after,:before{ box-sizing: border-box;}html{ margin: 0; padding: 0; background-position: 100%;}body{ margin: 0; padding: 0; background: rgb(144,87,196); background: linear-gradient(90deg, rgba(144,87,196,0.92) 0%, rgba(249,35,35,0.81 ) 100%);}.fa-solid{ color: #505050;}.links{ --link-size:calc(var(--base-grid) * 20); color: var(--color-black); display: flex; justify-content: center; align-items: center; width: 100%; min-height: 100vh;}.links_list{ position: relative; list-style: none;}.links_item{ width: var(--link-size); height: var(--link-size); position: absolute; top: 0; left: 0; margin-top: calc(var(--link-size) / -2); margin-left: calc(var(--link-size) / -2); --angle: calc(360deg / var(--item-total)); --rotation: calc(140deg + var(--angle) * var(--item-count)); transform: rotate(var(--rotation)) translate(calc(var(--link-size) + var(--base-grid) * 2)) rotate(calc(var(--rotation) * -1));}.links_link{ opacity: 0; animation: on-load 0.3s ease-in-out forwards; animation-delay: calc(var(--item-count) * 150ms); width: 100%; height: 100%; border-radius: 50%; position: relative; background-color: var(--color-white); display: flex; flex-direction: column; justify-content: center; align-items: center; text-decoration: none; color: inherit; box-shadow: rgba(50,50,93,0.25) 0 6px 12px -2px, rgba(0,0,0,0.3) 0 3px 7px -3px;}.links_text{ position: absolute; width: 100%; left: 0; text-align: center; height: calc(var(--base-grid) * 2); font-size: calc(var(--base-grid) * 2); display: none; bottom: calc(var(--base-grid) * 8.5); animation:text 0.3s ease-in-out forwards;}.links_link:after{ content: ''; background-color: transparent; width: var(--link-size); height: var(--link-size); border:2px dashed #d3d3d3; display: block; border-radius: 50%; position: absolute; top: 0; left: 0; transition: all 0.3s cubic-bezier(0.53, -0.67, 0.73, 0.74);}.links_link:hover .links_text{ display: block;}.links_link:hover:after{ transition: all 0.3s cubic-bezier(0.37, 0.74 , 0.15, 1.65); transform: scale(1.1); opacity: 1; box-shadow: rgba(99, 99, 99, 0.2) 0 2px 8px 0;}@keyframes on-load{ 0%{ opacity: 0; transform: scale(0.3); } 70%{ opacity: .7; transform: scale(1.1); } 100%{ opacity: 1; transform: scale(1); }}@keyframes text { 0%{ opacity: 0; transform: scale(0.3), translateY(0); } 100%{ opacity: 1; transform: scale(1) translateY(calc(var(--base-grid) * 5)); }}
Stay connected with us for a more attractive and unique CSS Effects Tutorial.
Thanks.