Open In App

How to create Radial Menu in CSS ?

Improve
Improve
Like Article
Like
Save
Share
Report

There are so many ways to create a radial menu by using the CSS property. The font icon, letters, and or image are used in the radial menu. That radial button can be linked with the sites. Set the position, height, and width of a radial button by using CSS. There is another approach using JavaScript to create a radial menu. 

Example 1: This example uses CSS property to create a radial menu. 

html




<!DOCTYPE html>
<html>
     
<head>
    <title>
        Creating Radial Menu
    </title>
     
    <!-- CSS style to create radial menu -->
    <style>
     
        /* Set the style of div */
        div {
            display:inline-block;
            height:200px;
            width:200px;
            background:#d1d1d1;
            border-radius:30%;
            position:relative;
            overflow:hidden;
            border:2px solid black;
        }
        div:before {
            content:"";
            position:absolute;
            height:60%;
            width:60%;
            border-radius:40%;
            background:white;
            top:20%;
            left:20%;
            z-index:8;
        }
        div a {
            position:absolute;
            padding:40px;
            background:blue;
            padding-bottom:50px;
        }
         
        /* Set the position of button */
        div a:nth-child(1){
            bottom:-10%;
            left:50%;
            transform:translateX(-50%);
        }
         
        /* Set the position of button */
        div a:nth-child(2){
            bottom:28%;
            left:10%;
            transform:translateX(-50%) rotate(90deg);
        }
         
        /* Set the position of button */
        div a:nth-child(3){
            bottom:28%;
            left:90%;
            transform:translateX(-50%) rotate(-90deg);
        }
         
        /* Set the position of button */
        div a:nth-child(4) {
            bottom:60%;
            left:50%;
            transform:translateX(-50%);
        }
         
        /* Set style when mouse move over */
        div a:hover {
            background:green;
    </style>
</head>
 
<!-- body part of document -->
<body>
    <h1 style="color:Green;">
        GeeksforGeeks
    </h1>
     
    <div>
        <a href="#"></a>
        <a href="#"></a>
        <a href="#"></a>
        <a href="#"></a>
    </div>
</body>
 
</html>                                    


Output: 

Example 2: This example uses font icons and CSS property to create radial menu. 

html




<!DOCTYPE html>
<html>
     
<head>
    <title>
        Creating Radial Menu
    </title>
     
    <link rel="stylesheet" href=
     
    <!-- CSS style to create radial menu -->
    <style>
        #check {
            display: none;
        }
         
        /* Set the icon width, height and position */
        .main,.icons {
            margin: auto;
            position:absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            width: 50px;
            height: 50px;
            border-radius: 40%;
        }
         
        /* Set the style of menu button */
        .main {
            background-color: gray;
            cursor: pointer;
            z-index: 50;
        }
         
        /* Set the position, height and
            width of menu button */
        .main .title {
            margin: auto;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 80px;
            font-size: 16px;
            line-height: 80px;
            text-align: center;
            color: lime;
        }
         
        /* Set position, height and width
            of buttons */
        .button {
            margin: auto;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            width: 45px;
            height: 45px;
            border-radius: 40%;
            transition: all 0.4s ease-in;
        }
        .button i {
            width: 100%;
            font-size: 20px;
            line-height: 50px;
            text-align: center;
            color: white;
        }
        .main {
            border:2px solid lime;
        }
        .button {
            border:2px solid black;
        }
         
        /* Positioning of buttons */
        #check:checked ~ .main + .icons .button {
            opacity:0.8;
        }
        #check:checked ~ .main + .icons .button:nth-of-type(1) {
            top: -100%;
            left: -480%;
            background-color: green;
            transition-delay:0.6s;
        }
        #check:checked ~ .main + .icons .button:nth-of-type(2) {
            top: -230%;
            left: -250%;
            background-color: green;
            transition-delay:0.4s;
        }
        #check:checked ~ .main + .icons .button:nth-of-type(3) {
            top: -280%;
            background-color: green;
            transition-delay:0.2s;
        }
        #check:checked ~ .main + .icons .button:nth-of-type(4) {
            top: -230%;
            right: -250%;
            background-color: green;
            transition-delay:0.4s;
        }
        #check:checked ~ .main + .icons .button:nth-of-type(5) {
            top: -100%;
            right: -480%;
            background-color: green;
            transition-delay:0.6s;
        }
    </style>
</head>
 
<body>
    <input id="check" type="checkbox">
     
    <label class="main" for="check">
        <div class="title">
            <i class="fa fa-bars"></i>
        </div>
    </label>
     
    <!--Buttons that link with the other pages -->
    <div class="icons">
        <a class="button" href="#" >
            <i class="fa fa-youtube"></i>
        </a>
        <a class="button" href="#" >
            <i class="fa fa-facebook"></i>
        </a>
        <a class="button" href="h#">
            <i class="fa fa-linkedin"></i>
        </a>
        <a class="button" href="#">
            <i class="fa fa-github"></i>
        </a>
        <a class="button" href="#">
            <i class="fa fa-google-plus"></i>
        </a>
    </div>
</body>
 
</html>                                   


Output: 



Last Updated : 01 May, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads