CSS3 + font file to implement a circular menu

In normal projects, some front-end designs are occasionally involved, but after all, they are not professional, so they always want to learn systematically. I have recently resigned and want to learn about css3.

Today, we will summarize some recent learning gains from the implementation of a simple circular menu. As follows:

Next, let's see how this circular translucent menu is implemented:

1. Use ul to create a menu. The Code is as follows:

Homepage user activity

The effect is as follows:

2. Add a style (ulMenu) and its li, a, and span to ul to beautify the menu:

 { :; } { :; :; :; :; :; :; :; :; } { :; :; :; :; :; :; :; } { :; }

The effect is as follows:

3. to change a menu to a circle, you only need to set the element to a square with the same length and width, and then set the rounded corner to half of its length. For example, in this example, when the length and width of li are 80 PX, we set the rounded corner to 40px. We will change the li style to the following to add the rounded corner and background color:

  { :; :; :; :; :; :; :; :; :; :; :; :; }

The effect is as follows:

4. There is still a gap between the effect we need and we need to add some icons. The introduction of the font in CSS3 saves us the trouble of finding a graph. We can directly introduce the font file. Next, let's go into details. Here, we will first change the html code of the menu, use a container to display the icon. Here we use the I element. After the modification, the Code is as follows:

Add a style to I:

  { :; :; :; :; :; :; }

The effect is as follows:

 

5. The font customized online now comes with many common icons (refer to the http://astronautweb.co/snippet/font-awesome/, font can be downloaded here ):

Download the font and reference it in the style file:

 { :; :; :    ; :; :; }

6. Then, we can use the following style to create an icon:

 { :;  }

But there are a lot of icons, we can directly introduce the downloaded font file under the css folder under the font-awesome.css style file, that is to say, the above a lot of font file reference can be omitted as (of course, in actual development, considering the slight impact of modular introduction of css loading performance, I personally feel that it should be used less and hope that experienced Predecessors will give us some advice ):

Add the corresponding css for I:

The effect is as follows:

7. In the last step, add the following style to change the color when the mouse moves up:

 { :; }

The effect is as follows:

Click [demo] to download the example.