CutestUI - 菜单组件

现代化、响应式的菜单组件，提供丰富的样式变体和交互体验

CutestUI 菜单组件提供了一套完整的导航解决方案，适用于各种应用场景。组件支持多种样式变体、方向布局、嵌套子菜单和响应式设计，能够满足不同界面的导航需求。

特性

基本使用

垂直菜单

<nav class="menu -vertical">
    <ul class="menu-list">
        <li class="menu-item">
            <a href="#" class="menu-link">
                <i class="menu-icon fas fa-home"></i>
                <span class="menu-text">首页</span>
            </a>
        </li>
        <li class="menu-item">
            <a href="#" class="menu-link -active">
                <i class="menu-icon fas fa-th-large"></i>
                <span class="menu-text">仪表盘</span>
            </a>
        </li>
        <!-- 更多菜单项... -->
    </ul>
</nav>

水平菜单

<nav class="menu -horizontal">
    <ul class="menu-list">
        <li class="menu-item">
            <a href="#" class="menu-link">
                <i class="menu-icon fas fa-home"></i>
                <span class="menu-text">首页</span>
            </a>
        </li>
        <li class="menu-item">
            <a href="#" class="menu-link -active">
                <i class="menu-icon fas fa-th-large"></i>
                <span class="menu-text">仪表盘</span>
            </a>
        </li>
        <!-- 更多菜单项... -->
    </ul>
</nav>

菜单方向

垂直菜单

使用 .-vertical 类设置垂直方向

水平菜单

使用 .-horizontal 类设置水平方向

菜单状态

<nav class="menu -vertical">
    <ul class="menu-list">
        <li class="menu-item">
            <a href="#" class="menu-link">普通状态</a>
        </li>
        <li class="menu-item">
            <a href="#" class="menu-link -active">激活状态</a>
        </li>
        <li class="menu-item">
            <a href="#" class="menu-link -disabled">禁用状态</a>
        </li>
    </ul>
</nav>

样式变体

主要色彩菜单

使用 .-primary 类

次要色彩菜单

使用 .-secondary 类

成功色彩菜单

使用 .-success 类

警告色彩菜单

使用 .-warning 类

危险色彩菜单

使用 .-danger 类

信息色彩菜单

使用 .-info 类

深色主题菜单

使用 .-dark 类

浅色主题菜单

使用 .-light 类

嵌套子菜单

手风琴式菜单

使用 .menu-accordion 类启用手风琴效果，通过添加 .open 类来控制子菜单的显示状态

<nav class="menu -vertical menu-accordion">
    <ul class="menu-list">
        <li class="menu-item -has-submenu open">
            <a href="#" class="menu-link">
                <i class="menu-icon fas fa-folder"></i>
                <span class="menu-text">文件管理</span>
            </a>
            <div class="menu-submenu">
                <ul class="menu-submenu-list">
                    <li class="menu-submenu-item">
                        <a href="#" class="menu-submenu-link">
                            <i class="menu-icon fas fa-file-alt"></i>
                            <span class="menu-text">我的文档</span>
                        </a>
                    </li>
                    <!-- 更多子菜单项... -->
                </ul>
            </div>
        </li>
        <!-- 更多菜单项... -->
    </ul>
</nav>

级联式菜单

使用 .menu-cascading 类启用级联效果，鼠标悬停时显示子菜单

<nav class="menu -vertical menu-cascading">
    <ul class="menu-list">
        <li class="menu-item -has-submenu">
            <a href="#" class="menu-link">
                <i class="menu-icon fas fa-folder"></i>
                <span class="menu-text">文件管理</span>
            </a>
            <div class="menu-submenu">
                <ul class="menu-submenu-list">
                    <li class="menu-submenu-item">
                        <a href="#" class="menu-submenu-link">
                            <i class="menu-icon fas fa-file-alt"></i>
                            <span class="menu-text">我的文档</span>
                        </a>
                    </li>
                    <!-- 更多子菜单项... -->
                </ul>
            </div>
        </li>
        <!-- 更多菜单项... -->
    </ul>
</nav>

水平级联菜单

结合 .-horizontal 和 .menu-cascading 类创建下拉菜单

附加功能

菜单徽章

使用 .menu-badge 类添加徽章显示数量信息

图标菜单

使用 .menu-icon-only 类创建只显示图标的菜单

菜单分组和分隔线

使用 .menu-group-title 类和 .menu-divider 类进行菜单分组

菜单尺寸变体

紧凑菜单

使用 .menu-compact 类

标准菜单

默认尺寸

大尺寸菜单

使用 .menu-large 类

响应式设计

CutestUI 菜单组件内置了响应式设计，在不同屏幕尺寸下会自动调整布局和行为。在移动设备上，水平菜单会自动转换为垂直布局，级联菜单会转换为手风琴式菜单。

响应式菜单示例

调整浏览器窗口大小查看响应式效果

组合样式

带搜索框的侧边菜单

多级嵌套菜单

支持多级嵌套子菜单，展示复杂的导航结构

类名参考

类名 描述 应用位置
.menu 基础菜单容器类 nav 元素
.menu-list 菜单列表类 ul 元素
.menu-item 菜单项类 li 元素
.menu-link 菜单链接类 a 或 button 元素
.menu-icon 菜单图标类 i 元素（Font Awesome）
.menu-text 菜单文本类 span 元素
.menu-badge 菜单徽章类 span 元素
.-vertical 垂直菜单变体 .menu 元素
.-horizontal 水平菜单变体 .menu 元素
.-active 激活状态 .menu-link 或 .menu-submenu-link 元素
.-disabled 禁用状态 .menu-link 或 .menu-submenu-link 元素
.-has-submenu 包含子菜单的菜单项 .menu-item 元素
.menu-submenu 子菜单容器 div 元素
.menu-submenu-list 子菜单列表 ul 元素
.menu-submenu-item 子菜单项 li 元素
.menu-submenu-link 子菜单链接 a 或 button 元素
.-primary 主要色彩主题 .menu 元素
.-secondary 次要色彩主题 .menu 元素
.-success 成功色彩主题 .menu 元素
.-warning 警告色彩主题 .menu 元素
.-danger 危险色彩主题 .menu 元素
.-info 信息色彩主题 .menu 元素
.-dark 深色主题 .menu 元素
.-light 浅色主题 .menu 元素
.menu-accordion 手风琴式菜单 .menu 元素
.menu-cascading 级联式菜单 .menu 元素
.menu-icon-only 图标菜单 .menu 元素
.menu-compact 紧凑菜单 .menu 元素
.menu-large 大尺寸菜单 .menu 元素
.menu-group-title 菜单分组标题 span 元素
.menu-divider 菜单分隔线 div 元素
.menu-toggle 菜单折叠/展开按钮 button 元素

使用指南

CutestUI 菜单组件设计为易于使用且高度可定制。以下是一些使用指南，帮助您在项目中有效使用菜单组件。

基础结构

菜单组件的基础结构由 nav、ul、li 和 a/button 元素组成，通过不同的类名组合实现各种功能和样式。

图标集成

组件推荐使用 Font Awesome 图标库，通过添加适当的图标类名实现图标显示。

交互方式

JavaScript 增强

虽然组件核心样式完全基于 CSS 实现，但对于更复杂的交互（如手风琴菜单的折叠/展开），建议使用少量 JavaScript 来增强用户体验。

// 简单的手风琴菜单交互示例
const menuItems = document.querySelectorAll('.menu-item.-has-submenu');

menuItems.forEach(item => {
    const link = item.querySelector('.menu-link');
    
    link.addEventListener('click', (e) => {
        e.preventDefault();
        item.classList.toggle('open');
        
        // 如果需要关闭其他打开的菜单项
        menuItems.forEach(otherItem => {
            if (otherItem !== item) {
                otherItem.classList.remove('open');
            }
        });
    });
});

响应式适配

组件内置了响应式设计，在不同屏幕尺寸下会自动调整布局。对于自定义响应式行为，可以通过媒体查询覆盖默认样式。

可访问性考虑

组件包含基本的无障碍支持，如焦点状态和键盘导航支持。在实际项目中，建议根据具体需求进一步增强可访问性。