如何将无序列表定位在一个圆圈中？答案

【问题标题】：how to position an unordered list in a circle?如何将无序列表定位在一个圆圈中？
【发布时间】：2013-04-08 13:24:15
【问题描述】：

我想创建一个类似this 的页面，但我只是在学习 javascript/jquery。我真的很喜欢这个菜单，但我不知道如何将无序的菜单列表定位成一个圆圈，然后如何制作悬停效果。

这是 html 菜单：

        <nav>
            <ul>
                <li><a href="#">Menu1</a></li>
                <li><a href="#">Menu2</a></li>
                <li><a href="#">Menu3</a></li>
                <li><a href="#">Menu4</a></li>
                <li><a href="#">Menu5</a></li>
                <li><a href="#">Menu6</a></li>
            </ul>
        </nav>

【问题讨论】：

您希望它们是静态的还是动态的？我的意思是，总是定位在同一个地方，还是？
在给定的 Url 中，圆圈不是 css，这是背景中的图像，您可以在背景中使用图像。
由于您有一个示例链接，我建议您查看源代码以了解它是如何完成的。
看这里stackoverflow.com/questions/10152390/…
您可以随时查看您在网上找到的 CSS/JS 奇迹的来源；）。如果你想这样做是可以的，但它看起来很可怕。那只是我的意见:)

标签： javascript jquery css menu hover

【解决方案1】：

我试图在 jsFiddle page 上重新创建您正在寻找的内容。它绝对不是没有错误的，但希望它能帮助你理解制作循环列表所需的 jQuery 和 CSS。

CSS：

a {
position: absolute;
text-decoration: none;
border: 1px solid black;
width:98px;
height:98px;
border-radius:50px;
line-height:100px;
text-align:center;

}

我以绝对方式定位链接，以便我们可以操纵它们的顶部/左侧位置。宽度和高度约为边框半径的一半，这将为每个链接提供圆形形状。剩下的css就是定位文字了。

jQuery 代码的开始：

$(function() {
circle_radius = 100;
$links = $('nav ul li a');
total_links = $links.size();

第一个变量circle_radius 是圆形菜单本身的半径（不是单个链接）。

$links 获取导航标签中的完整链接列表，total_links 存储您在该导航中拥有多少链接。这对于确定每个链接的位置很重要。

更多 jQuery 代码：

$links.each(function(index) {
    $(this).attr('data-index',index);
    animateCircle($(this), 1);
});

我们要做的第一件事是遍历$links 中的每个单独的链接，并为其添加一个索引值并调用animateCircle(...)。我们传递链接元素本身和另一个值（该值将用于鼠标悬停效果）。

绕圈定位：

function animateCircle($link, expansion_scale) {
    index = $link.attr('data-index');
    radians = 2*Math.PI*(index/total_links);
    x = -(Math.sin(radians)*circle_radius*expansion_scale);
    y = -(Math.cos(radians)*circle_radius*expansion_scale);
    $link.animate({
        top: x+'px',
        left: y+'px'
    }, 200);
}

在animateCircle(...)中，我们首先获取$link的索引。然后我们使用一些好的旧三角函数来计算$link 位置的角度（以弧度为单位），使用索引和链接总数。接下来，我们使用radians 计算$link 的x 和y 位置。注意，我在这里有一个叫做expansion_scale 的东西，这是我们传递给这个函数的。目前，这只是 1，因此不会影响 x 和 y 值。最后，一旦我们有了 x 和 y 值，我们就可以使用新值对$link 的顶部和左侧属性进行动画处理。

鼠标悬停时动画圆圈：

$('li a').hover(function() {
    animateCircle($(this), 1.5)
}, function() {
    animateCircle($(this), 1)
});

现在使用animateCircle(...) 可以轻松实现此效果。这就是expansion_scale 最终发挥作用的地方。当我们将鼠标悬停在链接上时，它会调用animateCircle(...)，expansion_scale 为 1.5，这使得该特定链接比其他链接移动 1.5 倍，从而为您提供简洁的效果。最后，当您移出鼠标时，它会将链接移回其原始位置。

【讨论】：

【解决方案2】：

这个菜单也很酷：https://github.com/liri/moonMenuJS

试试看，你可以创建一些漂亮的样式来应用它。

【讨论】：