設(shè)計(jì)菜單橫向隱藏與顯示的效果

設(shè)計(jì)菜單橫向隱藏與顯示的效果

　　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)。

【設(shè)計(jì)菜單橫向隱藏與顯示的效果】相關(guān)文章：

顯示電腦隱藏文件的操作步驟07-04

如何評(píng)價(jià)手機(jī)QQ新版取消頭像顯示狀態(tài)的效果？07-09

公共空間設(shè)計(jì)與實(shí)訓(xùn)橫向性研究作文07-28

室內(nèi)效果設(shè)計(jì)崗位職責(zé)06-09

橫向課題合同07-26

室內(nèi)效果設(shè)計(jì)崗位職責(zé)3篇06-09

怎么把QQ隱藏?07-13

注重課堂問題設(shè)計(jì)增強(qiáng)教學(xué)效果的散文07-03

效果圖設(shè)計(jì)合同書09-10

怎樣隱藏qq圖標(biāo)07-13