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.
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°