Menu 菜单

菜单组件，用于导航菜单。

基础用法

水平菜单

<div id="demo-menu"></div>

<script>
  const menu = new SaMenu('#demo-menu', {
    mode: 'horizontal',
    items: [
      { id: '1', label: '首页' },
      { id: '2', label: '产品' },
      { id: '3', label: '关于' },
      { id: '4', label: '联系' }
    ],
    defaultActive: '1',
    onSelect: (item) => {
      console.log('选中:', item);
    }
  });
</script>

加载 SanoUI 组件中...

垂直菜单

<div id="demo-menu-vertical"></div>

<script>
  const menu = new SaMenu('#demo-menu-vertical', {
    mode: 'vertical',
    items: [
      { id: '1', label: '首页' },
      { id: '2', label: '产品' },
      { id: '3', label: '关于' },
      { id: '4', label: '联系' }
    ],
    defaultActive: '1'
  });
</script>

加载 SanoUI 组件中...

子菜单

支持多级子菜单。

<div id="demo-menu-submenu"></div>

<script>
  const menu = new SaMenu('#demo-menu-submenu', {
    mode: 'horizontal',
    items: [
      { id: '1', label: '首页' },
      {
        id: '2',
        label: '产品',
        children: [
          { id: '2-1', label: '产品一' },
          { id: '2-2', label: '产品二' },
          {
            id: '2-3',
            label: '产品三',
            children: [
              { id: '2-3-1', label: '产品三-1' },
              { id: '2-3-2', label: '产品三-2' }
            ]
          }
        ]
      },
      { id: '3', label: '关于' }
    ],
    defaultActive: '1',
    onSelect: (item) => {
      console.log('选中:', item);
    }
  });
</script>

加载 SanoUI 组件中...

API

构造函数参数

参数	说明	类型	默认值
container	容器选择器或元素	string | HTMLElement	-
options	配置选项	SaMenuOptions	{}

配置选项

参数	说明	类型	可选值	默认值
mode	菜单模式	string	horizontal / vertical	horizontal
items	菜单项数组	Array<MenuItem>	-	[]
defaultActive	默认激活项	string	-	-
onSelect	选择回调	function(item: MenuItem)	-	-

MenuItem 配置

参数	说明	类型	默认值
id	菜单项唯一标识	string	-
label	菜单项文本	string	-
icon	菜单项图标	string	-
to	链接地址	string	-
children	子菜单项数组	Array<MenuItem>	-

方法

方法名	说明	参数	返回值
setActive	设置激活项	id: string	void
getActive	获取当前激活项	-	string
destroy	销毁实例	-	void

示例代码

手动创建实例

const menu = new SaMenu('#my-menu', {
  mode: 'horizontal',
  items: [
    { id: '1', label: '首页', to: '/' },
    {
      id: '2',
      label: '产品',
      children: [
        { id: '2-1', label: '产品一', to: '/products/1' },
        { id: '2-2', label: '产品二', to: '/products/2' }
      ]
    },
    { id: '3', label: '关于', to: '/about' }
  ],
  defaultActive: '1',
  onSelect: (item) => {
    console.log('选中菜单项:', item);
    if (item.to) {
      window.location.href = item.to;
    }
  }
});

// 设置激活项
menu.setActive('2');

// 获取当前激活项
const activeId = menu.getActive();

实际使用场景

场景 1：导航菜单

在网站顶部使用水平菜单作为主导航。

<div id="main-nav-menu"></div>

<script>
  const menu = new SaMenu('#main-nav-menu', {
    mode: 'horizontal',
    items: [
      { id: 'home', label: '首页', to: '/' },
      { id: 'products', label: '产品', to: '/products' },
      {
        id: 'solutions',
        label: '解决方案',
        children: [
          { id: 'solution-1', label: '企业解决方案', to: '/solutions/enterprise' },
          { id: 'solution-2', label: '个人解决方案', to: '/solutions/personal' }
        ]
      },
      { id: 'about', label: '关于我们', to: '/about' },
      { id: 'contact', label: '联系我们', to: '/contact' }
    ],
    defaultActive: 'home',
    onSelect: (item) => {
      if (item.to) {
        console.log('导航到:', item.to);
        // window.location.href = item.to;
      }
    }
  });
</script>

加载 SanoUI 组件中...

场景 2：侧边栏菜单

在后台管理系统中使用垂直菜单作为侧边栏导航。

<div id="sidebar-menu" style="width: 200px;"></div>

<script>
  const menu = new SaMenu('#sidebar-menu', {
    mode: 'vertical',
    items: [
      { id: 'dashboard', label: '仪表盘', icon: 'dashboard' },
      {
        id: 'user',
        label: '用户管理',
        icon: 'user',
        children: [
          { id: 'user-list', label: '用户列表' },
          { id: 'user-role', label: '角色管理' },
          { id: 'user-permission', label: '权限管理' }
        ]
      },
      {
        id: 'content',
        label: '内容管理',
        icon: 'document',
        children: [
          { id: 'article', label: '文章管理' },
          { id: 'category', label: '分类管理' }
        ]
      },
      { id: 'settings', label: '系统设置', icon: 'setting' }
    ],
    defaultActive: 'dashboard',
    onSelect: (item) => {
      console.log('选择菜单:', item);
    }
  });
</script>

加载 SanoUI 组件中...