Skip to content

Animated Circular Navigation Menu Using Pure HTML & CSS | CSS Circular Menu

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:



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="" />    <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.


Leave a Reply

Your email address will not be published. Required fields are marked *