Question

我想在菜单按钮（半圆圈）周围放置菜单圈。我认为可以使用transform: rotate(x deg)为元素执行此操作，但它不起作用。我不知道自己做错了什么......

也应该可以用jquery做到这一点，我想......会更好吗？

<body>
  <div id="overlay"></div>
  <footer>
    <div id="menuopen"> <span class="buttonmenu"> - </span>
      <div> 
        <a class="infoactive" href="#"><span class="entypo-info"></span></a> 
        <a class="sights" href="sehensw%C3%BCrdigkeiten.html"><span class="fontawesome-eye-open"></span></a> 
        <a class="food" href="essen.html"><span class="fontawesome-food"></span></a> 
        <a class="sports" href="sportfreizeit.html"><span class="maki-soccer"></span></a> 
        <a class="calendar" href="veranstaltungen.html"><span class="fontawesome-calendar"></a> 
        <a class="map" href="karte.html"><span class="typicons-globe"></a> 
      </div>
    </div>
    <div id="menuclosed"> <span class="buttonmenu"> + </span> </div>
  </footer>
  <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.1.min.js" type="text/javascript">      </script> 
<script src="script.js" type="text/javascript"></script> 
$(document).ready(function () {
    $(".buttonmenu").click(function () {
        $("#overlay, #menuclosed, #menuopen").fadeToggle();
    });
});

抱歉，我在这里输入我的CSS有问题......但它在jsfiddle：http://jsfiddle.net/AMjPh/

Answer 1

您实际上可以使用rotate实现此目的，但您需要先进行一些调整。要在曲线上设置的元素需要很长。

您需要将“圈子中心”（您的buttonmenu）的高度定义为所需位置。
您需要使用将其转换原点设置为低端 transform-origin: bottom center;
您需要旋转具有不同度数值的每个元素
您需要逆时针旋转其包装
如果你想让他们的内容保持水平，你需要调整这些元素本身的一些反向旋转

这张照片可能有助于说明 Rotation picture example

Answer 2

您应该定位子菜单绝对，首先尝试将所有子菜单绝对定位在同一位置（主菜单的左侧）。然后，只为子菜单项应用不同的rotate变换，还要注意transform-origin，应计算它以指向主菜单的中心。事实上，你的代码有很多东西可以改进，但我只是编辑它以显示所需的结果。重要的是要了解这个想法。

#menuopen div a {     
  width: 70px;
  height: 70px;
  margin: 0;
  background-color: hsla(0, 0%, 69%, 0.3);
  color: #fff5ec;
  text-decoration: none;
  -webkit-border-radius: 70px;
  -moz-border-radius: 70px;
  border-radius: 70px;
  padding: 10px;    
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;     
  /* add this */
  position:absolute;
  left: calc(50% - 200px);
  /* this will position the submenus on the same line with the button menu */
  bottom: -40px;
  /* set the transform-origin to the center point of the button menu */
  -webkit-transform-origin: calc(100% + 130px) 50%;
}

.infoactive {
  border: 2px solid hsla(72, 63%, 53%, 1);  
  -webkit-transform: rotate(15deg);
}
.sights {
  -webkit-transform: rotate(45deg);
}
.food {
  -webkit-transform: rotate(75deg);
}
.sports {
  -webkit-transform: rotate(105deg);
}
.calendar {
  -webkit-transform: rotate(135deg);
}
.map {
  -webkit-transform: rotate(165deg);
}

您可以通过按钮菜单80x80和子菜单（70x70）的固定大小计算所需的值。事实上，你可以让它变得更有活力，但它是另一个部分，你应该通过尝试改进当前的代码来自己找到它。

Demo.

请使用基于webkit的浏览器测试演示。

如何围绕半圆定位圆形元素

2 个答案:

Demo.