旋转轮作为菜单答案

【问题标题】：rotating wheel as menu旋转轮作为菜单
【发布时间】：2013-10-07 09:31:41
【问题描述】：

有没有一种简单的方法来制作一个只有 php、html 和 css 的旋转轮作为菜单？这个想法是页面底部的半圈，当您单击左侧时，轮子转动 -90 度，当您单击右侧时，轮子转动 90 度。如果没有 jQuery，这可能吗？

【问题讨论】：

标签： css menu rotation

【解决方案1】：

这在一定程度上是可能的，但它有点先进。查看 https://developer.mozilla.org/en-US/docs/Web/CSS/transform 了解 CSS 中的 2D 转换的概述。

您可能需要 JavaScript 将不同的类应用于您的元素以保持旋转，但这取决于您希望菜单如何运行。

这是一个example，当您将鼠标悬停在figure 上方时，它会逆时针旋转90 度，单击它时会顺时针旋转90 度（由jQuery 辅助）。

这只是将 CSS 转换属性应用于元素（请注意，这需要供应商前缀）：

figure:hover {
    -webkit-transform:rotate(-90deg);
    -moz-transform:rotate(-90deg);
    transform:rotate(-90deg);
}

您也可以从 Ana 对这个问题的精彩回答中受益：Creating a Radial Menu in CSS

【讨论】：

【解决方案2】：

您可以在两个divs 内构建完整的轮子——一个内部容器和一个外部容器。将外部容器设置为overflow:hidden; 将裁剪除您希望可见的部分之外的所有部分。然后你可以通过对内部容器应用 CSS3 旋转来旋转轮子（James' 回答很好地展示了这种技术）。

我不确定如何使用单击事件触发旋转而不必求助于 jQuery，但您可以使用 position:absolute; 在外部容器的左侧和右侧放置一个不可见的 div（不要不要忘记将position:relative; 应用到外部容器div)，并从它们的悬停状态触发旋转。

HTML 看起来像这样：

<div class="outer">
    <div class="rotate right"></div>
    <div class="rotate left"></div>
    <div class="inner">
        {Your menu here}
    </div>
</div>

css 是：

.outer{
    overflow:hidden;
    position:relative;
    width:600px;
    height:100px;
}
.rotate{
    position:absolute;
    top:0;
    width:100px;
    height:100px;
}
.right{
    right:0;
}
.left{
    left:0;
}
.right:hover .inner{
    {rotate-right code goes here}
}
.left:hover .inner{
    {rotate-left code goes here}
}

我同意 James 的观点，您可能需要使用一些 jQuery 来使旋转保持不变：可能只是一个 addClass 或类似的简单的东西就可以解决问题。

然而，最大的问题是，您是否想要隐藏部分菜单？如果它是您网站的主要导航，您应该将其全部展示出来，而不是隐藏其中的一部分。

编辑：

玩了James Donnelly 的优秀小提琴来展示wheel in action（我的工作有点小题大做，但我们正在到达那里......）。只有两个菜单项，它们现在只是divs——真的应该是lis。我使用了 James 的 jQuery，但将 toggleClass 更改为 addClass 并添加了一个 removeClass（每个都通过单击相关的左/右 div 来触发以获得左/右按钮功能。

the new fiddle

原来:hovers 只会使事情复杂化。这确实使用了一点 jQuery，所以它不能完全回答这个问题，但老实说，没有它，我看不出有一种方法可以使旋转保持在原位。有人知道吗？

不过，我对菜单项的定位有点乱，所以如果有人有更简洁的方法来写这个，那么请潜入！

【讨论】：