Theory
Theory
Comments

The round menu, final part

That’s all there is to creating a round menu:

Convert the axis of item rotation into an angle using transform-origin, and align this angle with the center of the menu.

Skew and rotate the menu items using the following formulas:

[sector angle] = 360° / [number of menu items]
[rotation of item n] = (n - 1) * [sector angle]
[skew angle] = 90° - [sector angle]

Let’s “unskew” and expand the contents of the menu items:

[skew angle of contents] = -1 * [skew angle of item]
[rotation angle] = -1 * (90° – ([sector angle] / 2))

Shift the contents of the items to the center of the circle.
Round out the menu container using border-radius, and trim away anything unnecessary using overflow: hidden.

And after you have completed these steps, you can apply additional decorative elements. For example, set different backgrounds for items, a frame for the menu container, and so on.

Let’s add a third menu item last, so that we get a semicircle. The angle of rotation of the third menu item will be 120°:

A series of tasks inspired by the article Building a Circular Navigation with CSS Transforms. These examples have been adapted and simplified for the course.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="en"> <head> <title>The round menu, final part</title> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> </head> <body> <nav class="circle-menu"> <div class="center"></div> <ul> <li><a href="#">monitor</a></li> <li><a href="#">aperture</a></li> </ul> </nav> </body> </html>

CSS

body { margin: 0; padding: 0; background-color: #f5f5f5; } .circle-menu { position: relative; width: 400px; height: 400px; margin: 50px auto; background-color: white; box-shadow: 0 0 3px #cccccc; } .circle-menu ul { position: absolute; width: 300px; height: 300px; margin: 50px; padding: 0; list-style: none; border-radius: 50%; overflow: hidden; } .circle-menu .center { position: absolute; top: 195px; left: 195px; z-index: 1000; border: 5px solid #34495e; border-radius: 50%; box-shadow: 0 0 3px #cccccc; } .circle-menu li { position: absolute; top: -10px; left: -10px; width: 160px; height: 160px; transform-origin: 100% 100%; overflow: hidden; } .circle-menu li:nth-child(1) { transform: rotate(0deg) skew(30deg); } .circle-menu li:nth-child(2) { transform: rotate(60deg) skew(30deg); } .circle-menu li a { display: block; width: 160px; height: 160px; margin-top: 40px; margin-left: 40px; font-size: 0; background: rgba(241, 196, 15, 0.5) url("icons/monitor-4x.png") no-repeat 50% 40%; transition: background-color 0.5s; transform: skew(-30deg) rotate(-60deg); } .circle-menu li:nth-child(even) a { background-color: rgba(241, 196, 15, 0.75); } .circle-menu li a:hover { background-color: rgba(241, 196, 15, 1); } /* Icons */ .circle-menu li:nth-child(2) a { background-image: url("icons/aperture-4x.png"); } .circle-menu li:nth-child(3) a { background-image: url("icons/audio-4x.png"); } .circle-menu li:nth-child(4) a { background-image: url("icons/battery-empty-4x.png"); } .circle-menu li:nth-child(5) a { background-image: url("icons/bluetooth-4x.png"); } .circle-menu li:nth-child(6) a { background-image: url("icons/browser-4x.png"); }

Goalscompleted

Add a third list item to the menu with a link inside.
Rotate the third list item 120°.
And then skew it 30°.

Complete the menu so that it has six items.

The round menu, final part

Comments

Log in

Sign up

Restore access