Circular-like dynamic menu - CSS3

Question

I'm using LESS. I designed my <li>s, with every proceedings, taking a different id with a PHP loop. And in CSS I've written a code like:

  li.page-2{
    margin-left: 15px;
  }

  li.page-3{
    margin-left: 25px;
  }

  li.page-4{
    margin-left: 22px;
  }

  li.page-5{
    margin-left: 18px;
  }

  ...

I've two questions regarding this, so, first of all, I want to share my intention: Circular Menu Design

I want to design a dynamic circular menu like this.

Q#1: How can I minimize the CSS coding dynamically, as I'm actually first, increasing the value, and after some places, decreasing the value of margin-left.
Q#2: Is there any other way I can do such circular dynamic menu?

Will there always be the same number of options? This would affect whether you needed to also dynamically set what percentage of the circle the
possible duplicate of [Creating a Radial Menu in CSS](http://stackoverflow.com/questions/13132864/creating-a-radial-menu-in-css) — epoch, Jan 28 '14 at 08:15
The best way is to style the menu from javascript, so you can dynamically set the styles based on the number of child elements in that list. — Shiva Avula, Jan 28 '14 at 08:22
@ScriptShiva I disagree. OP may end up with unused CSS selectors, but it would be a lot quicker and easier than dynamically creating the menu on each page load. — mikedidthis, Jan 28 '14 at 09:04

score 1 · Accepted Answer · answered Jan 28 '14 at 08:18

You can anyways minify this using LESS or SASS, as far as traditional CSS goes, than use CSS Positioning techniques to achieve so..

Demo

Explanation : Here, am using position: relative; container, further nesting absolute span elements which I later position using top and left properties.

If you are creating dynamic menus, than you need to nudge the nth elements using LESS as and when the menu items increase.

HTML

<div>
    <span>Page 1</span>
    <span>Page 2</span>
    <span>Page 3</span>
    <span>Page 4</span>
    <span>Page 5</span>
</div>

CSS

div {
    height: 150px;
    width: 150px;
    margin: 100px;
    border: 2px solid #000;
    border-radius: 50%;
    position: relative;
}

div span {
    font-family: Arial;
    font-size: 12px;
    position: absolute;
    width: 100px;
}

div span:nth-of-type(1) {
    left: 135px;
}

div span:nth-of-type(2) {
    left: 155px;
    top: 30px;
}

div span:nth-of-type(3) {
    left: 160px;
    top: 60px;
}

div span:nth-of-type(4) {
    left: 155px;
    top: 90px;
}

div span:nth-of-type(5) {
    left: 145px;
    top: 120px;
}

score 1 · Answer 2 · answered Mar 25 '14 at 14:34

The best way is to use some simple JavaScript as described here:

Animated radial menu with CSS3 and JavaScript

var items = document.querySelectorAll('.circle a');

for(var i = 0, l = items.length; i < l; i++) {
  items[i].style.left = (50 - 35*Math.cos(-0.5 * Math.PI - 2*(1/l)*i*Math.PI)).toFixed(4) + "%";

  items[i].style.top = (50 + 35*Math.sin(-0.5 * Math.PI - 2*(1/l)*i*Math.PI)).toFixed(4) + "%";
}

document.querySelector('.menu-button').onclick = function(e) {
   e.preventDefault(); document.querySelector('.circle').classList.toggle('open');
}

You can use CSS3 to animate the menu, still (this is better, performance-wise). You could add any number of elements and the JS will position them dynamically

Shiva Avula · Answer 3 · 2014-01-28T09:12:39.137

Creating redundant css styles for dynamic code is not a good practice. I suggest you to look into the javascript way. If anyone wants the JS way look into this approach. I have written the code in Jquery.

HTML

<ul id='circularMenu'>
    <li>Page 1</li>
    <li>Page 2</li>
    <li>Page 3</li>
    <li>Page 4</li>
    <li>Page 5</li>
    <li>Page 6</li>
</ul>

Javascript

var childCount = $('#circularMenu li').length();
var diff = 10; // The difference in margin for each item
var marginLeft = 0;
var currentChild = 1;

$('#circularMenu li').each(function(){
    //Skip condition, as we style this element within center elements section
    if(childCount%2 && currentChild == Math.ceil(childCount/2)) coutinue; 

    //Top half of the menu where margin is increased
    if(currentChild < childCount/2) {
        marginLeft += diff;
        this.css('margin-left', marginLeft+'px');
    }

    //Bottom half of the menu where margin is decreased
    else if(currentChild > childCount/2) {
        marginLeft -= diff;
        this.css('margin-left', marginLeft+'px');
    }

    //The center element, this is tricky as there can be one or two center elements
    else if(currentChild == Math.floor(childCount/2)) {
        marginLeft += diff;
        this.css('margin-left', marginLeft+'px');
        if(childCount%2){
            this.next().css('margin-left', marginLeft+'px');
        }
    }
});

This is untested code, there might be some errors. Please comment for any issues. The above code can be minified a lot, i just elaborated so you can understand the concept.

This is over kill. Waiting for the DOM and a javascript library to load for something that can be achieved nicely with CSS. — mikedidthis, Jan 28 '14 at 09:08
@mikedidthis What if there are 20 or say 40 menu items. I agree with you if the links are less. This adapts to the links dynamically and the edit can be done to single variable instead of 20 or 30 css rules. Anyway i just meant this for someone looking for this kind of way. My bad. — Shiva Avula, Jan 28 '14 at 09:15
I appreciate the intentions, but its a design issue. OP should decide on a limit, and at worst use PHP (as the question is tagged) to aid the CSS if they truly want a dynamic circle. — mikedidthis, Jan 28 '14 at 09:17

Circular-like dynamic menu - CSS3

3 Answers3