jQuery UI Menu（菜单）实例
Menu 是 jQuery UI 中用于创建下拉菜单、上下文菜单或导航菜单的组件。它基于无序列表 <ul> 结构，支持多级子菜单、图标、禁用项、分隔线等。常用于下拉导航、工具菜单、右键上下文菜单。
官方演示地址：https://jqueryui.com/menu/
下面提供几个渐进实例，从基础到高级，代码使用最新 CDN，可直接复制到 HTML 文件测试。
1. 基础垂直菜单（带子菜单）
鼠标悬停或点击展开子菜单。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI Menu 基础示例</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="//code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<style>
#menu { width: 200px; }
</style>
</head>
<body>
<ul id="menu">
<li><a href="#">文件</a>
<ul>
<li><a href="#">新建</a></li>
<li><a href="#">打开</a></li>
<li><a href="#">保存</a></li>
<li class="ui-state-disabled"><a href="#">另存为（禁用）</a></li>
<li><div>分隔线</div></li> <!-- 分隔线 -->
<li><a href="#">退出</a></li>
</ul>
</li>
<li><a href="#">编辑</a>
<ul>
<li><a href="#">撤销</a></li>
<li><a href="#">重做</a></li>
</ul>
</li>
<li><a href="#">帮助</a>
<ul>
<li><a href="#">关于</a></li>
</ul>
</li>
</ul>
<script>
$(function() {
$("#menu").menu();
});
</script>
</body>
</html>2. 带图标的菜单
使用 jQuery UI 内置图标类 ui-icon-*。
<ul id="menu-icons">
<li><a href="#"><span class="ui-icon ui-icon-disk"></span>保存</a></li>
<li><a href="#"><span class="ui-icon ui-icon-print"></span>打印</a></li>
<li><a href="#"><span class="ui-icon ui-icon-trash"></span>删除</a></li>
<li><a href="#"><span class="ui-icon ui-icon-heart"></span>收藏</a></li>
</ul>
<script>
$("#menu-icons").menu({
icons: { submenu: "ui-icon-triangle-1-e" } // 子菜单箭头
});
</script>
<style>
.ui-menu .ui-icon { vertical-align: middle; margin-right: 8px; }
</style>3. 下拉菜单（结合 Button）
将 Menu 作为下拉菜单使用。
<button id="menu-btn">操作 <span class="ui-icon ui-icon-triangle-1-s"></span></button>
<ul id="dropdown-menu" style="display:none;">
<li><a href="#">选项1</a></li>
<li><a href="#">选项2</a></li>
<li><a href="#">选项3</a></li>
</ul>
<script>
$("#dropdown-menu").menu();
$("#menu-btn").click(function(e) {
$("#dropdown-menu").menu("toggle"); // 切换显示
$("#dropdown-menu").position({
my: "left top",
at: "left bottom",
of: this
});
e.preventDefault();
});
</script>4. 事件监听（select） + 禁用项
<script>
$("#menu").menu({
select: function(event, ui) {
console.log("选中菜单项：" + ui.item.text());
alert("你选择了：" + ui.item.text());
}
});
</script>小技巧：
- 分隔线：使用
<li><div>---</div></li>或<li class="ui-menu-divider"></li> - 右键上下文菜单：需额外插件（如 jQuery Context Menu），jQuery UI 原生不支持直接右键。
- 水平菜单：需自定义 CSS 或使用 Menubar 插件（jQuery UI 官方有规划但未正式发布）。
Menu 组件适合构建结构化导航。如果你需要 水平顶部导航菜单、右键上下文菜单（使用第三方插件），或 动态加载菜单项 的示例，请提供更多细节！
