Question

有一种简单的方法可以将纺车作为菜单只用php，html和css吗？这个想法是在页面底部有一个半圈，当你点击左侧时，轮子转动-90度，当你点击右侧时，轮子转90度。没有jQuery这可能吗？

Answer 1

你可以在两个div s内构建一个完整的轮子 - 一个内部容器和一个外部容器。将外部容器设置为overflow:hidden;会裁剪除您想要显示的部分以外的所有容器。然后你可以通过将CSS3旋转应用到内部容器来旋转方向盘（James'答案很好地展示了这种技术）。

我不确定如何使用click事件触发旋转而不必使用jQuery，但是你可以使用{{1}在外部容器的左侧和右侧放置一个不可见的div （不要忘记将position:absolute;应用于外部容器position:relative;），并从其悬停状态触发旋转。

HTML看起来像这样：

div

而css将是：

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

我同意詹姆斯的说法，你可能需要使用一些jQuery来使旋转变得坚持：可能只是一个.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 Donnelly的优秀的小提琴来展示wheel in action（对我来说是一个笨拙的工作，但我们到了那里......）。只有两个菜单项，而它们现在只是addClass - 应该是div真的。li。我使用了James的jQuery，但将toggleClass更改为addClass并添加了removeClass（每个都是通过点击相关的左/右div触发来获得左/右按钮功能。

the new fiddle

结果:hover只会使事情复杂化。这确实使用了一个小jQuery，因此它没有完全回答这个问题，但老实说，如果没有它，我真的看不到让旋转保持原状的方法。谁知道更好？

我对菜单项目的定位有点乱，所以如果有人用更干净的方式来写这个，那么请深入了解！

Answer 2

有可能在一定程度上，但它有点先进。查看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 个答案: