旋转轮作为菜单

Posted 2021-05-01

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

答案

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

我不确定如何使用点击事件触发旋转而不必诉诸jQuery，但你可以使用div将不可见的position:absolute;放置在外部容器的左侧和右侧（不要忘记将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}
}

我同意詹姆斯的观点，你可能需要使用一些jQuery来制作旋转：可能只是一个addClass或类似的东西应该做的伎俩。

然而，最大的问题是你想隐藏部分菜单吗？如果它是您网站的主要导航，您应该真正展示它而不是隐藏它的一部分。

编辑：

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

the new fiddle

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

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

另一答案

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