how to position an unordered list in a circle?

Question

I'd like to create a page like this but I'm just learning javascript/jquery. I really like the menu,but i have no idea how to position the unordered menu list in a circle and then how to make the hover effect.

Here's the html menu:

        <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>

You want them static or dynamic? I mean, always positioned in the same place or? — Praveen Kumar Purushothaman, Apr 16 '13 at 08:17
In the given Url, the circle is not the css this is image in background and you can use image in backgrond. — Code Lღver, Apr 16 '13 at 08:20
As you have a link to an example, I would suggest to take a look at the source to see how it's done. — romainberger, Apr 16 '13 at 08:27
Look here http://stackoverflow.com/questions/10152390/dynamically-arrange-some-elements-around-a-circle — Mikhail, Apr 16 '13 at 08:28
You can always view the source of the CSS/JS wonders you find online ;) . it is ok if you want to do it, but it looks horrible. That only _my_ opinion :) — Ejaz, Apr 16 '13 at 08:34

score 5 · Answer 1 · answered Apr 16 '13 at 09:40

I tried to recreate what you are looking for on this jsFiddle page. It's definitely not bug free, but hopefully it will help you understand the jQuery and CSS needed to make a circular list.

CSS:

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

}

I've positioned the links in an absolute fashion, so that we can manipulate their top/left positions. The width and height are about half of the border radius, which will give the circular shape to each link. The rest of the css is to position the text.

Start of the jQuery code:

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

The first variable circle_radius is the radius of the circular menu itself (not the individual links).

$links obtains the full list of links in your nav tag and total_links stores how many links you have in that nav. This will be important in determining each link's position.

More jQuery code:

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

The first things we do is loop through each of individual links in $links and add an index value to it and call animateCircle(...). We pass the link element itself and another value (this value will be used for the mouseover effect).

Positioning in a circle:

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);
}

In animateCircle(...), we first obtain the $link's index. Then we use some good old trig to calculate the angle (in radians) of the $link's position using the index and total number of links. Next, we use radians to calculate the x and y position for the $link. Note, I have something called expansion_scale here, which is what we passed into this function. For now, this is just 1, so it doesn't affect the x and y values. Finally, once we have the x and y values, we animate the $link's top and left attributes with the new values.

Animating the circles on mouse-over:

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

This effect is easy to accomplish now with animateCircle(...). This is where expansion_scale finally comes into play. When we mouse-over the link, it will call animateCircle(...) with an expansion_scale of 1.5, which makes this specific link move out 1.5x further than the other links, giving you that neat effect. Finally, when you mouse-out, it moves the link back to its original position.

score 0 · Answer 2 · answered Mar 05 '14 at 20:42

0

this menu is cool too: https://github.com/liri/moonMenuJS

try it out, you can create some nice style to apply on it.

answered Mar 05 '14 at 20:42

ninj

11
1

how to position an unordered list in a circle?

2 Answers2