有没有一种简单的方法可以将旋转轮制作为只有 php、html 和 css 的菜单?这个想法是页面底部的半圈,当您单击左侧时,轮子转动 -90 度,当您单击右侧时,轮子转动 90 度。没有jQuery这可能吗?
2 回答
您可以在两个 s 内构建完整的轮子div
- 一个内部容器和一个外部容器。将外部容器设置为overflow:hidden;
将裁剪除您希望可见的部分之外的所有部分。然后你可以通过对内部容器应用 CSS3 旋转来旋转轮子(詹姆斯的回答很好地展示了这种技术)。
我不确定如何使用单击事件触发旋转而不必求助于 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 ) 的出色小提琴一起演奏,以展示轮子的运行情况(对我来说有点打架,但我们正在到达那里......)。只有两个菜单项,它们现在只是div
s - 应该是li
s 真的。我使用了 James 的 jQuery,但更改toggleClass
为addClass
并添加了一个removeClass
(每个都通过单击相关的左/右触发div
以获得左/右按钮功能。
原来:hover
s 只是复杂的事情。这确实使用了一点 jQuery,所以它不能完全回答这个问题,但老实说,没有它,我看不出有一种方法可以使旋转保持在原位。有谁更了解?
不过,我对菜单项的定位有点乱,所以如果有人有更简洁的方法来写这个,那么请潜入!
这在一定程度上是可能的,但它有点先进。查看https://developer.mozilla.org/en-US/docs/Web/CSS/transform以了解 CSS 中的 2D 转换的概述。
您可能需要 JavaScript 将不同的类应用于您的元素以保持旋转,但这取决于您希望菜单如何运行。
这是我创建的一个示例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