How to create Radial Menu in CSS ?

Last Updated : 01 May, 2023

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= "https://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">           <!-- 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:

How to create and use CSS Image Sprites ?

Sabya_Samadder

Improve

Article Tags :

How to create Radial Menu in CSS ?

Similar Reads