【Axure怎么設計多層級菜單下拉聯動效果？小編教你電腦技術提升篇】小編在這段時間遇到好多廣大網友的咨詢， 今天免費分享一下關于電腦系統和電腦操作教程的知識大全， 這篇文字是關于Axure怎么設計多層級菜單下拉聯動效果？小編教你電腦技術提升篇的文字， 歡迎大金仔細閱讀， 如果不懂請多多關注我們網址陸續更新更多更全面的電腦教程 。
菜單的下拉聯動多種多樣， 多辦公軟件來說， 菜單往往有多個層級， 可以下拉聯動， 通過下拉來顯示出子菜單， 同時還可以移動其他未展開或已展開的菜單 。 下面由我來為大家講解一下我的實現思路， 其實非常像做千層餅， 而且我是從最內層開始做的 。
文章插圖
1、以三個一級菜單為例， 我們可以直接先做第三個一級菜單， 新建一個一級菜單， 起名為第三個一級菜單， 同時在它下方建立好三個子菜單， 建好后將子菜單全選中后轉換為動態面板， 并設置隱藏 。
文章插圖
2、菜單的聯動效果一般是通過點擊來觸發的， 所以， 此時對第三個一級菜單添加點擊事件， 此時需注意：因為點擊時可能觸發兩個動作， 所以點擊事件需要添加條件進行判斷， 如：當子菜單面板是隱藏的時候， 點擊后可顯示子菜單；當子菜單是顯示的時候， 點擊后可隱藏子菜單 。 同時可在事件內加動態效果， 如向下顯示、向上隱藏， 時間暫定500ms；
文章插圖
文章插圖
3、此時第最后一個一級菜單設置完成了， 但因為前面的一級菜單需要通過點擊， 顯示其下方的子菜單， 同時使第三個一級菜單與其下屬子菜單向下移動， 所以， 我們需要將第三個一級菜單與其子菜單視作一個整體， 使他們一同移動， 所以， 此時需將其設置為一個動態面板；
文章插圖
4、下面我們來做第二個一級菜單， 同樣的制作原理與步驟與第三個一級菜單與子菜單一致， 但需要把剛剛做好的動態面板一并放置在同一頁面， 以便后續操作；
文章插圖
5、此時對第二個一級菜單做點擊事件的添加：當子菜單面板是隱藏的時候， 點擊后可顯示子菜單；當子菜單是顯示的時候， 點擊后可隱藏子菜單 。 但與前一個一級菜單相比， 需多加一個效果， 即移動第三個一級菜單的動態面板， 移動距離以子菜單的高度*子菜單數量， 比如我例子中用的是三個高40的子菜單， 則需分別對y坐標移動+/-120;
文章插圖
6、此時可以適當運行一下效果， 驗證做法是否有誤， 效果如圖， 效果正確后， 將剛剛所做的所有內容全選， 并設置成一個動態面板
文章插圖
文章插圖
文章插圖
7、此時重復第四五步驟， 事件添加后發布嘗試， 可看到效果如圖；此時多個菜單面板層層獨立， 均可通過點擊實現下拉顯示與收起， 且處于其下方的菜單， 也會跟著移動， 不對有錯誤的效果出現 。
文章插圖
8、最后， 調整各個面板的位置， 統一對齊后， 效果如圖， 此時就完成了三級菜單下拉顯示的效果了
文章插圖
以上內容就是關于Axure怎么設計多層級菜單下拉聯動效果？小編教你電腦技術提升篇的詳細內容， 更過關于電腦系統百科的教程請關注我們！
推薦閱讀
- 怎么設置QQ背景音樂OPPO手機解決您的問題
- 怎么設置QQ登陸網站軟件授權權限管理2020發布推薦
- 怎么把QQ相冊關閉解決您的問題
- 電腦QQ實名認證信息怎么修改電腦技術提升篇
- 中國電信wlan怎么用2020教程資訊
- 幻境網盾怎么用？小編教你教你怎么限制別人網速技術提升了嗎
- ie瀏覽器無法打開搜索頁怎么解決猜你喜歡的
- 電腦屏幕變小了怎么調？小編教你解決您的問題
- 360來電顯示歸屬地怎么設置？小編教你推薦閱讀
- iphone5怎么導入SIM通訊錄推薦閱讀