Создание кругового меню с помощью CSS

Ответ 1

Ниже приведен способ сделать это с помощью холста HTML, и он обнаруживает, где мышь идеально. Это не похоже на то же самое, что и у вас, но я не добавлял значки или разделительные линии (хотя сглаживание позволяет фону отображать немного между областями, создавая иллюзию линий, которые рисуются).

http://jsfiddle.net/jcubed111/xSajL/

Изменить - Исправить ошибку: http://jsfiddle.net/jcubed111/xSajL/2/

С большей работой вы можете сделать версию холста такой же, как и ваш макет, моя версия - только для того, чтобы отключить функциональность.

Вы также можете сделать это правильно с помощью css, затем наложить прозрачный a для обнаружения положения мыши и обеспечения функциональности связывания. Конечно, вы не могли бы использовать :hover для изменения внешнего вида областей.

Я тестировал только в Chrome 19.

Здесь приведен полный код ниже, если ссылка не работает:

HTML:

<a id='link'><canvas id='c' width='224' height='224' onmousemove="update(event);"></canvas></a>
<input id='i' />​​​​​​​​

CSS

#c{
    width:224px;
    height:224px;
}​

JS (выполняется при загрузке страницы и использует jquery):

ctx = $('#c')[0].getContext('2d');


function update(E) {
    ctx.clearRect(0, 0, 224, 224);
    if (E === false) {
        mx = 112;
        my = 112;
    } else {
        mx = E.clientX;
        my = E.clientY;
    }

    mangle = (-Math.atan2(mx-112, my-112)+Math.PI*2.5)%(Math.PI*2);
    mradius = Math.sqrt(Math.pow(mx - 112, 2) + Math.pow(my - 112, 2));

    $('#i').val("Not over any region");
    $('#link').attr('href', '');
    for (i = 0; i < 8; i++) {
        angle = -Math.PI / 8 + i * (Math.PI / 4);

        if (((mangle > angle && mangle < (angle + Math.PI / 4)) || (mangle > Math.PI*15/8 && i==0)) && mradius<=112 && mradius>=69) {
            ctx.fillStyle="#5a5a5a";
            $('#i').val("In region "+i);
            $('#link').attr('href', '#'+i);
        } else {
            ctx.fillStyle="#4c4c4c";
        }

        ctx.beginPath();
        ctx.moveTo(112, 112);
        //ctx.lineTo(112+Math.cos(angle)*112, 112+Math.sin(angle)*112);
        ctx.arc(112, 112, 112, angle, angle + Math.PI / 4, false);
        ctx.lineTo(112, 112);
        ctx.fill();


    }

    ctx.fillStyle = "#f2f2f2";
    ctx.beginPath();
    ctx.arc(112, 112, 69, 0, 2 * Math.PI, false);
    ctx.fill();
}

update(false);​

Ответ 2

Это можно сделать с помощью обычного HTML + CSS, но ради вашего здравомыслия, даже не пытайтесь. Это не стоит.

Вам будет намного лучше делать такие вещи в Canvas или SVG. Особенно, если вам не нужно поддерживать более старые версии IE.

Для решений Canvas и SVG я рекомендую найти подходящую библиотеку. В мире SVG я настоятельно рекомендую Raphael. Для Canvas, попробуйте Paper. Вы можете получить основы и работать с любой из этих библиотек только в нескольких строках кода.

Если вы должны сделать это в CSS (возможно, что критерии для вашего проекта или, может быть, вы просто обжора для наказания), вам нужно начать с использования border-radius, чтобы сделать круг. Затем нарисуйте линию сегментации с помощью 1px-широкоугольных блоков и поверните их с помощью transform. Вы получаете картину; это нелегко, как вы, наверное, уже обнаружили. И получить анимированную вещь будет полным кошмаром. Это можно сделать, и в качестве демонстрационной части того, что может быть достигнуто в CSS, было бы очень умно. Но когда все ваши целевые браузеры поддерживают SVG и Canvas, делать подобные вещи в CSS действительно просто умнее ради умения.

Ответ 3

Это зависит от нескольких вещей. Во-первых, вам нужно меню для анимации? Во-вторых, вам нужно строго использовать css? Вам нужно, чтобы меню работало идеально выровненным?

Если вам не нужно что-то 100% точно, вы можете использовать разделить круг на маленькие квадраты и использовать только css для его выполнения.

Если вам нужно, чтобы он был на 100% точным, и у вас нет анимации, вы можете попробовать <map> map

Если вам нужны анимации и 100% точные, то вам, скорее всего, понадобится что-то вроде RaphaelJS

Надеюсь, это поможет вам.