如何在移动网络上使用CSS,Java Script创建半圆菜单(子项)？

Question

当我用右手冲浪移动网络时,我想使用半圆菜单.

有人可以教我如何用CSS,Java Script在移动网络上创建半圆菜单(子项)吗？

照片链接:

1.有一个半圆菜单按钮,可以打开和关闭.

2.当我单击其中一个主要项目时,子项目可以下拉.

真诚的感谢.

Answer 1

您可以使用SVG在HTML5中实现此设计,因为现在大多数移动浏览器都支持SVG.

演示

http://jsfiddle.net/DerekL/dQBzd/show

码

http://jsfiddle.net/DerekL/dQBzd/

function drawMenu(selected) {
    $("svg").empty();
    var texts = ["??", "??", "??", "??", "??", "??"],
        subTexts = [
            ["??", "????", "??"],
            ["A", "B", "C"],
            ["A", "B", "C"],
            ["A", "B", "C"],
            ["??3C", "????", "????", "????"],
            ["A", "B", "C"]
        ];

    var isSelected = selected !== undefined,
        columns = texts.length,
        angle = 12,                       //Angle (degree) of each menu
        subAngle = 8,                     //Angle (degree) of each submenu
        angleOut = (180 - angle * columns - (isSelected ? subAngle * subTexts[selected].length : 0)) / 2 * Math.PI / 180;
    angle *= Math.PI / 180;
    subAngle *= Math.PI / 180;

    var originX = 300,
        originY = 300,
        upper = getXY(angleOut, 220),
        lower = getXY(Math.PI - angleOut, 220);

    $("<path/>").attr("d", [
        "M", upper[0], upper[1],
        "L", originX, originY,
        "L", lower[0], lower[1]
    ].join(" ")).appendTo("svg");

    for (var i = 0; i < columns; i++) {
        var group = $("<g>").addClass("item button").attr("data-menu", i).appendTo("svg");
        group.addClass(isSelected && selected == i ? "selected" : "");
        var angleCur = angleOut + angle * i +
            ((isSelected && selected < i) ? subAngle * subTexts[selected].length : 0),
            originX = 300,
            originY = 300,
            topL = getXY(angleCur, 300),
            topR = getXY(angleCur, 220),
            bottL = getXY(angleCur + angle, 300),
            bottR = getXY(angleCur + angle, 220);
        createSlice([topL, topR, bottL, bottR], group);
        $("<text>").html(texts[i]).attr({
            x: (topL[0] + topR[0] + bottL[0] + bottR[0]) / 4 - 50 / 2,
            y: (topL[1] + topR[1] + bottL[1] + bottR[1]) / 4 + 40 / 4
        }).appendTo(group);
        createSlice([
            getXY(angleCur, 220), getXY(angleCur, 50),
            getXY(angleCur + angle, 220), getXY(angleCur + angle, 50)
        ], group);
        if (isSelected && i == selected) {
            for (var j = 0; j < subTexts[selected].length; j++) {
                var angleSub = angleCur + angle + subAngle * j,
                    g = $("<g>").addClass("subItem").appendTo("svg");
                createSlice([
                    getXY(angleSub, 220), getXY(angleSub, 50),
                    getXY(angleCur + angle + subAngle * (j + 1), 220),
                    getXY(angleCur + angle + subAngle * (j + 1), 50)
                ], g);
                $("<text>").html(subTexts[selected][j]).attr({
                    x: 100,
                    y: 316,
                    transform: "rotate(" + [-((angleSub) * 180 / Math.PI - 90),
                        300, 300
                    ].join(",") + ")"
                }).appendTo(g);
            }
        }
    }

    (function () {
        var group = $("<g>").addClass("menu button").appendTo("svg"),
            top = getXY(angleOut, 50),
            bott = getXY(Math.PI - angleOut, 50);
        $("<path/>").attr("d", [
            "M", top[0], top[1],
            "L", originX, originY,
            "L", bott[0], bott[1],
            "A", 50, 50, angle * columns, 0, 1, top[0], top[1],
            "Z"
        ].join(" ")).addClass("button").appendTo(group);
        $("<text>").html("menu").attr({
            x: 255,
            y: 303
        }).appendTo(group);
    })();

    $("body").html($("body").html());

    $("svg g.item").click(function () {
        drawMenu(
            $(this).attr("class").indexOf("selected")!==-1?
            undefined:
            +$(this).data("menu")
        );
    });
}

function getXY(angle, len) {
    return [300 - len * Math.sin(angle),
        300 - len * Math.cos(angle)];
}

function createSlice(coords, parent) {
    var angle = 12 * Math.PI / 180,
        topL = coords[0],
        topR = coords[1],
        bottL = coords[2],
        bottR = coords[3];
    $("<path/>").attr("d", [
        "M", topL[0], topL[1],
        "L", topR[0], topR[1],
        "A", 300, 300, angle, 0, 0, bottR[0], bottR[1],
        "L", bottL[0], bottL[1],
        "A", 300, 300, angle, 0, 1, topL[0], topL[1],
        "Z"
    ].join(" ")).addClass("button").appendTo(parent);
}

drawMenu();   //You can also do drawMenu(index), where "index" is the selected menu

基本组件

路径(形状):

<path/>

文字:

<text>Text</text>

在我的示例中,所有SVG节点都是JavaScript生成的,以便计算线的正确坐标.

是不是没有人有时间用于dat!

不是每个人都愿意或让病人弄乱这些令人讨厌的SVG节点.别担心,Raphaël要救援!

Raphaël是一个丰富的矢量图形库,可让您使用极少的代码绘制和动画矢量图形.如果你是那种人,那么你一定要试试这个.