带有鼠标和键盘交互的用于导航的可主题化菜单。
如需了解更多有关 menu 部件的细节，请查看 API 文档 菜单部件（Menu Widget）。
默认功能
一个带有默认配置、禁用条目和嵌套菜单的菜单。由一个列表转化成的，添加了主题，并支持鼠标和键盘交互。尝试使用光标键导航菜单。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 菜单（Menu） - 默认功能</title> <link rel="stylesheet" href="https://zhishitu.com/"> <script src="/images/2021/06/11/202106110417476055200.js"></script> <script src="/images/2021/06/11/202106110417476057801.js"></script> <link rel="stylesheet" href="https://zhishitu.com/"> <script> $(function() { $( "#menu" ).menu(); }); </script> <style> .ui-menu { width: 150px; } </style></head><body> <ul id="menu"> <li class="ui-state-disabled"><a href="https://zhishitu.com/">Aberdeen</a></li> <li><a href="https://zhishitu.com/">Ada</a></li> <li><a href="https://zhishitu.com/">Adamsville</a></li> <li><a href="https://zhishitu.com/">Addyston</a></li> <li> <a href="https://zhishitu.com/">Delphi</a> <ul> <li class="ui-state-disabled"><a href="https://zhishitu.com/">Ada</a></li> <li><a href="https://zhishitu.com/">Saarland</a></li> <li><a href="https://zhishitu.com/">Salzburg</a></li> </ul> </li> <li><a href="https://zhishitu.com/">Saarland</a></li> <li> <a href="https://zhishitu.com/">Salzburg</a> <ul> <li> <a href="https://zhishitu.com/">Delphi</a> <ul> <li><a href="https://zhishitu.com/">Ada</a></li> <li><a href="https://zhishitu.com/">Saarland</a></li> <li><a href="https://zhishitu.com/">Salzburg</a></li> </ul> </li> <li> <a href="https://zhishitu.com/">Delphi</a> <ul> <li><a href="https://zhishitu.com/">Ada</a></li> <li><a href="https://zhishitu.com/">Saarland</a></li> <li><a href="https://zhishitu.com/">Salzburg</a></li> </ul> </li> <li><a href="https://zhishitu.com/">Perch</a></li> </ul> </li> <li class="ui-state-disabled"><a href="https://zhishitu.com/">Amesville</a></li></ul> </body></html>图标
一个带有默认配置的菜单，显示如何使用带有图标的菜单。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 菜单（Menu） - 图标</title> <link rel="stylesheet" href="https://zhishitu.com/"> <script src="/images/2021/06/11/202106110417476055200.js"></script> <script src="/images/2021/06/11/202106110417476057801.js"></script> <link rel="stylesheet" href="https://zhishitu.com/"> <script> $(function() { $( "#menu" ).menu(); }); </script> <style> .ui-menu { width: 150px; } </style></head><body> <ul id="menu"> <li><a href="https://zhishitu.com/"><span class="ui-icon ui-icon-disk"></span>保存</a></li> <li><a href="https://zhishitu.com/"><span class="ui-icon ui-icon-zoomin"></span>放大</a></li> <li><a href="https://zhishitu.com/"><span class="ui-icon ui-icon-zoomout"></span>缩小</a></li> <li class="ui-state-disabled"><a href="https://zhishitu.com/"><span class="ui-icon ui-icon-print"></span>打印...</a></li> <li> <a href="https://zhishitu.com/">播放</a> <ul> <li><a href="https://zhishitu.com/"><span class="ui-icon ui-icon-seek-start"></span>上一个</a></li> <li><a href="https://zhishitu.com/"><span class="ui-icon ui-icon-stop"></span>停止</a></li> <li><a href="https://zhishitu.com/"><span class="ui-icon ui-icon-play"></span>播放</a></li> <li><a href="https://zhishitu.com/"><span class="ui-icon ui-icon-seek-end"></span>下一个</a></li> </ul> </li></ul> </body></html>