制作動態(tài)效果的后臺導(dǎo)航欄——左側(cè)導(dǎo)航

6 評論 9456 瀏覽 47 收藏 6 分鐘

怎么制作動態(tài)效果的后臺導(dǎo)航欄呢,一起來文中看看~

先上完成效果:

整體的制作過程

1. 制作菜單元件

分別制作導(dǎo)航菜單中的每個元件,制作好一個以后,就可以復(fù)用了,制作步驟如下:

  1. 使用矩形,制作單個導(dǎo)航菜單的底層
  2. 使用圖片,制作導(dǎo)航菜單的圖標(biāo)
  3. 使用矩形,設(shè)置成三角形,制作導(dǎo)航菜單的二級菜單的顯示隱藏標(biāo)識

制作三角形的步驟:選擇矩形,右鍵選擇彈出來的菜單中的——變換形狀,選擇三角形。

2. 制作菜單

將制作好的菜單元件組合成一個整體的導(dǎo)航菜單元件

(1)改變?nèi)切蔚拇笮?6*16

(2)分別制作:一級無下級菜單,一級有下級的菜單,二級菜單

(3)組合菜單,以制作一級有下級的菜單為例:選中圖片、三角形、矩形、右鍵、彈出菜單、選擇組合。(一級無下級菜單同樣操作組合)

(4)制作二級菜單動態(tài)效果,選中二級菜單,在交互中,添加選中效果,設(shè)置選中后的背景顏色變更為#19a2dd。添加交互:單擊時——設(shè)置選中——當(dāng)前文件。重點,重點,給二級菜單設(shè)置選項組team2(選項組名字自定義)。

(5)制作一級菜單動態(tài)效果。給一級菜單組中的三角形添加一個名字:sanjiao(這個名字可以自定義)。選中一級菜單組,在交互中,添加交互:單擊時——旋轉(zhuǎn)——sanjiao——順時針——過——180°。

重點,重點,給一級菜單設(shè)置選項組team1(選項組名稱自定義)

3. 制作導(dǎo)航欄底層元件(這個沒什么好說的,直接看圖)

4. 制作導(dǎo)航菜單

自由組合一級,二級菜單,如圖。組合時,一定要確保每個菜單中的距離大于等于0,千萬不能小于0,注意,注意,注意。

(1)將財務(wù)管理下的四個二級菜單選中,右鍵彈出菜單,選擇轉(zhuǎn)換為動態(tài)面板,并設(shè)置動態(tài)面板名稱(財務(wù)管理,這里可以自定義設(shè)置)。人員管理,系統(tǒng)設(shè)置如法炮制。

(2)給一級菜單的單擊時的交互添加動作。以財務(wù)管理為例:添加顯示/隱藏(交互),目標(biāo)選擇動態(tài)面板財務(wù)管理,選擇切換;顯示動畫選擇向下滑動——300毫秒,隱藏動畫選擇向上滑動——300毫秒;重點,重點,重點,更多選項中,選擇推動和拉動元件——下方——線性——300毫秒。人員管理,系統(tǒng)設(shè)置如法炮制。

最后,把菜單捏在一起,OK了。大功告成,可以自己玩玩了。

 

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

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

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 我按照這個做了,加了一個地方,就是點擊跳轉(zhuǎn)到相應(yīng)的頁面。在點擊時,選中的菜單欄會變一下藍色,跳轉(zhuǎn)到相應(yīng)的頁面后就還是原來的顏色。請問這個如何處理?

    來自廣東 回復(fù)
  2. 多個三級下拉 的,第一個三級三級菜單下拉的時候,第二個三級菜單組件不會向下推動https://wgk51k.axshare.com

    來自廣東 回復(fù)
    1. 抱歉,當(dāng)我設(shè)置三級菜單的時候出現(xiàn)了和你一樣的問題。目前只能做到笨處理,隱藏和顯示三級菜單時,控制二級菜單的高度以及其它菜單的位置進行控制。等有更優(yōu)的解決方案時,會第一時間告知。
      謝謝

      來自廣東 回復(fù)
    2. 哇哇哇哇,求原型文件546854530@qq.com

      來自四川 回復(fù)
  3. 用中繼器也可以做,沒這么麻煩,

    來自貴州 回復(fù)
    1. 謝謝您的提議,回頭可以試試。
      條條道路通羅馬,做功能的時候,可以根據(jù)需求,不同的方法做相同的功能。

      來自廣東 回復(fù)