用法

菜單是臨時(shí)的一張紙（paper），由按鈕（button）、動(dòng)作（action）、點(diǎn)（pointer）或者包含至少兩個(gè)菜單項(xiàng)的其他控件觸發(fā)。

每一個(gè)菜單項(xiàng)是一個(gè)離散的選項(xiàng)或者動(dòng)作，并且能夠影響到應(yīng)用、視圖或者視圖中選中的按鈕。

菜單不應(yīng)該用作應(yīng)用中主要的導(dǎo)航方法。

http://wiki.jikexueyuan.com/project/material-design/images/components-menus-menus-menus-01a_large_mdpi.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/components-menus-menus-menus-01b_large_mdpi.png" alt="" />

觸發(fā)按鈕或者控件的標(biāo)簽（label）可以簡(jiǎn)明準(zhǔn)確的反映出菜單中包含的菜單項(xiàng)。菜單欄通常使用一個(gè)單詞作為標(biāo)簽，像“文件”、“格式”、“編輯”和“視圖”，然后其他內(nèi)容或許有更冗長的標(biāo)簽。

菜單顯示一組一致的菜單項(xiàng)，每個(gè)菜單項(xiàng)可以基于應(yīng)用的當(dāng)前狀態(tài)來使能。

http://wiki.jikexueyuan.com/project/material-design/images/components-menus-menus-menus-02_large_mdpi.png" alt="" />

上下文菜單（Contextual menus）能夠基于應(yīng)用的當(dāng)前狀態(tài)動(dòng)態(tài)的改變菜單項(xiàng)的可用性和讓菜單項(xiàng)使能。

通常，移除與當(dāng)前上下文不相干的菜單項(xiàng)，禁用那些需要滿足特定條件才能使用的相關(guān)的菜單項(xiàng)（比如，當(dāng)文本選中后“復(fù)制”變得可用）。

特定的應(yīng)用狀態(tài)可能使得上下文菜單只包含一個(gè)菜單項(xiàng)。比如，當(dāng)在網(wǎng)頁上高亮文本時(shí)，Android只顯示“復(fù)制”，所以用戶不能使用“剪切”和“粘貼”文本。

http://wiki.jikexueyuan.com/project/material-design/images/components-menus-menus-menus-03_large_mdpi.png" alt="" />

菜單依賴于它們距屏幕邊的距離垂直和水平的調(diào)整位置。

http://wiki.jikexueyuan.com/project/material-design/images/components-menus-menus-menus-04_large_mdpi.png" alt="" />

如果菜單的高度使得菜單項(xiàng)不能完全顯示，那么菜單會(huì)支持內(nèi)部滾動(dòng)。一個(gè)典型的例子是在手機(jī)橫屏狀態(tài)下查看菜單。

http://wiki.jikexueyuan.com/project/material-design/images/components-menus-menus-menus-05_large_mdpi.png" alt="" />

菜單可以是級(jí)聯(lián)的。

http://wiki.jikexueyuan.com/project/material-design/images/components-menus-menus-menus-06_large_mdpi.png" alt="" />

下面這些動(dòng)畫演示了菜單的滾動(dòng)和級(jí)聯(lián)。

下拉

文本框下拉

應(yīng)用工具條下拉

級(jí)聯(lián)下拉

菜單項(xiàng)

每一個(gè)菜單項(xiàng)限制為單行文本，并且能夠說明在菜單項(xiàng)選中時(shí)所發(fā)生的動(dòng)作。

菜單項(xiàng)的文本一般是單個(gè)單詞或者短語，但是也可能包含了圖標(biāo)和幫助文本，比如快捷鍵，同時(shí)也可包含像復(fù)選標(biāo)記之類的控件來標(biāo)識(shí)多選條目或狀態(tài)?？梢詤⒖?a href="list-controls.html">列表控件。

帶有靜態(tài)文本的菜單應(yīng)當(dāng)在菜單的上部放置最常使用的菜單項(xiàng)。

帶有動(dòng)態(tài)文本的菜單可能具有其它行為，比如在菜單上部放置預(yù)先使用的字體。順序可以根據(jù)用戶的動(dòng)作而改變。

菜單項(xiàng)可以內(nèi)嵌自己的子菜單。嘗試著將菜單層級(jí)限制在一級(jí)，因?yàn)閷?dǎo)航多級(jí)內(nèi)嵌子菜單是困難的。

http://wiki.jikexueyuan.com/project/material-design/images/components-menus-menuitems-menu-items-01_large_mdpi.png" alt="" />

將動(dòng)作菜單項(xiàng)顯示為禁用狀態(tài)，而不是移除它們，這樣可以讓用戶知道在正確條件下它們是存在的。

比如，當(dāng)沒有重做任務(wù)時(shí)禁用重做（Redo）動(dòng)作。當(dāng)內(nèi)容被選中后，剪切（Cut）和復(fù)制（Copy）動(dòng)作可用。

http://wiki.jikexueyuan.com/project/material-design/images/components-menus-menuitems-menu-items-02_large_mdpi.png" alt="" />

行為

菜單出現(xiàn)在所有的應(yīng)用內(nèi)部的UI元素之上。

通過點(diǎn)擊菜單以外的部分或者點(diǎn)擊觸發(fā)按鈕（如果按鈕可見），可以讓菜單消失。

通常，選中一個(gè)菜單項(xiàng)后菜單也會(huì)消失。一個(gè)特例是當(dāng)菜單允許多選時(shí)，比如使用復(fù)選標(biāo)記。

http://wiki.jikexueyuan.com/project/material-design/images/components-menus-behavior-menus-08_large_mdpi.png" alt="" />

菜單顯示在觸發(fā)它的元素處，當(dāng)前選中的菜單項(xiàng)顯示在觸發(fā)元素的頂部。

不要重復(fù)顯示選中的菜單項(xiàng)。

http://wiki.jikexueyuan.com/project/material-design/images/components-menus-behavior-menus-p-01_large_mdpi.png" alt="" />

(上圖)可取

http://wiki.jikexueyuan.com/project/material-design/images/components-menus-behavior-menus-p-02_large_mdpi.png" alt="" />

(上圖)不可取

菜單不要與觸摸的位置水平對(duì)齊。

http://wiki.jikexueyuan.com/project/material-design/images/components-menus-behavior-menus-p-03a_large_mdpi.png" alt="" />

(上圖)可取

http://wiki.jikexueyuan.com/project/material-design/images/components-menus-behavior-menus-p-03b_large_mdpi.png" alt="" />

(上圖)可取

http://wiki.jikexueyuan.com/project/material-design/images/components-menus-behavior-menus-p-04a_large_mdpi.png" alt="" />

(上圖)不可取

http://wiki.jikexueyuan.com/project/material-design/images/components-menus-behavior-menus-p-04b_large_mdpi.png" alt="" />

(上圖)不可取

尺寸標(biāo)準(zhǔn)

尺寸標(biāo)準(zhǔn)提供了不同大小和類型以及不同平臺(tái)上菜單的尺寸。

移動(dòng)設(shè)備

http://wiki.jikexueyuan.com/project/material-design/images/components-menus-metrics-menus-redlines-01_large_mdpi.png" alt="" />

不同的寬度

http://wiki.jikexueyuan.com/project/material-design/images/components-menus-metrics-menus-redlines-02_large_mdpi.png" alt="" />

級(jí)聯(lián)菜單

http://wiki.jikexueyuan.com/project/material-design/images/components-menus-metrics-menus-redlines-03_large_mdpi.png" alt="" />

級(jí)聯(lián)標(biāo)尺

http://wiki.jikexueyuan.com/project/material-design/images/components-menus-metrics-menus-redlines-04_large_mdpi.png" alt="" />

原文：Menus 翻譯：codediving 校對(duì)：PoppinLp