组件-菜单

菜单组件是一个用于展示导航菜单的组件。它可以水平或垂直显示，支持多级子菜单。

水平-菜单

Preview
Code

菜单1

菜单2

菜单3

子菜单1

子菜单2

子子菜单1

子子菜单2

子菜单3

<div hx-ext="bny-menu">
    <div class="item">
        <div class="trigger">
            <span>菜单1</span>
        </div>
    </div>
    <div class="item">
        <div class="trigger">
            <span>菜单2</span>
        </div>
    </div>
    <div class="item">
        <div class="trigger">
            <span>菜单3</span>
            <i class="bny-icon icon-right"></i>
        </div>
        <div class="sub-menu">
            <div class="item">
                <div class="trigger">
                    <span>子菜单1</span>
                </div>
            </div>
            <div class="item">
                <div class="trigger">
                    <span>子菜单2</span>
                    <i class="bny-icon icon-right"></i>
                </div>
                <div class="sub-menu">
                    <div class="item">
                        <div class="trigger">
                            <span>子子菜单1</span>
                        </div>
                    </div>
                    <div class="item">
                        <div class="trigger">
                            <span>子子菜单2</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="trigger">
                    <span>子菜单3</span>
                </div>
            </div>
        </div>
    </div>
</div>

菜单-htmx

Preview
Code
Json

<div hx-ext="bny-menu" hx-get="/test/data/menu.json" hx-trigger="load"
    hx-headers='{"Accept": "application/json"}'>
</div>

{
    "data": [
        {
            "id": 1,
            "name": "菜单1",
            "attr": {
                "other": "other",
                "data-name": "菜单1-1"
            }
        },
        {
            "id": 2,
            "name": "菜单2"
        },
        {
            "id": 3,
            "name": "菜单3",
            "child": [
                {
                    "id": 4,
                    "name": "菜单3-1"
                },
                {
                    "id": 5,
                    "name": "菜单3-2"
                }
            ]
        }
    ]
}

垂直-菜单

Preview
Code

菜单1

菜单2

菜单3

子菜单1

子菜单2

子子菜单1

子子菜单2

子菜单3

<div style="width: 220px;">
    <div hx-ext="bny-menu" mode="vertical">
        <div class="item">
            <div class="trigger">
                <span>菜单1</span>
            </div>
        </div>
        <div class="item">
            <div class="trigger">
                <span>菜单2</span>
            </div>
        </div>
        <div class="item">
            <div class="trigger">
                <span>菜单3</span>
                <i class="bny-icon icon-right"></i>
            </div>
            <div class="sub-menu">
                <div class="item">
                    <div class="trigger">
                        <span>子菜单1</span>
                    </div>
                </div>
                <div class="item">
                    <div class="trigger">
                        <span>子菜单2</span>
                        <i class="bny-icon icon-right"></i>
                    </div>
                    <div class="sub-menu">
                        <div class="item">
                            <div class="trigger">
                                <span>子子菜单1</span>
                            </div>
                        </div>
                        <div class="item">
                            <div class="trigger">
                                <span>子子菜单2</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="trigger">
                        <span>子菜单3</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

菜单颜色

Preview
Code

菜单1

菜单2

菜单3

菜单1

菜单2

菜单3

菜单1

菜单2

菜单3

菜单1

菜单2

菜单3

菜单1

菜单2

菜单3

<div hx-ext="bny-menu" color="white">...</div>
<div hx-ext="bny-menu" color="green">...</div>
<div hx-ext="bny-menu" color="red">...</div>
<div hx-ext="bny-menu" color="yellow">...</div>
<div hx-ext="bny-menu" color="blue">...</div>

键盘导航

Preview
Code

Tab 聚焦到菜单项后：

水平菜单：←/→ 切换顶级，↓ 进入子菜单，Enter 切换/激活

垂直菜单：↑/↓ 切换同级，→ 进入子菜单，← 回到父级

Enter / Space：模拟点击

Escape：折叠当前展开的子菜单并回到父级

// 键盘交互无需额外属性，菜单项自动获得 tabindex=0
<div hx-ext="bny-menu">
    <div class="item">
        <div class="trigger">菜单项（Tab 聚焦后用方向键导航）</div>
    </div>
</div>

API

标签属性

属性	默认值	必须	描述	版本
hx-ext	bny-menu	是	标签扩展名
model		否	菜单模型:'vertical'

水平-菜单
菜单-htmx
垂直-菜单
菜单颜色
API