axure怎么設(shè)計(jì)菜單橫向隱藏與顯示的效果?
我要評(píng)論最近有若干個(gè)伙伴找我咨詢axure的用法，讓我這顆涼了許久的心又再次感受到一點(diǎn)溫度，也忽然意識(shí)到，凡事堅(jiān)持不懈的做下去，總會(huì)有收獲的，所以，本人近期將持續(xù)更新一些常用的小技巧，以便廣大還在摸索axure的朋友使用。本次將以講解如何做出滿意的隱藏菜單橫向隱藏與顯示的效果。
Axure RP Pro(快速原型設(shè)計(jì)工具) V8.0.0.3333 綠色英文免費(fèi)版
- 類型：應(yīng)用其它
- 大?。?/span>48.2MB
- 語言：英文軟件
- 時(shí)間：2017-04-10
1、在做菜單動(dòng)態(tài)效果之前，諸位應(yīng)該首先需要知道，我們需要什么組件，以最簡單的樣式來說，首先我們需要一個(gè)菜單的動(dòng)態(tài)面板，一個(gè)菜單的顯示按鈕，一個(gè)菜單的隱藏按鈕，若需要，還可增加一個(gè)菜單的具體頁面。
2、菜單與圖片的顯示，要按照自己的要求來設(shè)定，比如若想要進(jìn)入頁面后，頁面的菜單是顯示狀態(tài)的，則菜單與菜單隱藏按鈕直接顯示出來，菜單的顯示按鈕隱藏掉即可，反之，則要隱藏掉菜單與菜單隱藏按鈕，直接顯示出菜單顯示按鈕，此外將菜單的顯示/隱藏按鈕做成動(dòng)態(tài)面板，通過點(diǎn)擊來回切換，也是可行的。
3、設(shè)置好需要隱藏的菜單后，將隱藏與顯示按鈕位置重合覆蓋掉后平移至需要的位置，比如x軸為0的位置后即可，此時(shí)需要開始添加動(dòng)態(tài)事件。
4、動(dòng)態(tài)效果需要對(duì)兩個(gè)按鈕分別添加，對(duì)隱藏按鈕來說，需要添加點(diǎn)擊后，可將菜單隱藏掉，可將自己隱藏掉，同事還可顯示出菜單顯示按鈕的動(dòng)態(tài)事件；對(duì)顯示按鈕來說，效果基本都是反向的，具體如圖所示
5、最終效果如下，可通過點(diǎn)擊實(shí)現(xiàn)菜單向左隱藏，向右顯示的效果。
6、菜單顯示隱藏的效果需要視情況而定，比如網(wǎng)頁版，像360導(dǎo)航首頁，右側(cè)本身有留白區(qū)域，菜單的隱藏顯示基本與主頁面無關(guān)，但本人經(jīng)歷過的OA、CRM等辦公系統(tǒng)，在設(shè)計(jì)菜單隱藏顯示效果時(shí)一般都會(huì)要求頁面內(nèi)容與菜單隱藏顯示效果一起移動(dòng)，這點(diǎn)應(yīng)該在對(duì)應(yīng)的系統(tǒng)設(shè)計(jì)中，按要求實(shí)現(xiàn)。
相關(guān)推薦：
axure動(dòng)態(tài)面板怎么設(shè)置顯示與隱藏?
axure怎么設(shè)計(jì)鼠標(biāo)移入移出顯示或隱藏面板?
相關(guān)文章
Axure怎么設(shè)計(jì)手機(jī)短信倒計(jì)時(shí)效果?
Axure怎么設(shè)計(jì)手機(jī)短信倒計(jì)時(shí)效果？Axure中想要制作倒計(jì)時(shí)效果，該怎么制作呢？下面我們就來看看詳細(xì)的教程，很簡單，需要的朋友可以參考下2017-04-23
axure怎么用中繼器制作微博聯(lián)系人效果？想要仿照微博的聯(lián)系人樣式制作一個(gè)這種效果，該怎么制作呢？下面我們就來看看詳細(xì)的教程，需要的朋友可以參考下2017-04-23
axure怎么給文字設(shè)置跑馬燈效果？axure中想讓文字實(shí)現(xiàn)跑馬燈效果，該怎么實(shí)現(xiàn)呢》下面我們就來看看詳細(xì)的教程，需要的朋友可以參考下2017-04-23
axure怎么使用動(dòng)態(tài)面板制作淘寶圖片輪播效果?
axure怎么使用動(dòng)態(tài)面板制作淘寶圖片輪播效果？我們經(jīng)?？吹教詫氈杏袌D片輪播的效果，該怎么設(shè)計(jì)這種效果呢？下面我們就來看看通過axure實(shí)現(xiàn)的教程，需要的朋友可以參考下2017-04-23
axure怎么使用動(dòng)態(tài)面板制作轉(zhuǎn)盤抽獎(jiǎng)?
axure怎么使用動(dòng)態(tài)面板制作轉(zhuǎn)盤抽獎(jiǎng)？想要制作一個(gè)抽獎(jiǎng)轉(zhuǎn)盤，該怎么制作呢？下面我們就來看看詳細(xì)的教程，很簡單，需要的朋友可以參考下2017-04-23
Axure怎么設(shè)計(jì)多層級(jí)菜單下拉聯(lián)動(dòng)效果?
Axure怎么設(shè)計(jì)多層級(jí)菜單下拉聯(lián)動(dòng)效果？Axure中想要制作一個(gè)聯(lián)動(dòng)下拉菜單，該怎么制作呢？下面我們就來看看詳細(xì)的教程，需要的朋友可以參考下2017-04-23
Axure 8怎么設(shè)計(jì)三級(jí)折疊菜單?
Axure 8怎么設(shè)計(jì)三級(jí)折疊菜單？Axure 8中想要設(shè)計(jì)一個(gè)三級(jí)折疊菜單，效果及時(shí)可以逐級(jí)打開，合上某一級(jí)菜單時(shí)，二級(jí)菜單和三級(jí)菜單也會(huì)合上，下面我們就來看看詳細(xì)的教程，2017-04-14
Axure RP 8設(shè)怎么用按鈕控制圓形的變換？Axure RP 8中想要利用鼠標(biāo)的單擊事件控制圓形的尺寸背景動(dòng)向等變化，該怎么實(shí)現(xiàn)呢？下面我們就來看看詳細(xì)的教程，需要的朋友可以參2017-04-14
Axure RP 8設(shè)怎么控制輸入框禁用或啟用？想要設(shè)置一個(gè)輸入框的禁用或者啟用的按鈕，并實(shí)現(xiàn)相對(duì)應(yīng)的功能，該怎么實(shí)現(xiàn)呢？下面我們就來看看詳細(xì)的教程，需要的朋友可以參考下2017-04-14
Axure RP 8怎么設(shè)置控制多選列表傳值的效果?
Axure RP 8怎么設(shè)置控制多選列表傳值的效果？Axure RP 8總想通過按鈕點(diǎn)擊事件給多選列表添加值，該怎么實(shí)現(xiàn)呢？下面我們就來看看詳細(xì)的教程，需要的朋友可以參考下2017-04-05
