axure 鼠标变成手,Axure教程|鼠标移入移出自动显示与隐藏三级菜单
前幾天因工作需要做一個鼠標移入顯示隱藏菜單,鼠標移出自動隱藏菜單,
做的時候覺得沒有什么問題,做完后預覽就發現一個很嚴重的問題,就是鼠標移出一級菜單向二級菜單時二級菜單不顯示,或者二級菜單顯示三級菜單不顯示。
后來經過仔細檢查發現是因為一級菜單與二級菜單之間有間距,導致鼠標移出時
隱藏了二級菜單,以及沒有設置鼠標移入三級菜單顯示二級菜單,導致二級菜單自動隱藏。
現在把本次制作過程總結如下:
1、畫出四個大小相同的矩形框,然后分別放入對應的形狀(可以去阿里巴巴矢量庫iconfont下載,也可以不放形狀),矩形框與形狀組合起來,設置為一級菜單,分別取名字,可以為每個一級菜單設置鼠標移入時選中的效果(看個人需要),我這里設置了選中效果;
如圖所示,為一級菜單-合同管理,設置鼠標移入時顯示對應二級菜單-合同管理,同時設置選中一級菜單-合同管理,鼠標移出時隱藏二級菜單-功能總覽,同時取消選中一級菜單-功能總覽;為每個一級菜單設置同樣的交互方式。
2、為每個一級菜單分別畫出對應的二級菜單,(我這里每個一級菜單只畫出了一個二級菜單,大家可以嘗試多畫幾個),二級菜單由一個底部的大矩形和多個小矩形組合成,在小矩形里面畫上文本框和相應箭頭,做成一個組合,給組合命名,就是二級分類菜單的名字,給組合設置移入移出組合顯示以及隱藏對應三級菜單,如圖所示。
3、然后設計三級菜單,過程同二級菜單設計過程,不同之處就是無需設置移入或者移出顯示的交互設計,直接設計交互鼠標單擊三級菜單顯示對應三級菜單頁面,如圖所示。
4、設計過程中需要注意,一級菜單和二級菜單之間不能有空隙,二級菜單和三級菜單也不能有空隙,否則容易造成,鼠標移入移出效果失敗,同時需要注意所有二級菜單疊加在一起,注意位置重合,三級菜單放在二級菜單后面,三級菜單疊加放在一起。
總結
以上是生活随笔為你收集整理的axure 鼠标变成手,Axure教程|鼠标移入移出自动显示与隐藏三级菜单的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: c++ 不能分配给为0的数组_【嵌入式C
- 下一篇: (贪心)背包问题