Create a circular rotation menu with pure CSS

In our philosophy, menus are rectangular, either horizontal or vertical. Here we break the conventional thinking and make menus circular. Here we have to overcome several problems: how to define html, how to hover over and locate menu elements. Let's start today's tutorial. Step 1: Build HTML before writing HTML, you must first understand the structure to be constructed, indicating the structure to be constructed: the rectangle at the top of each frame is associated with a small circle in the following circle. When you hover the mouse over the rectangle frame, the corresponding circle is rotated to the top of the menu. The difficulty in implementing this function is how to hover over one element to affect the performance of another element. To solve this problem, let's look at the following HTML: <div class = "item-1"> <a href = "#"> anchor </a> </div> <div class = "item-2"> <p> target </p> </div> we want to hover the mouse over anchor to change the color of the target section, if you have a basic concept for remote hover operations, you may first write the following css code: a: hover p {color: blue ;} this piece of code cannot achieve our expected results. Observe the above HTML code. We want to change the color elements and the elements that hover over the mouse in different div, respectively, this increases the difficulty of our implementation, so we need to change the HTML structure as follows and put the two elements under the same div respectively: <div class = "item-1"> <a href = "#"> anchor </a> <p> target </p> </di V> place the two elements under the same div respectively. You can perform the following operations on anchor and target as same-level elements: a: hover + p {color: blue ;} the above enables the mouse to hover over a, and changes the color of the same level elements that come near it. Specific Application: using the above knowledge to the case of this tutorial, we can come up with a feasible structure, first create three nested div, respectively named class wrapper, menu and circle. <div class = "wrapper"> <div class = "menu"> <div class = "circle"> </div> in menu div set four anchor points, different classes, in circle div, a ul li element containing four numbers <div class = "wrapper"> <div class = "menu"> <a href = "#" class =" one "> One </a> <a href =" # "class =" two "> Two </a> <a href =" # "class =" three "> Three </a> <Href = "#" class = "four"> Four </a> <div class = "circle"> <ul> <li> 1 </li> <li> 2 </li> <li> 3 </li> <li> 4 </li> </ul> </div> let's use an image to better understand the structure described above Step 2: the HTML code above the css of wrapper div has been written since then. The main issues below are css. First, we define some basic styles: * {margin: 0; padding: 0; -webkit-backface-visibility: hidden;}/* WRAPPER */. wrapper {position: relative; margin: 20px auto; width: 3670px;} Step 3: circle d Iv css this step defines a large circle. It is very easy to create a circle with css. We only need to set the width and height of the element to equal, set the border width to 50%.