Hey Readers!

A web page is incomplete without a navigation menu. Besides the navbar, there are other menus that make a web page interactive and help accommodate more information and links in lesser space. Thus, it becomes necessary to include menus in our HTML page.

The more interactive your menu is, the more appealing it gets. Menus can be a dropdown or appearing from either side of the web page.

One different type of menus are Radial Menu.

In radial menus, there is an icon or a button. Upon click, the button produces the menu items radially (in a circle or semicircle), and the menu closes on again clicking over the icon. The motive of adding a radial menu is to add a pinch of interactiveness and visual appeal to the page.

I am providing a sample code snippet below with it's explanation.

HTML :

<a class='button ctrl' href='#' tabindex='1'></a>
<ul class='tip ctrl'>
    <li class='slice'><a href='#'></a></li>
    <li class='slice'><a href='#'></a></li>
    <li class='slice'><a href='#'></a></li>
    <li class='slice'><a href='#'></a></li>
    <li class='slice'><a href='#'></a></li>
</ul>

CSS :

* { 
    margin: 0; 
    padding: 0; 
}

body {
    overflow: hidden;
    background: url(http://theearlcarlson.com/experiments/amTooltip/img/bg.jpg);
}

.ctrl {
    position: absolute;
    top: 50%; left: 50%;
    font: 1.5em/1.13 Verdana, sans-serif;
    transition: .5s;
}

a.ctrl, .ctrl a {
    display: block;
    opacity: .56;
    background: #c9c9c9;
    color: #7a8092;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 -1px dimgrey;
}

a.ctrl:hover, .ctrl a:hover, a.ctrl:focus, .ctrl a:focus { 
    opacity: 1; 
}

a.ctrl:focus, .ctrl a:focus { 
    outline: none; 
}

.button {
    z-index: 2;
    margin: -.625em;
    width: 1.25em; height: 1.25em;
    border-radius: 50%;
    box-shadow: 0 0 3px 1px white;
}

.tip {
    z-index: 1;
    margin: -5em;
    width: 10em; height: 10em;
    transform: scale(.001);
    list-style: none;
    opacity: 0;
}

.tip:before, .tip:after {
    position: absolute;
    top: 34.3%;
    width: .5em; height: 14%;
    opacity: .56;
    background: #c9c9c9;
    content: '';
}

.tip:before {
    left: 5.4%;
    border-radius: .25em 0 0 .25em;
    box-shadow: -1px 0 1px dimgrey, inset 1px 0 1px white, inset -1px 0 1px grey, inset 0 1px 1px white, inset 0 -1px 1px white;
    transform: rotate(-75deg);
}

.tip:after {
    right: 5.4%;
    border-radius: 0 .25em .25em 0;
    box-shadow: 1px 0 1px dimgrey, inset -1px 0 1px white, inset 1px 0 1px grey, inset 0 1px 1px white, inset 0 -1px 1px white;
    transform: rotate(75deg);
}

.button:focus + .tip {
    transform: scale(1);
    opacity: 1;
}

.slice {
    overflow: hidden;
    position: absolute;
    width: 50%; height: 50%;
    transform-origin: 100% 100%;
}

.slice:first-child { transform: rotate(-45deg) skewY(60deg); }
.slice:nth-child(2) { transform: rotate(-15deg) skewY(60deg); }
.slice:nth-child(3) { transform: rotate(15deg) skewY(60deg); }
.slice:nth-child(4) { transform: rotate(45deg) skewY(60deg); }
.slice:last-child { transform: rotate(75deg) skewY(60deg); }

.slice:after {
    position: absolute;
    top: 32%; 
    left: 32%;
    width: 136%; 
    height: 136%;
    border-radius: 50%;
    transform: skewY(-60deg);
    content: '';
}

.slice a {
    width: 200%; height: 200%;
    border-radius: 50%;
    box-shadow: 0 0 3px dimgrey, inset 0 0 4px white;
    transform: skewY(-60deg) rotate(-15deg);
    background: linear-gradient(75deg,transparent 50%, grey 50%, transparent 54%) no-repeat 36.5% 0,linear-gradient(-75deg,    transparent 50%, grey 50%, transparent 54%) no-repeat 63.5% 0,    radial-gradient(rgba(127,127,127,0) 49%,rgba(255,255,255,.7) 51%, #c9c9c9 52%);
    background-size: 15% 15%, 15% 15%, cover;
    line-height: 1.4;
}

.slice:nth-child(3) a:after {
    position: absolute;
    top: 13%; left: 50%;
    margin: -.25em;
    width: .5em; height: .5em;
    box-shadow: 2px 2px 2px white;
    transform: rotate(45deg);
    background: linear-gradient(-45deg, #c9c9c9 50%, transparent 50%);
    content: '';
}

OUTPUT :

EXPLANATION :

You'll see it is just pure HTML and CSS, with no JS, no SVG, or images. The HTML is quite simple and clear. The checkbox hack is used here to reveal/ hide the menu. Give the generic styles for button & circular menu. Make the menu appear on a click with .button:focus + .tip .

How to make the menu appear radially?

Firstly, rotate each slice of the menu at a right angle with the formula = (A/2)° + (k - (n+1)/2)*A°. Here A is the angle of 1 slice (in this case, 30), k is the number of slices and n is the number of slices in the radial menu (5, here). This formula works only for odd number of slices.

For even number of slices, there is a modified formula where the rotation angle = (k - n/2)*A°

Keep Coding!