企业官网建设流程全解析

天津网站优化软件,北京微信网站建设公司,响应式网站手机,公司做网站哪里做jQuery UI Menu#xff08;菜单#xff09;实例 Menu 是 jQuery UI 中用于创建下拉菜单、上下文菜单或导航菜单的组件。它基于无序列表 ul 结构#xff0c;支持多级子菜单、图标、禁用项、分隔线等。常用于下拉导航、工具菜单、右键上下文菜单。 官方演示地址菜单实例Menu是 jQuery UI 中用于创建下拉菜单、上下文菜单或导航菜单的组件。它基于无序列表ul结构支持多级子菜单、图标、禁用项、分隔线等。常用于下拉导航、工具菜单、右键上下文菜单。官方演示地址https://jqueryui.com/menu/下面提供几个渐进实例从基础到高级代码使用最新 CDN可直接复制到 HTML 文件测试。1.基础垂直菜单带子菜单鼠标悬停或点击展开子菜单。!DOCTYPEhtmlhtmlheadmetacharsetutf-8titlejQuery UI Menu 基础示例/titlelinkrelstylesheethref//code.jquery.com/ui/1.13.2/themes/smoothness/jquery-ui.cssscriptsrc//code.jquery.com/jquery-3.6.0.min.js/scriptscriptsrc//code.jquery.com/ui/1.13.2/jquery-ui.min.js/scriptstyle#menu{width:200px;}/style/headbodyulidmenuliahref#文件/aulliahref#新建/a/liliahref#打开/a/liliahref#保存/a/liliclassui-state-disabledahref#另存为禁用/a/lilidiv分隔线/div/li!-- 分隔线 --liahref#退出/a/li/ul/liliahref#编辑/aulliahref#撤销/a/liliahref#重做/a/li/ul/liliahref#帮助/aulliahref#关于/a/li/ul/li/ulscript$(function(){$(#menu).menu();});/script/body/html2.带图标的菜单使用 jQuery UI 内置图标类ui-icon-*。ulidmenu-iconsliahref#spanclassui-icon ui-icon-disk/span保存/a/liliahref#spanclassui-icon ui-icon-print/span打印/a/liliahref#spanclassui-icon ui-icon-trash/span删除/a/liliahref#spanclassui-icon ui-icon-heart/span收藏/a/li/ulscript$(#menu-icons).menu({icons:{submenu:ui-icon-triangle-1-e}// 子菜单箭头});/scriptstyle.ui-menu .ui-icon{vertical-align:middle;margin-right:8px;}/style3.下拉菜单结合 Button将 Menu 作为下拉菜单使用。buttonidmenu-btn操作spanclassui-icon ui-icon-triangle-1-s/span/buttonuliddropdown-menustyledisplay:none;liahref#选项1/a/liliahref#选项2/a/liliahref#选项3/a/li/ulscript$(#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();});/script4.事件监听select 禁用项script$(#menu).menu({select:function(event,ui){console.log(选中菜单项ui.item.text());alert(你选择了ui.item.text());}});/script小技巧分隔线使用lidiv---/div/li或li classui-menu-divider/li右键上下文菜单需额外插件如 jQuery Context MenujQuery UI 原生不支持直接右键。水平菜单需自定义 CSS 或使用 Menubar 插件jQuery UI 官方有规划但未正式发布。Menu 组件适合构建结构化导航。如果你需要水平顶部导航菜单、右键上下文菜单使用第三方插件或动态加载菜单项的示例请提供更多细节