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.
