Javascript 如何在移动web上使用CSS、Java脚本创建半圆菜单（子项）？

当我用右手上网时，我想使用半圆菜单

有人能教我如何在移动网络上用CSS、Java脚本创建半圆菜单（子项）吗

照片链接：

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

2.当我点击其中一个主级项目时，子项目可以下拉

---

衷心感谢。

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

演示

代码

功能绘图菜单（选中）{
$（“svg”）.empty（）；
变量文本=[”國際", "生活", "文教", "健康", "科技", "新奇"],
子文本=[
["這裡", "有一大堆", "目錄"],
[“A”、“B”、“C”]，
[“A”、“B”、“C”]，
[“A”、“B”、“C”]，
["資訊3C“科學發展", "自然環境", "科技熱門"],
[“A”、“B”、“C”]
];
变量isSelected=已选择！==未定义，
columns=text.length，
角度=12，//每个菜单的角度（度）
子角度=8，//每个子菜单的角度（度）
angleOut=（180-角度*列-（isSelected？子角度*子文本[selected]。长度：0））/2*Math.PI/180；
角度*=数学PI/180；
子角*=Math.PI/180；
var originX=300，
初始值=300，
上部=getXY（角度，220），
lower=getXY（Math.PI-angleOut，220）；
$（“”）attr（“d”[
“M”，上[0]，上[1]，
“L”，originX，originY，
“L”，下[0]，下[1]
].join（“”）。附录（“svg”）；
对于（变量i=0；i

基本组成部分 （形状）：

:

文本

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

没有人有时间去约会！ 不是每个人都愿意或让患者去处理这些讨厌的SVG节点。别担心，去救援吧

---

Raphaël是一个丰富的矢量图形库，您可以用很少的代码绘制矢量图形并为其设置动画。如果您是这样的人，那么您一定要尝试一下。

使用

边界半径可以实现圆。

。您不必在Javascript中处理单击事件，

：active

带有子选择器c的伪类我注意到你可以阅读中文，你知道这个网站吗？这不是垃圾邮件，我只想给你看一下它的导航示例（见左下角）。它使用精灵图像来显示圆圈。@ChiChou-我看得懂你那行文字…@AdairChen—最好的方法是使用SVG创建

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>