編輯導(dǎo)讀：產(chǎn)品中的菜單伸縮是非常常見的功能，如何通過內(nèi)聯(lián)框架， 實(shí)現(xiàn)菜單動(dòng)態(tài)伸縮呢？本文作者用AXURE進(jìn)行了演示，一起來看看吧。

一、制作原型

拉入四個(gè)矩形框型，作為一組主菜單與子菜單，畫出兩組菜單。

主菜單命名為菜單一，下面三個(gè)子菜單分別命名為子菜單一，子菜單二，子菜單三。子菜單左側(cè)對齊并垂直分布，子菜單組與主菜單居中分布，子菜單合并成組命名為菜單一子菜單；同樣的方式畫出菜單二，將其子菜單合并成組命名為菜單二子菜單。

將子菜單和主菜單合并成組；各個(gè)菜單組對齊處理。對菜單進(jìn)行樣式設(shè)計(jì)，我這里把主菜單設(shè)為藍(lán)色填充，白色字體。

對子菜單進(jìn)行樣式設(shè)計(jì)，選中子菜單，右擊，選擇交互樣式，鼠標(biāo)懸停，鼠標(biāo)按下，選中的時(shí)候子菜單填充淺藍(lán)色。

將子菜單組設(shè)置為隱藏。主菜單按照展示的樣式進(jìn)行排列。

接下來從元件中拖拽內(nèi)聯(lián)框架，拖到合適大小，并將邊框進(jìn)行隱藏。

二、添加交互

點(diǎn)擊主菜單一，添加交互，新建交互，選擇（Click or Tap），顯示與隱藏，目標(biāo)選中子菜單組合，顯示動(dòng)畫，向下滑動(dòng)500ms，隱藏動(dòng)畫，向上滑動(dòng)500ms，更多選項(xiàng)，選擇推動(dòng)和拉動(dòng)原件，下方，線性500ms。

子菜單1設(shè)置交互，新建交互，選擇（Click or Tap），框架中打開鏈接，目標(biāo)選擇內(nèi)聯(lián)框架，鏈接到子菜單1對應(yīng)的詳細(xì)原型頁面。

按照同樣的方式設(shè)置其他的子菜單。（子菜單鏈接的具體頁面根據(jù)業(yè)務(wù)需要來，可以提前畫幾個(gè)菜單頁面）。

按照同樣的方式設(shè)計(jì)其他菜單和相應(yīng)的界面。最后形成的結(jié)果如圖。

本文由 @汪仔2268 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議。