c-mdui-a

<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <meta name="renderer" content="webkit"> <meta http-equiv="Cache-Control" content="no-siteapp"/> <title>菜单 - MDUI 开发文档, Material Design 前端框架</title> <link rel="stylesheet" href="assets/mdui-v0.4.2/css/mdui.min.css"/> <link rel="stylesheet" href="assets/highlight-9.12.0/styles/github-gist.css"/> <link rel="stylesheet" href="assets/highlight-9.12.0/styles/railscasts.css"/> <link rel="stylesheet" href="assets/docs/css/docs.css"/> </head> <body class="mdui-drawer-body-left mdui-appbar-with-toolbar mdui-theme-primary-indigo mdui-theme-accent-pink"> <header class="mdui-appbar mdui-appbar-fixed"> <div class="mdui-toolbar mdui-color-theme"> <span class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white" mdui-drawer="{target: '#main-drawer', swipe: true}"><i class="mdui-icon material-icons">menu</i></span> <a href="https://www.mdui.org/" class="mdui-typo-headline mdui-hidden-xs">MDUI</a> <a href="index.html" class="mdui-typo-title">文档</a> <div class="mdui-toolbar-spacer"></div> <span class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white" mdui-dialog="{target: '#dialog-docs-theme'}" mdui-tooltip="{content: '设置主题'}"><i class="mdui-icon material-icons">color_lens</i></span> <a href="https://github.com/zdhxiong/mdui" target="_blank" class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white" mdui-tooltip="{content: '查看 Github'}"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 36 36" enable-background="new 0 0 36 36" xml:space="preserve" class="mdui-icon" style="width: 24px;height:24px;"> <path fill-rule="evenodd" clip-rule="evenodd" fill="#ffffff" d="M18,1.4C9,1.4,1.7,8.7,1.7,17.7c0,7.2,4.7,13.3,11.1,15.5 c0.8,0.1,1.1-0.4,1.1-0.8c0-0.4,0-1.4,0-2.8c-4.5,1-5.5-2.2-5.5-2.2c-0.7-1.9-1.8-2.4-1.8-2.4c-1.5-1,0.1-1,0.1-1 c1.6,0.1,2.5,1.7,2.5,1.7c1.5,2.5,3.8,1.8,4.7,1.4c0.1-1.1,0.6-1.8,1-2.2c-3.6-0.4-7.4-1.8-7.4-8.1c0-1.8,0.6-3.2,1.7-4.4 c-0.2-0.4-0.7-2.1,0.2-4.3c0,0,1.4-0.4,4.5,1.7c1.3-0.4,2.7-0.5,4.1-0.5c1.4,0,2.8,0.2,4.1,0.5c3.1-2.1,4.5-1.7,4.5-1.7 c0.9,2.2,0.3,3.9,0.2,4.3c1,1.1,1.7,2.6,1.7,4.4c0,6.3-3.8,7.6-7.4,8c0.6,0.5,1.1,1.5,1.1,3c0,2.2,0,3.9,0,4.5 c0,0.4,0.3,0.9,1.1,0.8c6.5-2.2,11.1-8.3,11.1-15.5C34.3,8.7,27,1.4,18,1.4z"></path> </svg> </a> </div> </header> <div class="mdui-drawer" id="main-drawer"> <div class="mdui-list" mdui-collapse="{accordion: true}" style="margin-bottom: 76px;"> <div class="mdui-collapse-item "> <div class="mdui-collapse-item-header mdui-list-item mdui-ripple"> <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-blue">near_me</i> <div class="mdui-list-item-content">开始使用</div> <i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i> </div> <div class="mdui-collapse-item-body mdui-list"> <a href="download.html" class="mdui-list-item mdui-ripple ">安装</a> <a href="compatibility.html" class="mdui-list-item mdui-ripple ">兼容性</a> <a href="jq.html" class="mdui-list-item mdui-ripple ">JavaScript 工具库</a> <a href="global.html" class="mdui-list-item mdui-ripple ">JavaScript 全局方法</a> </div> </div> <div class="mdui-collapse-item "> <div class="mdui-collapse-item-header mdui-list-item mdui-ripple"> <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-deep-orange">layers</i> <div class="mdui-list-item-content">样式</div> <i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i> </div> <div class="mdui-collapse-item-body mdui-list"> <a href="color.html" class="mdui-list-item mdui-ripple ">颜色与主题</a> <a href="font.html" class="mdui-list-item mdui-ripple ">字体</a> <a href="grid.html" class="mdui-list-item mdui-ripple ">网格布局</a> <a href="typo.html" class="mdui-list-item mdui-ripple ">排版</a> <a href="icon.html" class="mdui-list-item mdui-ripple ">图标</a> <a href="media.html" class="mdui-list-item mdui-ripple ">媒体</a> <a href="helper.html" class="mdui-list-item mdui-ripple ">辅助类</a> <a href="shadow.html" class="mdui-list-item mdui-ripple ">阴影</a> </div> </div> <div class="mdui-collapse-item mdui-collapse-item-open"> <div class="mdui-collapse-item-header mdui-list-item mdui-ripple"> <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-green">widgets</i> <div class="mdui-list-item-content">组件</div> <i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i> </div> <div class="mdui-collapse-item-body mdui-list"> <a href="ripple.html" class="mdui-list-item mdui-ripple ">涟漪动画效果</a> <a href="button.html" class="mdui-list-item mdui-ripple ">按钮</a> <a href="fab.html" class="mdui-list-item mdui-ripple ">浮动操作按钮</a> <a href="select.html" class="mdui-list-item mdui-ripple ">下拉选择</a> <a href="divider.html" class="mdui-list-item mdui-ripple ">分隔线</a> <a href="panel.html" class="mdui-list-item mdui-ripple ">可扩展面板</a> <a href="textfield.html" class="mdui-list-item mdui-ripple ">文本框</a> <a href="selection_control.html" class="mdui-list-item mdui-ripple ">选择控件</a> <a href="slider.html" class="mdui-list-item mdui-ripple ">滑块</a> <a href="list.html" class="mdui-list-item mdui-ripple ">列表</a> <a href="list_control.html" class="mdui-list-item mdui-ripple ">列表控制</a> <a href="grid_list.html" class="mdui-list-item mdui-ripple ">网格列表</a> <a href="tab.html" class="mdui-list-item mdui-ripple ">Tab 选项卡</a> <a href="toolbar.html" class="mdui-list-item mdui-ripple ">工具栏</a> <a href="appbar.html" class="mdui-list-item mdui-ripple ">应用栏</a> <a href="drawer.html" class="mdui-list-item mdui-ripple ">抽屉式导航</a> <a href="bottom_nav.html" class="mdui-list-item mdui-ripple ">底部导航栏</a> <a href="card.html" class="mdui-list-item mdui-ripple ">卡片</a> <a href="chip.html" class="mdui-list-item mdui-ripple ">纸片</a> <a href="tooltip.html" class="mdui-list-item mdui-ripple ">工具提示</a> <a href="snackbar.html" class="mdui-list-item mdui-ripple ">Snackbar</a> <a href="table.html" class="mdui-list-item mdui-ripple ">表格</a> <a href="dialog.html" class="mdui-list-item mdui-ripple ">对话框</a> <a href="menu.html" class="mdui-list-item mdui-ripple mdui-list-item-active">菜单</a> <a href="progress.html" class="mdui-list-item mdui-ripple ">进度指示器</a> </div> </div> <div class="mdui-collapse-item "> <div class="mdui-collapse-item-header mdui-list-item mdui-ripple"> <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-brown">view_carousel</i> <div class="mdui-list-item-content">JavaScript 插件</div> <i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i> </div> <div class="mdui-collapse-item-body mdui-list"> <a href="collapse.html" class="mdui-list-item mdui-ripple ">Collapse</a> <a href="headroom.html" class="mdui-list-item mdui-ripple ">Headroom</a> </div> </div> <div class="mdui-collapse-item "> <div class="mdui-collapse-item-header mdui-list-item mdui-ripple"> <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-purple">local_mall</i> <div class="mdui-list-item-content">资源</div> <i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i> </div> <div class="mdui-collapse-item-body mdui-list"> <a href="material_icon.html" class="mdui-list-item mdui-ripple ">Material 图标</a> </div> </div> </div> </div> <a id="anchor-top"></a> <div class="mdui-container doc-container"> <h1 class="doc-title mdui-text-color-theme">菜单</h1> <div class="doc-intro mdui-typo"> <p>菜单分为简单菜单和级联菜单。简单菜单适用在手机和平板上，级联菜单适用在桌面设备。</p> <div class="doc-intro-module"> <h3>调用方式</h3> <ol> <li>通过自定义属性调用</li> <li>通过 JavaScript 调用</li> </ol> </div> <div class="doc-intro-module"> <h3>相关阅读</h3> <p><a href="http://www.mdui.org/design/components/menus.html" target="_blank">Material Design 设计指南：组件 - 菜单</a></p> </div> </div> <nav class="doc-toc mdui-text-color-theme"> <ul> <li> <a data-scroll href="menu.html#style">样式</a> <ul> <li><a data-scroll href="menu.html#simple">简单菜单</a></li> <li><a data-scroll href="menu.html#simple-icon">带图标的简单菜单</a></li> <li><a data-scroll href="menu.html#cascade">级联菜单</a></li> </ul> </li> <li> <a data-scroll href="menu.html#call">调用方式</a> <ul> <li><a data-scroll href="menu.html#attr">通过自定义属性调用</a></li> <li><a data-scroll href="menu.html#js">通过 JavaScript 调用</a></li> <li><a data-scroll href="menu.html#option">参数</a></li> <li><a data-scroll href="menu.html#method">方法</a></li> <li><a data-scroll href="menu.html#event">事件</a></li> </ul> </li> <li><a data-scroll href="menu.html#class">CSS 类名列表</a></li> </ul> </nav> <div class="doc-cover"></div> <div class="doc-chapter"> <div class="mdui-typo"> <h2 class="doc-chapter-title doc-chapter-title-first mdui-text-color-theme">样式 <a class="doc-anchor" id="style"></a></h2> </div> <div class="mdui-typo"> <h4 class="doc-article-title">简单菜单 <a class="doc-anchor" id="simple"></a></h4> <p>在菜单项上添加 <code>disabled</code> 属性可以禁用一个菜单项。</p> <p>添加 <code><li class="mdui-divider"></li></code> 元素可以添加分隔线。</p> </div> <div class="doc-example"> <div class="doc-example-tools"><a href="javascript:;" class="viewsource" mdui-tooltip="{content: '查看代码'}"><i class="mdui-icon material-icons">code</i></a><a href="menu/demo1.html" target="_blank" mdui-tooltip="{content: '在线调试'}"><i class="mdui-icon material-icons">play_arrow</i></a></div><div class="doc-example-demo-label">Example</div> <div class="doc-example-demo"> <button class="mdui-btn mdui-color-theme-accent" mdui-menu="{target: '#example-1'}">open</button> <ul class="mdui-menu" id="example-1"> <li class="mdui-menu-item"> <a href="javascript:;" class="mdui-ripple">Refresh</a> </li> <li class="mdui-menu-item" disabled> <a href="javascript:;">Help & feedback</a> </li> <li class="mdui-menu-item"> <a href="javascript:;" class="mdui-ripple">Settings</a> </li> <li class="mdui-divider"></li> <li class="mdui-menu-item"> <a href="javascript:;" class="mdui-ripple">Sign out</a> </li> </ul> </div> <pre class="doc-example-code"><code class="lang-html"><ul class="<span class="doc-example-code-required" mdui-tooltip="{content: 'Required Class'}">mdui-menu</span>"> <li class="mdui-menu-item"> <a href="javascript:;" class="<span class="mdui-typo"><a href="ripple.html">mdui-ripple</a></span>">Refresh</a> </li> <li class="mdui-menu-item" disabled> <a href="javascript:;">Help & feedback</a> </li> <li class="mdui-menu-item"> <a href="javascript:;" class="<span class="mdui-typo"><a href="ripple.html">mdui-ripple</a></span>">Settings</a> </li> <li class="<span class="mdui-typo"><a href="divider.html">mdui-divider</a></span>"></li> <li class="mdui-menu-item"> <a href="javascript:;" class="<span class="mdui-typo"><a href="ripple.html">mdui-ripple</a></span>">Sign out</a> </li> </ul></code></pre> </div> <div class="mdui-typo"> <h4 class="doc-article-title">带图标的简单菜单 <a class="doc-anchor" id="simple-icon"></a></h4> </div> <div class="doc-example"> <div class="doc-example-tools"><a href="javascript:;" class="viewsource" mdui-tooltip="{content: '查看代码'}"><i class="mdui-icon material-icons">code</i></a><a href="menu/demo2.html" target="_blank" mdui-tooltip="{content: '在线调试'}"><i class="mdui-icon material-icons">play_arrow</i></a></div><div class="doc-example-demo-label">Example</div> <div class="doc-example-demo"> <button class="mdui-btn mdui-color-theme-accent" mdui-menu="{target: '#example-2'}">open</button> <ul class="mdui-menu" id="example-2"> <li class="mdui-menu-item"> <a href="javascript:;" class="mdui-ripple"> <i class="mdui-menu-item-icon mdui-icon material-icons">remove_red_eye</i>Preview </a> </li> <li class="mdui-menu-item"> <a href="javascript:;" class="mdui-ripple"> <i class="mdui-menu-item-icon mdui-icon material-icons">file_download</i>Download </a> </li> <li class="mdui-divider"></li> <li class="mdui-menu-item"> <a href="javascript:;" class="mdui-ripple"> <i class="mdui-menu-item-icon mdui-icon material-icons">delete</i>Remove </a> </li> <li class="mdui-menu-item"> <a href="javascript:;" class="mdui-ripple"> <i class="mdui-menu-item-icon"></i>Empty </a> </li> </ul> </div> <pre class="doc-example-code"><code class="lang-html"><ul class="mdui-menu"> <li class="mdui-menu-item"> <a href="javascript:;" class="<span class="mdui-typo"><a href="ripple.html">mdui-ripple</a></span>"> <i class="<span class="doc-example-code-required" mdui-tooltip="{content: 'Required Class'}">mdui-menu-item-icon</span> <span class="mdui-typo"><a href="icon.html">mdui-icon</a></span> <span class="mdui-typo"><a href="material_icon.html">material-icons</a></span>">remove_red_eye</i>Preview </a> </li> <li class="mdui-menu-item"> <a href="javascript:;" class="<span class="mdui-typo"><a href="ripple.html">mdui-ripple</a></span>"> <i class="<span class="doc-example-code-required" mdui-tooltip="{content: 'Required Class'}">mdui-menu-item-icon</span> <span class="mdui-typo"><a href="icon.html">mdui-icon</a></span> <span class="mdui-typo"><a href="material_icon.html">material-icons</a></span>">file_download</i>Download </a> </li> <li class="<span class="mdui-typo"><a href="ripple.html">mdui-divider</a></span>"></li> <li class="mdui-menu-item"> <a href="javascript:;" class="<span class="mdui-typo"><a href="ripple.html">mdui-ripple</a></span>"> <i class="<span class="doc-example-code-required" mdui-tooltip="{content: 'Required Class'}">mdui-menu-item-icon</span> <span class="mdui-typo"><a href="icon.html">mdui-icon</a></span> <span class="mdui-typo"><a href="material_icon.html">material-icons</a></span>">delete</i>Remove </a> </li> <li class="mdui-menu-item"> <a href="javascript:;" class="<span class="mdui-typo"><a href="ripple.html">mdui-ripple</a></span>"> <i class="<span class="doc-example-code-required" mdui-tooltip="{content: 'Required Class'}">mdui-menu-item-icon</span>"></i>Empty </a> </li> </ul></code></pre> </div> <div class="mdui-typo"> <h4 class="doc-article-title">级联菜单 <a class="doc-anchor" id="cascade"></a></h4> <p>在 <code><ul class="mdui-menu"></code> 元素上添加类 <code>.mdui-menu-cascade</code> 即可使菜单变为适用于桌面设备的级联菜单。</p> <p>通过在 <code><li class="mdui-menu-item"></li></code> 元素内再添加菜单的方式可以实现菜单的嵌套，理论上可以支持无限级嵌套。</p> <p><code><span class="mdui-menu-item-helper"></span></code> 元素为菜单项添加简短说明。</p> <p><code><span class="mdui-menu-item-more"></span></code> 元素为菜单项添加一个向右的箭头，用在含子菜单的菜单项上。</p> </div> <div class="doc-example"> <div class="doc-example-tools"><a href="javascript:;" class="viewsource" mdui-tooltip="{content: '查看代码'}"><i class="mdui-icon material-icons">code</i></a><a href="menu/demo3.html" target="_blank" mdui-tooltip="{content: '在线调试'}"><i class="mdui-icon material-icons">play_arrow</i></a></div><div class="doc-example-demo-label">Example</div> <div class="doc-example-demo"> <button class="mdui-btn mdui-color-theme-accent" mdui-menu="{target: '#example-3'}">open</button> <ul class="mdui-menu mdui-menu-cascade" id="example-3"> <li class="mdui-menu-item"> <a href="javascript:;" class="mdui-ripple"> <i class="mdui-menu-item-icon mdui-icon material-icons">format_bold</i> Bold <span class="mdui-menu-item-helper">Ctrl+B</span> </a> </li> <li class="mdui-menu-item"> <a href="javascript:;" class="mdui-ripple"> <i class="mdui-menu-item-icon mdui-icon material-icons">format_italic</i> Italic </a> </li> <li class="mdui-menu-item"> <a href="javascript:;" class="mdui-ripple"> <i class="mdui-menu-item-icon"></i> Superscript <span class="mdui-menu-item-helper">Ctrl+.</span> </a> </li> <li class="mdui-divider"></li> <li class="mdui-menu-item"> <a href="javascript:;" class="mdui-ripple"> Paragraph style <span class="mdui-menu-item-more"></span> </a> <ul class="mdui-menu mdui-menu-cascade"> <li class="mdui-menu-item"> <a href="javascript:;" class="mdui-ripple"> <i class="mdui-menu-item-icon"></i>Single </a> </li> <li class="mdui-menu-item"> <a href="javascript:;" class="mdui-ripple"> <i class="mdui-menu-item-icon mdui-icon material-icons">check</i>1.15 </a> </li> <li class="mdui-menu-item"> <a href="javascript:;" class="mdui-ripple"> <i class="mdui-menu-item-icon"></i>Double </a> </li> </ul> </li> </ul> </div> <pre class="doc-example-code"><code class="lang-html"><ul class="mdui-menu <span class="doc-example-code-required" mdui-tooltip="{content: 'Required Class'}">mdui-menu-cascade</span>"> <li class="mdui-menu-item"> <a href="javascript:;" class="<span class="mdui-typo"><a href="ripple.html">mdui-ripple</a></span>"> <i class="mdui-menu-item-icon <span class="mdui-typo"><a href="icon.html">mdui-icon</a></span> <span class="mdui-typo"><a href="material_icon.html">material-icons</a></span>">format_bold</i> Bold <span class="mdui-menu-item-helper">Ctrl+B</span> </a> </li> <li class="mdui-menu-item"> <a href="javascript:;" class="<span class="mdui-typo"><a href="ripple.html">mdui-ripple</a></span>"> <i class="mdui-menu-item-icon <span class="mdui-typo"><a href="icon.html">mdui-icon</a></span> <span class="mdui-typo"><a href="material_icon.html">material-icons</a></span>">format_italic</i> Italic </a> </li> <li class="mdui-menu-item"> <a href="javascript:;" class="<span class="mdui-typo"><a href="ripple.html">mdui-ripple</a></span>"> <i class="mdui-menu-item-icon"></i> Superscript <span class="mdui-menu-item-helper">Ctrl+.</span> </a> </li> <li class="<span class="mdui-typo"><a href="ripple.html">mdui-divider</a></span>"></li> <li class="mdui-menu-item"> <a href="javascript:;" class="<span class="mdui-typo"><a href="ripple.html">mdui-ripple</a></span>"> Paragraph style <span class="mdui-menu-item-more"></span> </a> <ul class="mdui-menu <span class="doc-example-code-required" mdui-tooltip="{content: 'Required Class'}">mdui-menu-cascade</span>"> <li class="mdui-menu-item"> <a href="javascript:;" class="<span class="mdui-typo"><a href="ripple.html">mdui-ripple</a></span>"> <i class="mdui-menu-item-icon"></i>Single </a> </li> <li class="mdui-menu-item"> <a href="javascript:;" class="<span class="mdui-typo"><a href="ripple.html">mdui-ripple</a></span>"> <i class="mdui-menu-item-icon <span class="mdui-typo"><a href="icon.html">mdui-icon</a></span> <span class="mdui-typo"><a href="material_icon.html">material-icons</a></span>">check</i>1.15 </a> </li> <li class="mdui-menu-item"> <a href="javascript:;" class="<span class="mdui-typo"><a href="ripple.html">mdui-ripple</a></span>"> <i class="mdui-menu-item-icon"></i>Double </a> </li> </ul> </li> </ul></code></pre> </div> <div class="mdui-typo"> <h2 class="doc-chapter-title mdui-text-color-theme">调用方式 <a class="doc-anchor" id="call"></a></h2> </div> <div class="mdui-typo"> <h4 class="doc-article-title">通过自定义属性调用 <a class="doc-anchor" id="attr"></a></h4> <p>使用该方式无需编写 JavaScript 代码。只需在一个起控制作用的元素<small>（例如：按钮）</small>上添加 <code>mdui-menu="<a data-scroll href="menu.html#option">options</a>"</code> 属性即可。通过自定义属性调用时，需要额外添加一个 <code>target</code> 参数，用于指定被控制的菜单，它的值为被控制的菜单的 CSS 选择器。</p> <p><strong>注意</strong>：为了使菜单能正确地定位，菜单和触发菜单的元素必须位于同一父元素下的同一级。</p> </div> <div class="doc-example"> <div class="doc-example-tools"><a href="javascript:;" class="viewsource" mdui-tooltip="{content: '查看代码'}"><i class="mdui-icon material-icons">code</i></a><a href="menu/demo4.html" target="_blank" mdui-tooltip="{content: '在线调试'}"><i class="mdui-icon material-icons">play_arrow</i></a></div><div class="doc-example-demo-label">Example</div> <div class="doc-example-demo"> <button class="mdui-btn mdui-color-theme-accent" mdui-menu="{target: '#example-attr'}">open</button> <ul class="mdui-menu" id="example-attr"> <li class="mdui-menu-item"> <a href="javascript:;" class="mdui-ripple">Refresh</a> </li> <li class="mdui-menu-item" disabled> <a href="javascript:;">Help & feedback</a> </li> <li class="mdui-menu-item"> <a href="javascript:;" class="mdui-ripple">Settings</a> </li> <li class="mdui-divider"></li> <li class="mdui-menu-item"> <a href="javascript:;" class="mdui-ripple">Sign out</a> </li> </ul> </div> <pre class="doc-example-code"><code class="lang-html"><button class="mdui-btn mdui-color-theme-accent" mdui-menu="{target: '#example-attr'}">open</button> <ul class="mdui-menu" id="example-attr"> <li class="mdui-menu-item"> <a href="javascript:;" class="<span class="mdui-typo"><a href="ripple.html">mdui-ripple</a></span>">Refresh</a> </li> <li class="mdui-menu-item" disabled> <a href="javascript:;">Help & feedback</a> </li> <li class="mdui-menu-item"> <a href="javascript:;" class="<span class="mdui-typo"><a href="ripple.html">mdui-ripple</a></span>">Settings</a> </li> <li class="<span class="mdui-typo"><a href="divider.html">mdui-divider</a></span>"></li> <li class="mdui-menu-item"> <a href="javascript:;" class="<span class="mdui-typo"><a href="ripple.html">mdui-ripple</a></span>">Sign out</a> </li> </ul></code></pre> </div> <div class="doc-example"> <div class="doc-example-tools"><a href="javascript:;" class="viewsource" mdui-tooltip="{content: '查看代码'}"><i class="mdui-icon material-icons">code</i></a><a href="menu/demo5.html" target="_blank" mdui-tooltip="{content: '在线调试'}"><i class="mdui-icon material-icons">play_arrow</i></a></div><div class="doc-example-demo-label">Example</div> <div class="doc-example-demo"> <button class="mdui-btn mdui-color-theme-accent" mdui-menu="{target: '#demo-attr-cascade'}">cascade menu</button> <ul class="mdui-menu mdui-menu-cascade" id="demo-attr-cascade"> <li class="mdui-menu-item"> <a href="javascript:;" class="mdui-ripple"> <i class="mdui-menu-item-icon mdui-icon material-icons">format_bold</i> Bold <span class="mdui-menu-item-helper">Ctrl+B</span> </a> </li> <li class="mdui-menu-item"> <a href="javascript:;" class="mdui-ripple"> <i class="mdui-menu-item-icon mdui-icon material-icons">format_italic</i> Italic <span class="mdui-menu-item-helper">Ctrl+I</span> </a> </li> <li class="mdui-menu-item"> <a href="javascript:;" class="mdui-ripple"> <i class="mdui-menu-item-icon"></i> Superscript <span class="mdui-menu-item-helper">Ctrl+.</span> </a> </li> <li class="mdui-divider"></li> <li class="mdui-menu-item"> <a href="javascript:;" class="mdui-ripple"> Paragraph style <span class="mdui-menu-item-more"></span> </a> <ul class="mdui-menu mdui-menu-cascade"> <li class="mdui-menu-item"> <a href="javascript:;" class="mdui-ripple"> <i class="mdui-menu-item-icon"></i>Single </a> </li> <li class="mdui-menu-item"> <a href="javascript:;" class="mdui-ripple"> <i class="mdui-menu-item-icon"></i>1.15 </a> </li> <li class="mdui-menu-item"> <a href="javascript:;" class="mdui-ripple"> <i class="mdui-menu-item-icon"></i>Double </a> </li> <li class="mdui-menu-item"> <a href="javascript:;" class="mdui-ripple"> <i class="mdui-menu-item-icon mdui-icon material-icons">check</i>Custom: 1.2 </a> </li> <li class="mdui-divider"></li> <li class="mdui-menu-item"> <a href="javascript:;" class="mdui-ripple">Add space before paragraph</a> </li> <li class="mdui-menu-item"> <a href="javascript:;" class="mdui-ripple">Add space after paragraph</a> </li> <li class="mdui-divider"></li> <li class="mdui-menu-item"> <a href="javascript:;" class="mdui-ripple">Custom spacing...</a> </li> </ul> </li> <li class="mdui-menu-item"> <a href="javascript:;" class="mdui-ripple"> Line spacing <span class="mdui-menu-item-more"></span> </a> <ul class="mdui-menu mdui-menu-cascade"> <li class="mdui-menu-item"> <a href="javascript:;" class="mdui-ripple"> <i class="mdui-menu-item-icon"></i> Single </a> </li> <li class="mdui-menu-item"> <a href="javascript:;" class="mdui-ripple"> <i class="mdui-menu-item-icon"></i> 1.15 </a> </li> <li class="mdui-menu-item"> <a href="javascript:;" class="mdui-ripple"> <i class="mdui-menu-item-icon"></i> Double </a> </li> <li class="mdui-menu-item"> <a href="javascript:;" class="mdui-ripple"> <i class="mdui-menu-item-icon mdui-icon material-icons">check</i> Custom: 1.2 <span class="mdui-menu-item-more"></span> </a> <ul class="mdui-menu mdui-menu-cascade"> <li class="mdui-menu-item"> <a href="javascript:;" class="mdui-ripple"> Line spacing <span class="mdui-menu-item-helper">1.2</span> </a> </li> <li class="mdui-menu-item"> <a href="javascript:;" class="mdui-ripple"> Paragraph spacing before <span class="mdui-menu-item-helper">1.2</span> </a> </li> <li class="mdui-menu-item"> <a href="javascript:;" class="mdui-ripple"> Paragraph spacing after <span class="mdui-menu-item-helper">1.5</span> </a> </li> </ul> </li> </ul> </li> </ul> </div> <pre class="doc-example-code"><code class="lang-html"><button class="mdui-btn mdui-color-theme-accent" mdui-menu="{target: '#demo-attr-cascade'}">cascade menu</button> <ul class="mdui-menu mdui-menu-cascade" id="demo-attr-cascade"> <li class="mdui-menu-item"> <a href="javascript:;" class="<span class="mdui-typo"><a href="ripple.html">mdui-ripple</a></span>"> <i class="mdui-menu-item-icon <span class="mdui-typo"><a href="icon.html">mdui-icon</a></span> <span class="mdui-typo"><a href="material_icon.html">material-icons</a></span>">format_bold</i> Bold <span class="mdui-menu-item-helper">Ctrl+B</span> </a> </li> <li class="mdui-menu-item"> <a href="javascript:;" class="<span class="mdui-typo"><a href="ripple.html">mdui-ripple</a></span>"> <i class="mdui-menu-item-icon <span class="mdui-typo"><a href="icon.html">mdui-icon</a></span> <span class="mdui-typo"><a href="material_icon.html">material-icons</a></span>">format_italic</i> Italic <span class="mdui-menu-item-helper">Ctrl+I</span> </a> </li> <li class="mdui-menu-item"> <a href="javascript:;" class="<span class="mdui-typo"><a href="ripple.html">mdui-ripple</a></span>"> <i class="mdui-menu-item-icon"></i> Superscript <span class="mdui-menu-item-helper">Ctrl+.</span> </a> </li> <li class="<span class="mdui-typo"><a href="divider.html">mdui-divider</a></span>"></li> <li class="mdui-menu-item"> <a href="javascript:;" class="<span class="mdui-typo"><a href="ripple.html">mdui-ripple</a></span>"> Paragraph style <span class="mdui-menu-item-more"></span> </a> <ul class="mdui-menu mdui-menu-cascade"> <li class="mdui-menu-item"> <a href="javascript:;" class="<span class="mdui-typo"><a href="ripple.html">mdui-ripple</a></span>"> <i class="mdui-menu-item-icon"></i>Single </a> </li> <li class="mdui-menu-item"> <a href="javascript:;" class="<span class="mdui-typo"><a href="ripple.html">mdui-ripple</a></span>"> <i class="mdui-menu-item-icon"></i>1.15 </a> </li> <li class="mdui-menu-item"> <a href="javascript:;" class="<span class="mdui-typo"><a href="ripple.html">mdui-ripple</a></span>"> <i class="mdui-menu-item-icon"></i>Double </a> </li> <li class="mdui-menu-item"> <a href="javascript:;" class="<span class="mdui-typo"><a href="ripple.html">mdui-ripple</a></span>"> <i class="mdui-menu-item-icon <span class="mdui-typo"><a href="icon.html">mdui-icon</a></span> <span class="mdui-typo"><a href="material_icon.html">material-icons</a></span>">check</i>Custom: 1.2 </a> </li> <li class="<span class="mdui-typo"><a href="divider.html">mdui-divider</a></span>"></li> <li class="mdui-menu-item"> <a href="javascript:;" class="<span class="mdui-typo"><a href="ripple.html">mdui-ripple</a></span>">Add space before paragraph</a> </li> <li class="mdui-menu-item"> <a href="javascript:;" class="<span class="mdui-typo"><a href="ripple.html">mdui-ripple</a></span>">Add space after paragraph</a> </li> <li class="<span class="mdui-typo"><a href="divider.html">mdui-divider</a></span>"></li> <li class="mdui-menu-item"> <a href="javascript:;" class="<span class="mdui-typo"><a href="ripple.html">mdui-ripple</a></span>">Custom spacing...</a> </li> </ul> </li> <li class="mdui-menu-item"> <a href="javascript:;" class="<span class="mdui-typo"><a href="ripple.html">mdui-ripple</a></span>"> Line spacing <span class="mdui-menu-item-more"></span> </a> <ul class="mdui-menu mdui-menu-cascade"> <li class="mdui-menu-item"> <a href="javascript:;" class="<span class="mdui-typo"><a href="ripple.html">mdui-ripple</a></span>"> <i class="mdui-menu-item-icon"></i> Single </a> </li> <li class="mdui-menu-item"> <a href="javascript:;" class="<span class="mdui-typo"><a href="ripple.html">mdui-ripple</a></span>"> <i class="mdui-menu-item-icon"></i> 1.15 </a> </li> <li class="mdui-menu-item"> <a href="javascript:;" class="<span class="mdui-typo"><a href="ripple.html">mdui-ripple</a></span>"> <i class="mdui-menu-item-icon"></i> Double </a> </li> <li class="mdui-menu-item"> <a href="javascript:;" class="<span class="mdui-typo"><a href="ripple.html">mdui-ripple</a></span>"> <i class="mdui-menu-item-icon <span class="mdui-typo"><a href="icon.html">mdui-icon</a></span> <span class="mdui-typo"><a href="material_icon.html">material-icons</a></span>">check</i> Custom: 1.2 <span class="mdui-menu-item-more"></span> </a> <ul class="mdui-menu mdui-menu-cascade"> <li class="mdui-menu-item"> <a href="javascript:;" class="<span class="mdui-typo"><a href="ripple.html">mdui-ripple</a></span>"> Line spacing <span class="mdui-menu-item-helper">1.2</span> </a> </li> <li class="mdui-menu-item"> <a href="javascript:;" class="<span class="mdui-typo"><a href="ripple.html">mdui-ripple</a></span>"> Paragraph spacing before <span class="mdui-menu-item-helper">1.2</span> </a> </li> <li class="mdui-menu-item"> <a href="javascript:;" class="<span class="mdui-typo"><a href="ripple.html">mdui-ripple</a></span>"> Paragraph spacing after <span class="mdui-menu-item-helper">1.5</span> </a> </li> </ul> </li> </ul> </li> </ul></code></pre> </div> <div class="mdui-typo"> <h4 class="doc-article-title">通过 JavaScript 调用 <a class="doc-anchor" id="js"></a></h4> <p>实例化组件：</p> <pre><code class="lang-js">// anchorSelector 表示触发菜单的元素的 CSS 选择器或 DOM 元素 // menuSelector 表示菜单的 CSS 选择器或 DOM 元素 // options 表示组件的配置参数，见下面的参数列表 var inst = new mdui.Menu(anchorSelector, menuSelector, options);</code></pre> </div> <a href="menu/demo6.html" target="_blank" class="mdui-btn mdui-color-theme-accent">运行</a> <div class="mdui-typo"> <h4 class="doc-article-title">参数 <a class="doc-anchor" id="option"></a></h4> <div class="mdui-table-fluid"> <table class="mdui-table"> <thead> <tr> <th>参数名</th> <th>类型</th> <th>默认值</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td><code>position</code></td> <td><code>string</code></td> <td><code>auto</code></td> <td>菜单相对于触发它的元素的位置。 <ul> <li><code>top</code>：菜单在触发它的元素的上方。</li> <li><code>bottom</code>：菜单在触发它的元素的下方。</li> <li><code>center</code>：菜单在窗口中垂直居中。</li> <li><code>auto</code>：自动判断位置。优先级为：<code>bottom</code> > <code>top</code> > <code>center</code>。</li> </ul> </td> </tr> <tr> <td><code>align</code></td> <td><code>string</code></td> <td><code>auto</code></td> <td>菜单与触发它的元素的对其方式。 <ul> <li><code>left</code>：菜单与触发它的元素左对齐。</li> <li><code>right</code>：菜单与触发它的元素右对齐。</li> <li><code>center</code>：菜单在窗口中水平居中。</li> <li><code>auto</code>：自动判断位置：优先级为：<code>left</code> > <code>right</code> > <code>center</code></li> </ul> </td> </tr> <tr> <td><code>gutter</code></td> <td><code>int</code></td> <td><code>16</code></td> <td>菜单与窗口边框至少保持多少间距，单位为 px。</td> </tr> <tr> <td><code>fixed</code></td> <td><code>boolean</code></td> <td><code>false</code></td> <td>菜单的定位方式 <ul> <li><code>true</code>：菜单使用 fixed 定位。在页面滚动时，菜单将保持在窗口固定位置，不随滚动条滚动。</li> <li><code>false</code>：菜单使用 absolute 定位。在页面滚动时，菜单将随着页面一起滚动。</li> </ul> </td> </tr> <tr> <td><code>covered</code></td> <td><code>boolean</code></td> <td><code>auto</code></td> <td>菜单是否覆盖在触发它的元素的上面。 <ul> <li><code>true</code>：使菜单覆盖在触发它的元素的上面。</li> <li><code>false</code>：使菜单不覆盖触发它的元素。</li> <li><code>auto</code>：简单菜单覆盖触发它的元素。级联菜单不覆盖触发它的元素。</li> </ul> </td> </tr> <tr> <td><code>subMenuTrigger</code></td> <td><code>string</code></td> <td><code>hover</code></td> <td>子菜单的触发方式。 <ul> <li><code>click</code>：点击时触发子菜单。</li> <li><code>hover</code>：鼠标悬浮时触发子菜单。</li> </ul> </td> </tr> <tr> <td><code>subMenuDelay</code></td> <td><code>int</code></td> <td><code>200</code></td> <td>子菜单的触发延迟时间（单位：毫秒），只有在 subMenuTrigger: hover 时，这个参数才有效。</td> </tr> </tbody> </table> </div> </div> <div class="mdui-typo"> <h4 class="doc-article-title">方法 <a class="doc-anchor" id="method"></a></h4> <div class="mdui-table-fluid"> <table class="mdui-table"> <thead> <tr> <th>方法名</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td><code>open()</code></td> <td>打开菜单。</td> </tr> <tr> <td><code>close()</code></td> <td>关闭菜单。</td> </tr> <tr> <td><code>toggle()</code></td> <td>切换菜单的打开状态。</td> </tr> </tbody> </table> </div> </div> <div class="mdui-typo"> <h4 class="doc-article-title">事件 <a class="doc-anchor" id="event"></a></h4> <div class="mdui-table-fluid"> <table class="mdui-table"> <thead> <tr> <th>事件</th> <th>描述</th> <th>目标</th> <th>事件</th> </tr> </thead> <tbody> <tr> <td><code>open.mdui.menu</code></td> <td>菜单开始打开动画时，事件将被触发。</td> <td rowspan="4"><code><ul class="mdui-menu"></ul></code></td> <td rowspan="4"><code>event._detail.inst</code>：实例</td> </tr> <tr> <td><code>opened.mdui.menu</code></td> <td>菜单结束打开动画时，事件将被触发。</td> </tr> <tr> <td><code>close.mdui.menu</code></td> <td>菜单开始关闭动画时，事件将被触发。</td> </tr> <tr> <td><code>closed.mdui.menu</code></td> <td>菜单结束关闭动画时，事件将被触发。</td> </tr> </tbody> </table> </div> </div> <div class="mdui-typo"> <h2 class="doc-chapter-title mdui-text-color-theme">CSS 类名列表 <a class="doc-anchor" id="class"></a></h2> <div class="mdui-table-fluid"> <table class="mdui-table"> <thead> <tr> <th>类名</th> <th>效果</th> </tr> </thead> <tbody> <tr> <td><code>.mdui-menu</code></td> <td>定义一个菜单组件。</td> </tr> <tr> <td><code>.mdui-menu-cascade</code></td> <td>定义级联菜单。</td> </tr> <tr> <td><code>.mdui-menu-item</code></td> <td>定义菜单项。</td> </tr> <tr> <td><code>.mdui-menu-item-icon</code></td> <td>定义菜单图标。</td> </tr> <tr> <td><code>.mdui-menu-item-helper</code></td> <td>定义菜单的帮助文本。</td> </tr> <tr> <td><code>.mdui-menu-item-more</code></td> <td>含子菜单的菜单项的向右箭头。</td> </tr> </tbody> </table> </div> </div> </div> </div> <div class="doc-footer-nav mdui-color-theme"> <div class="mdui-container"> <div class="mdui-row"> <a href="dialog.html" class="mdui-ripple mdui-color-theme mdui-col-xs-2 mdui-col-sm-6 doc-footer-nav-left"> <div class="doc-footer-nav-text"> <i class="mdui-icon material-icons">arrow_back</i> <span class="doc-footer-nav-direction mdui-hidden-xs-down">Previous</span> <div class="doc-footer-nav-chapter mdui-hidden-xs-down">对话框</div> </div> </a> <a href="progress.html" class="mdui-ripple mdui-color-theme mdui-col-xs-10 mdui-col-sm-6 doc-footer-nav-right"> <div class="doc-footer-nav-text"> <i class="mdui-icon material-icons">arrow_forward</i> <span class="doc-footer-nav-direction">Next</span> <div class="doc-footer-nav-chapter">进度指示器</div> </div> </a> </div> </div> </div> <div class="mdui-dialog" id="dialog-docs-theme"> <div class="mdui-dialog-title">设置文档主题</div> <div class="mdui-dialog-content"> <p class="mdui-typo-title">主题色</p> <div class="mdui-row-xs-1 mdui-row-sm-2 mdui-row-md-3"> <div class="mdui-col"> <label class="mdui-radio mdui-m-b-1"> <input type="radio" name="doc-theme-layout" value="" checked/> <i class="mdui-radio-icon"></i> Light </label> </div> <div class="mdui-col"> <label class="mdui-radio mdui-m-b-1"> <input type="radio" name="doc-theme-layout" value="dark" /> <i class="mdui-radio-icon"></i> Dark </label> </div> </div> <p class="mdui-typo-title mdui-text-color-theme">主色</p> <form class="mdui-row-xs-1 mdui-row-sm-2 mdui-row-md-3"> <div class="mdui-col mdui-text-color-amber"> <label class="mdui-radio mdui-m-b-1"> <input type="radio" name="doc-theme-primary" value="amber" /> <i class="mdui-radio-icon"></i> Amber </label> </div> <div class="mdui-col mdui-text-color-blue"> <label class="mdui-radio mdui-m-b-1"> <input type="radio" name="doc-theme-primary" value="blue" /> <i class="mdui-radio-icon"></i> Blue </label> </div> <div class="mdui-col mdui-text-color-blue-grey"> <label class="mdui-radio mdui-m-b-1"> <input type="radio" name="doc-theme-primary" value="blue-grey" /> <i class="mdui-radio-icon"></i> Blue Grey </label> </div> <div class="mdui-col mdui-text-color-brown"> <label class="mdui-radio mdui-m-b-1"> <input type="radio" name="doc-theme-primary" value="brown" /> <i class="mdui-radio-icon"></i> Brown </label> </div> <div class="mdui-col mdui-text-color-cyan"> <label class="mdui-radio mdui-m-b-1"> <input type="radio" name="doc-theme-primary" value="cyan" /> <i class="mdui-radio-icon"></i> Cyan </label> </div> <div class="mdui-col mdui-text-color-deep-orange"> <label class="mdui-radio mdui-m-b-1"> <input type="radio" name="doc-theme-primary" value="deep-orange" /> <i class="mdui-radio-icon"></i> Deep Orange </label> </div> <div class="mdui-col mdui-text-color-deep-purple"> <label class="mdui-radio mdui-m-b-1"> <input type="radio" name="doc-theme-primary" value="deep-purple" /> <i class="mdui-radio-icon"></i> Deep Purple </label> </div> <div class="mdui-col mdui-text-color-green"> <label class="mdui-radio mdui-m-b-1"> <input type="radio" name="doc-theme-primary" value="green" /> <i class="mdui-radio-icon"></i> Green </label> </div> <div class="mdui-col mdui-text-color-grey"> <label class="mdui-radio mdui-m-b-1"> <input type="radio" name="doc-theme-primary" value="grey" /> <i class="mdui-radio-icon"></i> Grey </label> </div> <div class="mdui-col mdui-text-color-indigo"> <label class="mdui-radio mdui-m-b-1"> <input type="radio" name="doc-theme-primary" value="indigo" checked/> <i class="mdui-radio-icon"></i> Indigo </label> </div> <div class="mdui-col mdui-text-color-light-blue"> <label class="mdui-radio mdui-m-b-1"> <input type="radio" name="doc-theme-primary" value="light-blue" /> <i class="mdui-radio-icon"></i> Light Blue </label> </div> <div class="mdui-col mdui-text-color-light-green"> <label class="mdui-radio mdui-m-b-1"> <input type="radio" name="doc-theme-primary" value="light-green" /> <i class="mdui-radio-icon"></i> Light Green </label> </div> <div class="mdui-col mdui-text-color-lime"> <label class="mdui-radio mdui-m-b-1"> <input type="radio" name="doc-theme-primary" value="lime" /> <i class="mdui-radio-icon"></i> Lime </label> </div> <div class="mdui-col mdui-text-color-orange"> <label class="mdui-radio mdui-m-b-1"> <input type="radio" name="doc-theme-primary" value="orange" /> <i class="mdui-radio-icon"></i> Orange </label> </div> <div class="mdui-col mdui-text-color-pink"> <label class="mdui-radio mdui-m-b-1"> <input type="radio" name="doc-theme-primary" value="p