How to Create a Radial Menu Using Only CSS?

How to create a radial menu using CSS?

Question:

How to create a menu that looks like this:

[Image]

I don’t want to use PSD images . I'd rather use icons from packages like FontAwesome and generate the background/CSS in CSS.

A version of the menu that can be created using PSD can be found here.

Answer:

After almost 3 years of waiting, I finally have the time to revisit this question and post an improved version. You can still view the original answer at the end for reference.

While SVG might be a better choice (especially today), my goal is to use only HTML and CSS, no JS, no SVG, no images (except for the background on the root element).

Demo 2015

Screenshots:

• Chrome 43:

[Image]

• Firefox 38:

[Image]

• IE 11:

[Image]

Code

HTML is pretty simple. I'm using checkbox trick to show/hide menu.

<input type="checkbox">

I use Sass to keep things logical and make it easier to change things if needed. Lots of notes.

/* CSS goes here. */

Currently this answer covers HTML, Sass, and raw JavaScript. This is a large response as it dives into the solution and provides useful code examples.

The above is the detailed content of How to Create a Radial Menu Using Only CSS?. For more information, please follow other related articles on the PHP Chinese website!