一个旋转的圆形的CSS菜单代码

不要做一个广场，打破在你无聊的盒子和尝试在一个圆的大小。今天我们要建立一个圆形的导航菜单，旋转到不同的点作为用户将鼠标悬停在一个锚。

一路上我们要克服一些障碍是如何组织我们的HTML有利于远程悬停和如何定位所有的元素就让一切正常。这是一个有趣的挑战，有很多要学的，让我们开始吧！

步骤1：结构的HTML

我们写HTML的一个字符之前，我们必须弄清楚它是什么，我们的建筑结构。为此，我们可以把PS图象处理软件，使我们所希望的菜单看基础素描。这里是我想出了：

基本上，每个长方形的顶部是绑在一起的四个小圆圈里面的大圆圈。当一个矩形上空盘旋，其相应的小圆圈会旋转到顶部的菜单。再次，我们利用一个“远程”悬停由于用户交互与一个地区，它影响到另一个概念。

每次我试着拉过一个远程盘旋，它花了我好几次才能结构是正确的。这是因为这样的CSS选择器的工作，更具体地说，这样的hover伪类作品。考虑下面的：

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19

< trans style = "background: none repeat scroll 0% 0% transparent;" data-src="<div class="item-1">    < a href="#">anchor</ a > </ div >   < div class="item-2">    < p >target</ p > </ div >">＜div class=“item-1”>    ＜a href =“#”>锚    ＜／div＞          ＜div class=“ITEM-2”>      < p >目标</ p >    ＜／div ></ trans >

让我们说，我们把这个结构到位的想法，我们想要一个悬停在锚段的颜色变化。如果你有一个多么遥远徘徊的工作的基本思想，你可能会想出一些CSS这样：

1 2 3 4 5 6

<trans data-src="a:hover p {    color : blue ; }">答：悬停P {    颜色：蓝色 ；</trans>

事实证明，这是完全行不通的。在我们的CSS选择器，我们得把锚在同款要付诸实施，但我们是两个完全独立的div元素。没有简单的办法爬到整个DOM树。

那么我们该怎么办？答案在于调整我们的HTML。这一次我们会把两个元素在同一水平上的树。

01 02 03 04 05 06 07 08 09 10

< trans data-src="<div class="item-1">    < a href="http://www.odaad.com">设计公司</ a >    < p >target</ p > </ div >">＜div class=“item-1”>    ＜a href =“#”>锚      < p >目标</ p >    ＜／div ></ trans >

现在我们的段落是兄弟姐妹我们的锚，这意味着我们有一个明确的方法来把它们绑在一起在我们的CSS。这里是它如何工作的：

1 2 3 4 5 6

<trans data-src="a:hover + p {    color : blue ; }">答：悬停+ P {    颜色：蓝色 ；</trans>

这一次，我们告诉浏览器触发任何一段是一个锚，是在直接的兄弟姐妹色移。

应用

如果我们把这些知识运用到我们的场景中，我们可以想出一个结构工程。开始创建三个div：包装，菜单和圆。巢菜单里面的包装和圆里面的菜单。

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16

< trans style = "background: none repeat scroll 0% 0% transparent;" data-src="<div class="wrapper">    < div class="menu">      < div class="circle">      </ div >    </ div > </ div >">＜div class=“包装”>    ＜div class=“菜单”>    ＜div class=“圆”>    ＜／div＞    ＜／div＞    ＜div＞/</ trans >

在菜单的div，放置四个锚，每一个独特的类。圈内放置一个div，无序列表包含一到四的数字。

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52

< trans data-src="<div class="wrapper">    < div class="menu">      < a href="#" class="one">One</ a >      < a href="#" class="two">Two</ a >      < a href="#" class="three">Three</ a >      < a href="#" class="four">Four</ a >        < div class="circle">        < ul >          < li >1</ li >          < li >2</ li >          < li >3</ li >          < li >4</ li >        </ ul >      </ div >      </ div > </ div >">＜div class=“包装”>    ＜div class=“菜单”>    ＜a href =“#”class=“一”>一    ＜a href =“#”class=“两”>两      <链接地址“#”class=“三”>三    ＜a href =“#”class=“四”>四          ＜div class=“圆”>      < ul > < li > 1      <!--李-->      <李> 2 < /李>      </ li >< li > 3 <!--李-->      </ li >< li > 4 <!--李-->    ＜／ul >    ＜／div＞          ＜／div＞    ＜div＞/</ li ></ ul ></ trans >

它可能仍然有点困惑如何所有这些碎片与我们以前的草图，所以让我们更新了一些视觉线索来让你知道一切。

步骤2：包装的CSS

上面的代码代表所有的HTML，我们会为这个项目需要。我们的工作就是全部的CSS。首先，让我们放下一些基本的怨恨和定位代码：

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

<trans data-src="* {    margin : 0 ;    padding : 0 ;    -webkit-backface- visibility : hidden ; }   /*WRAPPER*/ .wrapper {    position : relative ;    margin : 20px auto ;    width : 3670px ; }">* {    保证金： 0 ；    填充： 0 ；      WebKit的背面能见度：隐藏；      }            / * * /    包装。包装{    位置：相对；    保证金：</trans>

这里没有太多是困惑，我们只是勾勒出我们的包装。请注意，WebKit的背面的能见度点是防止错误导致的WebKit闪烁在CSS过渡。

步骤3：圆的CSS

接下来我们会跳到编码，大圆圈。在CSS做个圆圈是相当容易的，只要确保高度和宽度都是平等的，边界半径至少设置为50%。一切都在这里只是帮助位置都很好。

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

<trans data-src=" /*MAIN CIRCLE*/ . circle {    position : relative ;    margin-top : 30px ;    margin-bottom : 20px ;    margin-left : 25px ;    width : 300px ;    height : 300px ;    border-radius: 50% ;    background : #093b62 ; }">／＊主循环＊／    。循环{    位置：相对；    上边距： 30px ；      margin-bottom : 20px ；      margin-left : 25px ；    ： 300px 宽度；    高度： 300px ；</trans>

使圆看起来有点爱好者，让我们添加一个内嵌的影子。最后，我们将在一个过渡使圈将动画旋转，后来发生的。

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50

<trans data-src=" /*MAIN CIRCLE*/ . circle {    position : relative ;    margin-top : 30px ;    margin-bottom : 20px ;    margin-left : 25px ;    width : 300px ;    height : 300px ;    border-radius: 50% ;    background : #093b62 ;      box-shadow: inset 0px 0px 30px rgba( 0 , 0 , 0 , 0.3 );    -webkit-box-shadow: inset 0px 0px 30px rgba( 0 , 0 , 0 , 0.3 );      -webkit-transition: all 0.5 s ease;    -moz-transition: all 0.5 s ease;    -ms-transition: all 0.5 s ease;    -o-transition: all 0.5 s ease;    transition: all 0.5 s ease; }">／＊主循环＊／    。循环{    位置：相对；    上边距： 30px ；      margin-bottom : 20px ；      margin-left : 25px ；    ： 300px 宽度；    高度： 300px ；    边界半径： 50% ；    背景：# 093 b 62 ；          盒阴影：插图 0px 0px 30px RGBA（ 0 , 0 , 0 , 0.3 ）；      WebKit盒阴影：插图 0px 0px 30px RGBA（ 0 , 0 , 0 , 0.3 ）；            WebKit的过渡：所有 0.5 s缓解；      -moz过渡：</trans>

如果我们把我们的实时预览一下，我们应该有一个漂亮的大循环和其他各种分散的元素，我们将下。

步骤4：CSS菜单

为我们的下一个技巧，我们将风格的菜单项。要做到这一点，目标锚，添加一些margin和padding，设置宽度和颜色，带出文字装饰风格的字体。针对悬停状态和添加背景色。这里的代码：

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

<trans data-src=".menu a {    margin-right : -4px ;    padding : 10px 30px ;    width : 50px ;    color : #333 ;    text-decoration : none ;    font : 15px / 25px Helvetica , Arial , sans-serif ; }   .menu a:hover {    background : #eee ; }">{    。菜单右边距：- 4px ；    填充： 10px 30px ；    宽 50px ；    颜色：# 333 ；    文字装饰：无；    字体： 15px / 25px Helvetica ， Arial ， sans-serif ；      }          菜单。</trans>

现在，如果我们看看我们生活的预览，在我们的菜单的链接会好看得多。列表项都坏了所以我们会攻击那些下。

步骤5：小圆圈的CSS

创建的小圈子，我们第一个目标的清单项目和建立大范围非常相似：使高度和宽度相等和设定边界半径为50%。也一定要清楚要点，背景设置为白色，和风格的字体就像你看到下面。

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

<trans data-src=" /*LITTLE CIRCLES*/ . circle li {    position : absolute ;    width : 50px ;    height : 50px ;    border-radius: 50% ;    background : white ;    list-style : none ;    text-align : center ;    font : 20px / 50px Helvetica , Arial , sans-serif ; }">／＊小圆圈* /    。圈里{    位置：绝对的；    宽 50px ；    高度： 50px ；    边界半径： 50% ；    背景：白；    列表样式：无；    文本对齐：中心 ；</trans>

这是棘手的部分。以上，我们给每一个圈子的绝对定位，所以现在我们要走到的地方。我们可以针对每个人的圈子n的孩子，然后使用返回顶部和左推动它们我们想要的地方。最后，我们要让每个数的顶面大的圆的外边缘，当整个元件旋转时，在顶部的数量始终是右侧。我们通过使用CSS变换。

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90

<trans data-src=". circle li:nth-child( 1 ) {    top : 15px ;    left : 125px ; }   . circle li:nth-child( 2 ) {    top : 125px ;    left : 235px ;    -webkit-transform: rotate( 90 deg);    -moz-transform: rotate( 90 deg);    -ms-transform: rotate( 90 deg);    -o-transform: rotate( 90 deg);    transform: rotate( 90 deg); }   . circle li:nth-child( 3 ) {    top : 235px ;    left : 125px ;    -webkit-transform: rotate( 180 deg);    -moz-transform: rotate( 180 deg);    -ms-transform: rotate( 180 deg);    -o-transform: rotate( 180 deg);    transform: rotate( 180 deg); }   . circle li:nth-child( 4 ) {    top : 125px ;    left : 15px ;    -webkit-transform: rotate( 270 deg);    -moz-transform: rotate( 270 deg);    -ms-transform: rotate( 270 deg);    -o-transform: rotate( 270 deg);    transform: rotate( 270 deg); }">李：nth-child。圈（ 1 ）{    顶： 15px ；    左： 125px ；      }          。圆里：nth-child（ 2 ）{    顶： 125px ；    左： 235px ；      WebKit的变换：旋转（ 90 度）；      -moz变换：旋转（ 90 度）；      MS变换：旋转（ 90 度）；      - o-transform：旋转（ 90 度）；    变换：旋转（ 90 度）；      }          。圆里：nth-child（ 3 ）{    顶： 235px    ；左： 125px ；      WebKit的变换：旋转（ 180 °）；      -moz变换：旋转（ 180 °）；      MS变换：旋转（ 180 °）；      - o-transform：旋转（ 180 °）；    变换：旋转（ 180 °）；      }          。圈里：nth-child（ 4 ）{    顶： 125px ；    左： 15px ；      WebKit的变换：旋转（ 270 deg</trans>

如果我们把我们的预览现在看来，一切都很好。有一件事不是虽然…

步骤6：内圆的CSS

我们最初的概念不只是一个大圆圈，圈内也有中心。我们可以把没有任何额外的HTML标记使用我们的老朋友之前。创建一个元素之前包装，设置内容“DS”，使它成为一个圆圈一样（这一次130px），对齐和样式的文本，将它与Z指数上快速到位的绝对定位。

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47

<trans data-src=" /*INNER CIRCLE*/ .wrapper:before {    content : "DS";    text-align : center ;    font : 70px / 135px Georgia, Times, serif ;    color : #efefef ;    position : absolute ;    top : 140px ;    left : 110px ;    z-index : 10 ;    width : 130px ;    height : 130px ;    border-radius: 50% ;    background : #fff ;      -webkit-box-shadow: 3px 3px 10px rgba( 0 , 0 , 0 , 0.3 );    box-shadow: 3px 3px 10px rgba( 0 , 0 , 0 , 0.3 ); }">／＊内圈* /    。包装：在{    内容：“DS”；    文本对齐：中心；    字体： 70px / 135px 格鲁吉亚，倍，衬线；    颜色：# efefef；    位置：绝对的；    顶：{ height : 140px ；    左：来 ；   Z指数： 10 ；    宽度： 130px ；    高度： 130px ；    边界半径： 50% ；    背景：# FFF；       </trans>

看起来好多了！这样，我们的视觉造型完全结束。现在剩下的就是把这个吸盘的生活。

步骤7：将圆的CSS

使我们的菜单的自旋，我们要使用远程悬停技巧结合CSS变换。当用户将鼠标悬停在一个菜单项，整个圆元素将自旋，相应的数字上。

这一最棘手的部分是找出选择器。我们开始在最高级别包含圆div和菜单项。这当然是学我们缩小我们的选择菜单下的菜单和目标特定的孩子在盘旋。最后，我们告诉浏览器，我们要采取行动任何兄弟姐妹的项目在一类的“圆”。这里所说的，看起来像在实践中：

1 2 3 4

<trans data-src=".menu > .two:hover ~ . circle { }">。菜单>。二：悬停~圈      } {。</trans>

这是一个怎么样的选择，但它能够完成任务，是我们的有趣的小实验足够好。现在，由于我们的目标是第二圈在这里，我们需要旋转90度的全部。同时，我们要逆时针方向，数量将负：

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17

<trans data-src=".menu > .two:hover ~ . circle {    -webkit-transform: rotate( -90 deg);    -moz-transform: rotate( -90 deg);    -ms-transform: rotate( -90 deg);    -o-transform: rotate( -90 deg);    transform: rotate( -90 deg); }">。菜单>。二：悬停~。循环{      WebKit的变换：旋转（ -90 度）；      -moz变换：旋转（ -90 度）；      MS变换：旋转（ -90 度）；      - o-transform：旋转（ -90 度）；    变换</trans>

这是，现在我们只是简单地使用这种技术，在所有四个圈。我们从一个旋转0，然后90，180，最后，270。

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86

<trans data-src=" /*HOVER STATES*/ .menu > .one:hover ~ . circle {    -webkit-transform: rotate( 0 deg);    -moz-transform: rotate( 0 deg);    -ms-transform: rotate( 0 deg);    -o-transform: rotate( 0 deg);    transform: rotate( 0 deg); }   .menu > .two:hover ~ . circle {    -webkit-transform: rotate( -90 deg);    -moz-transform: rotate( -90 deg);    -ms-transform: rotate( -90 deg);    -o-transform: rotate( -90 deg);    transform: rotate( -90 deg); }   .menu > .three:hover ~ . circle {    -webkit-transform: rotate( -180 deg);    -moz-transform: rotate( -180 deg);    -ms-transform: rotate( -180 deg);    -o-transform: rotate( -180 deg);    transform: rotate( -180 deg); }   .menu > .four:hover ~ . circle {    -webkit-transform: rotate( -270 deg);    -moz-transform: rotate( -270 deg);    -ms-transform: rotate( -270 deg);    -o-transform: rotate( -270 deg);    transform: rotate( -270 deg); }">/ * * / 悬停状态 。菜单>。一：悬停~。循环{      WebKit的变换：旋转（ 0 度）；      -moz变换：旋转（ 0 度）；      MS变换：旋转（ 0 度）；      - o-transform：旋转（ 0 度）；    变换：旋转（ 0 度）；      }          。菜单>。二：悬停~。循环{      WebKit的变换：旋转（ -90 度）；      -moz变换：旋转（ -90 度）；      MS变换：旋转（ -90 度）；      - o-transform：旋转（ -90 度）；    变换：旋转（ -90 度）；      }          。菜单>。三：悬停~。循环{      WebKit的变换：旋转（- 180 度）；      -moz变换：旋转（- 180 度）；      -质谱变换：旋转（- 180 度）；      - o-transform：旋转（- 180 度）；    变换：旋转（- 180 度）；      }          。菜单>。四：悬停~。循环{      WebKit的变换：旋转（- 270 deg）；      -moz变换：旋转（</trans>

看一看！

恭喜你，你就完了！现在是时候来看看我们的辛勤劳动的成果。这是一个演示。

演示： 点击这里发射。

一如既往，谢谢你的阅读和随意留下评论让我知道你在想什么。有很多不同的方式，你可以处理这个项目，你会如何做的不同吗？